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:
How would I instead achieve something more like this (from my WP site)?:
Thank you.
Advertisement
How to change the blockquote style?
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.
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.
-
- Joomla! Apprentice
- Posts: 9
- Joined: Fri Jun 14, 2024 9:40 pm
How to change the blockquote style?
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
-
- Joomla! Champion
- Posts: 6399
- Joined: Tue Aug 23, 2005 1:56 pm
- Location: South coast, UK
- Contact:
Re: How to change the blockquote style?
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.
https://gadsolutions.biz Electrical services
https://electrical-testing-safety.co.uk Testing services
https://electrical-testing-safety.co.uk Testing services
- AMurray
- Joomla! Master
- Posts: 10264
- Joined: Sat Feb 13, 2010 7:35 am
- Location: Australia
Re: How to change the blockquote style?
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.
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").
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>
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
General Support Moderator
-
- Joomla! Apprentice
- Posts: 9
- Joined: Fri Jun 14, 2024 9:40 pm
Re: How to change the blockquote style?
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.
-
- Joomla! Apprentice
- Posts: 9
- Joined: Fri Jun 14, 2024 9:40 pm
Re: How to change the blockquote style?
Thank you for the code! That should be a good starting point. I looked at the Inspector and it highlights this code: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.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.Code: Select all
<div style="margin:10px"><span style="font-size:45px;">"</span><blockquote style=align:center">something something</blockquote></div>
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").
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.
- AMurray
- Joomla! Master
- Posts: 10264
- Joined: Sat Feb 13, 2010 7:35 am
- Location: Australia
Re: How to change the blockquote style?
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
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
General Support Moderator
Advertisement