Tagged: Alchemist Pro., background image, blockquote, format, quote, text
- This topic has 34 replies, 2 voices, and was last updated 3 years, 2 months ago by
Skandha.
-
AuthorPosts
-
March 20, 2021 at 2:11 am #277330
Michael
ParticipantItem 1:
OK so I am still having the problem with the formatting of the block quotes.
example page: https://www.gayundah.info/reception-in-brisbane/Note the red line down the left hand side, rather than the quote ” icon at the top of the quote.
So far I have this css added in the additional css section, per your previous responses.
/* 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; } /* indent blockquote text */ .wp-block-quote p { margin-left: 25px; }
How can I fix this please?
Item 2:
Is it possible to have an image as the background in the block quotes? If so, how please?Apology
I apologise for having to start a part 2, but previous thread was closed for replies. It said I still had posting privileges, but then gave an error re thread closed (I have a screenshot for you if you want it)
Cheers and thanks
March 20, 2021 at 4:06 am #277333Skandha
Participant@landyvlad: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code..wp-block-quote { background-image: url('https://www.gayundah.info/wp-content/uploads/2015/05/aerial-photo-arrowed-web.jpg'); }
Replace the link with the link of the image you want as the background image.
Let me know if this works out!
Kind Regards,
SkandhaMarch 20, 2021 at 10:16 pm #277397Michael
ParticipantThat takes care of item 2: works perfectly thanks
What about item 1?
(the blockquote format)March 20, 2021 at 10:51 pm #277403Skandha
Participant@landyvlad: Hello there,
I am afraid I am not able to understand the issue no 1. Can you please elaborate?Kind Regards,
SkandhaMarch 20, 2021 at 11:28 pm #277406Michael
ParticipantIt’s very confusing in fact:
Compare: https://www.gayundah.info/reception-in-brisbane/
With: https://www.gayundah.info/mutiny/The first reflects all the CSS changes I have made, but still has the red line on the LHS of the quote.
The second doesn’t reflect ANY of the changes but has the quote as per the code you originally gave me for the “ symbol colour and position. The same is true of most pages on the site containing any block quotes.March 20, 2021 at 11:30 pm #277407Michael
ParticipantThis is the css I currently have in the ádditional css box.
/* 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 colour */ .wp-block-quote { background-color: #ebf2f7; } /* blockquote border radius */ .wp-block-quote { border-radius: 50px 20px;align-content }
March 22, 2021 at 8:21 am #277547Skandha
Participant@landyvlad: Hello there,
The code doesn’t work for the blockquote in the page Mutiny because there is<header class="luna-data-header">
after the blockquote unlike in the page Reception in Brisbane where there is <p> tag.You seem to have added the blockquote in the Munity page differently than the other page. Do you want the blockquote to have the same effect like in the Reception in Brisbane page?
Kind Regards,
SkandhaMarch 22, 2021 at 5:45 pm #277586Michael
ParticipantAll blockquotes should be as per the reception in brisbane page’ OTHER than:
1. SHOULD NOTE Not have a border down the left hand side of the blockquote (that’s some sort of carry over from the previous Adventurous Pro theme)
2. SHOULD have the blockquote ‘quote’ symbol as per the mutiny page that is on LHS and in black as per the existing “additional css” code./* blockquote quotation mark */ blockquote::before { left: 0% !important; color: #000000 !important; font-size: 40px !important; font-family: Arial !important; font-weight: bolder; }
March 24, 2021 at 4:47 am #277739Skandha
Participant@landyvlad: Hello there,
Can you please use the Quote Block in the Blocks section and no CSS will need to be added.Edit a page => Add New Block => Text => Quote => Insert your text and Update the Page.
Let me know if this works out!
Kind Regards,
SkandhaMarch 24, 2021 at 11:25 pm #277799Michael
ParticipantSo I’d need to go and re-do every quote on the website?
March 31, 2021 at 10:18 pm #278468Michael
ParticipantSo just checking – @Skandha do I need to redo every quote on the site individually to fix this?
April 1, 2021 at 6:27 am #278522Skandha
Participant@landyvlad: Hello there,
If you use the Quote Block everywhere the above CSS Code will work or else you will need to add CSS Code for every Quote section.
I guess using the Quote Block is a better option.Kind Regards,
SkandhaApril 3, 2021 at 12:12 am #278666Michael
ParticipantSo for that do I need to convert each one to a block (many were done in the classic editor), and then select Gutenberg block type as quote? Or Is there a special way to choose the alchemist theme quote style?
April 5, 2021 at 6:12 am #278832Skandha
Participant@landyvlad: Hello there,
You can use the Gutenberg Quote Block and that should work.Kind Regards,
SkandhaApril 7, 2021 at 8:52 pm #279055Michael
ParticipantIt isn’t working – if I create a new block quote it has the line down the side.
May 9, 2021 at 4:54 am #281620Michael
ParticipantHello? As abive It isn’t working – if I create a new block quote it has the line down the side.
May 12, 2021 at 1:35 am #281799Michael
ParticipantHello? I’d appreciate some more guidance on this please? I need to resolve this problem as my website is looking poor at the moment due to this issue.
Also – Is there a reason for the delays in response to help threads on the catch themes forum recently?
May 18, 2021 at 12:31 am #282189Skandha
Participant@landyvlad: Hello there,
Sorry for the late reply. Your reply email was in the spam folder and I missed it unfortunately.
Can you please let me know on which page you are having a line under the block quote?Kind Regards,
SkandhaMay 18, 2021 at 7:40 pm #282300Michael
ParticipantNot under the quote, but beside the quote (as per my comments above).
I’ve created this page and a created a quote using the standard gutenberg quote block.
https://www.gayundah.info/aaa-test/as you can see, it’s not in the format that should appear.
Instead, there is a line down the LHS, there is no quote symbol at the top left hand side.
May 19, 2021 at 8:06 am #282357Skandha
Participant@landyvlad: Hello there,
Your site doesn’t seem to be accessible at the moment. Can you please let me know when it is accessible so that I can look into the issue?Kind Regards,
Skandha -
AuthorPosts
- The topic ‘How to change font/design for blockquotes PART 2’ is closed to new replies.