Archived topic
Blockquote Using GenerateBlocks
13 replies · Started by Jose on April 8, 2021
Hello!
I created a blockquote using GenerateBlocks and I like how it looks, but the quote has an adjacent grey vertical line to its left side that I would like to get rid of. How can I eliminate that grey vertical line that appears to the left side of the quote, for all quotes I create with GenerateBlocks? Here is a screenshot illustrating what I mean: https://screencast-o-matic.com/i/crfjqLVnDVp. Thank you!
Hi Jose,
GB doesn't have the specific style for quotes, did you use WP's quote block? I can't tell how the line been added by looking at a screenshot.
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hello! Yes, of course, I have shared it in the private information field for you to take a look :).
And you're right I'm not sure if it was GenerateBlocks. Just in case you need to see exactly how I added it, I pointed it here: https://screencast-o-matic.com/i/crfjY5VnDIk
It is not using GB :)
But you could try this CSS:
blockquote.wp-block-quote {
border: none;
}
Great, I added it using the simple CSS plugin and Customizer, and it worked! Thank you! Moreover, will this code remove the line on every future post that I use the blockquote function on, or would I have to add it manually each time?
It will remove the line for future wp blockquotes as well :)
Btw it only needs to be added once in Simple CSS or Customizer > Additional CSS, doesn't have to be added to both.
Sorry, what I meant was that I added it in the Simple CSS option that is inside the customizer,
like this: https://screencast-o-matic.com/i/crfj36VnDwJ. Is this correct?
That means you have the Simple CSS plugin installed.
You can either add the CSS to Simple CSS or the Additional CSS (WP by default), either of them should work :) Doesn't matter which one you added in.
Hello again!
I have another inquiry regarding this: Is there any way to have the quotes be enlarged and in the sky blue color on every post? Like this: https://screencast-o-matic.com/i/crfQiBVnb59. Because my previous theme I was using had the ability to have the same size and color for every blockquote on every post automatically set from the theme panel, and I was wondering if I could do the same with GP Premium. So far, I've only be able to set the desired size and color for one blockquote manually and individually, and since I have 38 posts, it would be quite tedious to set them one by one to look how I want. I wonder if maybe there is come CSS code I can insert to have very blockquote be automatically large and in the sky blue color on every post? (As in the screenshot) Thanks!
Hi there,
if you don't change the styles in the editor then you can use some CSS to style all quotes:
/* Blockquote - remove border and change font style */
blockquote.wp-block-quote {
border-left: none;
font-size: 30px;
color: skyblue;
text-align: center;
}
/* Optional change style of citation */
blockquote.wp-block-quote cite {
font-size: 15px;
color: #000;
}
Thanks! The code you gave me works well. However, the quotes are now a bright red, how can I set them to the sky blue color? And also, if possible, how can I set them to be center-aligned on the page? (Currently they are left-aligned, as in the screenshot above) Thank you.
I updated the CSS above to change the color to skyblue and center align the text.
Great! Sorry to extend this, but I just noticed the sky blue is a bit hard to read, could it be this color #40ACEA, vivid blue? Thank you.
For sure - edit the CSS and change this line:
color: skyblue;
to:
color: #40ACEA;