Tagged: Alchemist Pro., background image, blockquote, format, quote, text
- This topic has 34 replies, 2 voices, and was last updated 3 years, 3 months ago by Skandha.
-
AuthorPosts
-
May 19, 2021 at 6:51 pm #282412MichaelParticipant
Weird I just accessed through anonymous browser and got a 401 first time but refreshed and it worked.
May 20, 2021 at 8:20 am #282470SkandhaParticipant@landyvlad: Hello there,
Do you want the blockquote to be link in this page?Kind Regards,
SkandhaMay 20, 2021 at 8:56 pm #282495MichaelParticipantSimilar to that yes, but as per the previous code you provided so that the quote symbol is to the left and a different colour.
June 1, 2021 at 10:38 am #283539SkandhaParticipant@landyvlad: Hello there,
Please remove the CSS you have earlier for blockquote and add the following CSS Code..wp-block-quote::before { content: "\201C" !important; } .wp-block-quote { border: unset; padding: 50px 0 0 0 !important; }
Let me know if this works out!
Kind Regards,
SkandhaJune 4, 2021 at 2:30 am #283759MichaelParticipantThis is what I currently have – which part should I replace with the new?
/* Menu item Hover & Active Text Color */
.site-navigation li a:hover,
.site-navigation li a:focus,
.site-navigation .current_page_item > a,
.site-navigation .current_page_item > a {
color: #ff8000;
}
@media screen and (min-width: 64em) {
/* Menu Background Color */
.site-primary-menu,
.site-navigation ul ul,
.site-navigation ul ul li,
.search-container {
background-color: #000;
}
/* Menu Text Color */
.site-navigation a,
.social-navigation a,
.menu-search-main-toggle {
color: #fff;
}/* Sub-menu Border and Color */
.site-navigation .menu-item-has-children > ul,
.site-navigation .page_item_has_children > ul {
border-top: 3px solid #ff8000;
}
}/* blockquote quotation mark */
blockquote::before {
left: 0% !important;
color: #000000 !important;
font-size: 40px !important;
font-family: Arial !important;
font-weight: bolder;
}/* blockquote text */
blockquote {
font-size: 20px;
font-family: Georgia;
font-weight: normal;
color: #000000;
text-align: left;
}/* padding inside blockquote */
.wp-block-quote p {
padding-top: 15px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;
}/* blockquote background image */
/*
.wp-block-quote {
background-image: url(‘https://www.gayundah.info/wp-content/uploads/2015/05/aerial-photo-arrowed-web.jpg’);
}
*//* blockquote background colour */
.wp-block-quote {
background-color: #ebf2f7;
}/* blockquote border radius */
.wp-block-quote {
border-radius: 50px 20px;align-content
}June 4, 2021 at 2:45 am #283762MichaelParticipantI’ve commented out the parts I though relevant so additional css now appears as follows:
/* Menu item Hover & Active Text Color */ .site-navigation li a:hover, .site-navigation li a:focus, .site-navigation .current_page_item > a, .site-navigation .current_page_item > a { color: #ff8000; } @media screen and (min-width: 64em) { /* Menu Background Color */ .site-primary-menu, .site-navigation ul ul, .site-navigation ul ul li, .search-container { background-color: #000; } /* Menu Text Color */ .site-navigation a, .social-navigation a, .menu-search-main-toggle { color: #fff; } /* Sub-menu Border and Color */ .site-navigation .menu-item-has-children > ul, .site-navigation .page_item_has_children > ul { border-top: 3px solid #ff8000; } } /* /* blockquote quotation mark blockquote::before { left: 0% !important; color: #000000 !important; font-size: 40px !important; font-family: Arial !important; font-weight: bolder; } */ /* blockquote text blockquote { font-size: 20px; font-family: Georgia; font-weight: normal; color: #000000; text-align: left; } */ .wp-block-quote::before { content: "\201C" !important; } .wp-block-quote { border: unset; padding: 50px 0 0 0 !important; } /* padding inside blockquote */ .wp-block-quote p { padding-top: 15px; padding-right: 20px; padding-bottom: 15px; padding-left: 25px; } /* blockquote background image */ /* .wp-block-quote { background-image: url('https://www.gayundah.info/wp-content/uploads/2015/05/aerial-photo-arrowed-web.jpg'); } */ /* blockquote background colour */ .wp-block-quote { background-color: #ebf2f7; } /* blockquote border radius */ .wp-block-quote { border-radius: 50px 20px;align-content }
and looking at the quotes here (and almost everywhere else) it’s consistent.
https://www.gayundah.info/government-requirement/however on this page the quotes are the same as above except they have a background colour which I prefer.
https://www.gayundah.info/reception-in-brisbane/
I’m not sure why this page is different? and howo we can get all pages to have that quote background please?June 4, 2021 at 8:54 am #283785SkandhaParticipant@landyvlad: Hello there,
I checked your site you seem to have figured it out. Is the issue resolved?Kind Regards,
SkandhaJune 15, 2021 at 2:38 am #284450MichaelParticipantNoit no sorted yet.
As stated above
looking at the quotes here (and almost everywhere else) it’s consistent.
https://www.gayundah.info/government-requirement/however on this page the quotes are the same as above except they have a background colour which I prefer.
https://www.gayundah.info/reception-in-brisbane/
I’m not sure why this page is different?How can I get all pages to have that quote background please?
June 15, 2021 at 8:10 am #284477SkandhaParticipant@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.blockquote { background-color: #ebf2f7; border-radius: 50px; padding: 50px !important; }
Let me know if this makes the blockquote uniform on all pages.
Kind Regards,
SkandhaJune 16, 2021 at 9:32 pm #284615MichaelParticipantOK I added that to the end of the existing css noted above.
Works! Thanks.(Do I need to remove any of the .wp-block-quote code? Or should I leave it as is?
The only change I’d like now is for the actual ” symbol at the top of the quote to be on the left hand side, and coloured black.
How do I achieve that please?
June 17, 2021 at 12:17 am #284626SkandhaParticipant
@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.blockquote::before { color: #000; left: unset; } .wp-block-quote::before { color: #000; left: 5%; }
You don’t need to remove any code except for the code you have commented
Let me know if this works out!
Kind Regards,
SkandhaJune 21, 2021 at 1:55 am #284925MichaelParticipantGreat thank you.
One LAST question for this thread – is it possible to actually reduce the size (in points) of that quote symbol?
(If not that’s OK just wondering)June 21, 2021 at 2:11 am #284927SkandhaParticipant
@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.blockquote::before, .wp-block-quote::before { font-size: 68px; }
You can change the font size according to your choice.
Let me know if this works out!
Kind Regards,
SkandhaJune 21, 2021 at 2:19 am #284932MichaelParticipantThank you.
This matter is now resolved you can close the thread. Thank you for your assistance.June 21, 2021 at 4:35 am #284942SkandhaParticipant@landyvlad: Glad the issue is resolved. Have a good day! 🙂
Kind Regards,
Skandha -
AuthorPosts
- The topic ‘How to change font/design for blockquotes PART 2’ is closed to new replies.