Advertisement

How to change the blockquote style?

Everything to do with Joomla! 5.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
JKrasna
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Jun 14, 2024 9:40 pm

How to change the blockquote style?

Post by JKrasna » Sat Oct 12, 2024 12:08 am

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.
You do not have the required permissions to view the files attached to this post.
Last edited by JKrasna on Sat Oct 12, 2024 12:15 am, edited 1 time in total.

Advertisement
gws
Joomla! Champion
Joomla! Champion
Posts: 6399
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: How to change the blockquote style?

Post by gws » Sat Oct 12, 2024 8:55 am

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.

User avatar
AMurray
Joomla! Master
Joomla! Master
Posts: 10264
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: How to change the blockquote style?

Post by AMurray » Sat Oct 12, 2024 9:06 am

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").
Regards - A Murray
General Support Moderator

JKrasna
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Jun 14, 2024 9:40 pm

Re: How to change the blockquote style?

Post by JKrasna » Sun Oct 13, 2024 5:30 am

gws wrote: Sat Oct 12, 2024 8:55 am 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
Joomla! Apprentice
Joomla! Apprentice
Posts: 9
Joined: Fri Jun 14, 2024 9:40 pm

Re: How to change the blockquote style?

Post by JKrasna » Sun Oct 13, 2024 5:48 am

AMurray wrote: Sat Oct 12, 2024 9:06 am 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.
You do not have the required permissions to view the files attached to this post.

User avatar
AMurray
Joomla! Master
Joomla! Master
Posts: 10264
Joined: Sat Feb 13, 2010 7:35 am
Location: Australia

Re: How to change the blockquote style?

Post by AMurray » Sun Oct 13, 2024 9:35 pm

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
Regards - A Murray
General Support Moderator

Advertisement

Post Reply

Return to “Templates for Joomla! 5.x”