How to change the blockquote style?

[JKrasna]

I have some blockquotes in an article, but I don't like the style that my template uses. It has this vertical line in the picture:

Blockquote.png

How would I instead achieve something more like this (from my WP site)?:

Quotes.png

Thank you.

[gws]

Use your browser inspect function and determine the css rule currently styling the block quote. Create a user.css or whatever your template uses and restyle how you want.

[AMurray]

I would guess, you first need an image of the quote marks 66, then you need to align that image to the left, and centre your quote text, or you can use straight text for the quote marks rather than an image using an enlarged font size.
I don't know exactly as I'm not an HTML/CSS expert but it will take some trial and error. Something to get you started - not the cleanest code and not the best methodology but it's a starting point.

Code: Select all

<div style="margin:10px"><span style="font-size:45px;">"</span><blockquote style=align:center">something something</blockquote></div>

The better way would be adapt the inline styles exampled above into your user.css (or custom.css) custom CSS style sheet file when you get the look you're after.

Maybe even simpler, in your example replace the 'vertical line' image with a quote mark image. You might need to dig into the CSS to find out that - using the browsers webmaster tools "Inspect" function (select the element, right click, select "Inspect").

[JKrasna]

Use your browser inspect function and determine the css rule currently styling the block quote. Create a user.css or whatever your template uses and restyle how you want.

Thank you. I will try it out. Could you point me to where I would create the user.css. I am brand new and am not sure where to begin with that.

[JKrasna]

I would guess, you first need an image of the quote marks 66, then you need to align that image to the left, and centre your quote text, or you can use straight text for the quote marks rather than an image using an enlarged font size.
I don't know exactly as I'm not an HTML/CSS expert but it will take some trial and error. Something to get you started - not the cleanest code and not the best methodology but it's a starting point.

Code: Select all

<div style="margin:10px"><span style="font-size:45px;">"</span><blockquote style=align:center">something something</blockquote></div>

The better way would be adapt the inline styles exampled above into your user.css (or custom.css) custom CSS style sheet file when you get the look you're after.

Maybe even simpler, in your example replace the 'vertical line' image with a quote mark image. You might need to dig into the CSS to find out that - using the browsers webmaster tools "Inspect" function (select the element, right click, select "Inspect").

Thank you for the code! That should be a good starting point. I looked at the Inspector and it highlights this code:

Blockquote.png

I don't see anything about the vertical line in there. It looks like it might be in the code above that line.

[AMurray]

The code you want is apparently in an external style sheet with a CSS class name "elementor-blockquote". I would go back to your WP site and check how Elementor references CSS. We can't really go into that since you're referencing a wordpress site and that's off-topic for Joomla.

You might want to ask where to find that specific code on a WP or Elementor forum and then come back to this forum with the CSS and ask how to adapt it to a Joomla site (the normal way, is that any custom CSS would be placed in your user.css or custom.css file (depending yon your Joomla template)

In your browser, click the little arrow within the code (screenshot as demonstrated) to expand the code within <blockquote class="elementor-blockquote">...</blockquote> that may provide some further hints