Change blockquote style?

Tagged: blockquote, change, style

This topic has 11 replies, 2 voices, and was last updated 6 years, 6 months ago by Skandha.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
May 10, 2018 at 10:26 pm #145502

Michael
Participant

I’m running a number of WP pages with various different pro themes. I imagine the answer will be the same for all (or most) themes but I’m posting here for the sake of an example.

I like this theme but I find the blockquote style quite plain and boring, and not sufficie3ntly distinguished from the main text. https://catchthemes.com/demo/adventurous/about/page-markup-and-formatting/

There are a number of styles I prefer:

This one from the Simple Catch theme seems is a little different, but not overly so, but is much better at distinguishing the quote.
https://catchthemes.com/demo/simplecatch/html-elements/

vertical line/s to side of quote as per High Responsive theme:
https://catchthemes.com/demo/high-responsive/style-gude/

Quote symbol as per Adonis theme:
https://catchthemes.com/demo/adonis/style-guide/

or the more subtle version with muted quote symbol colour and more flowing/compact text of the fabulous fluid theme:
https://catchthemes.com/demo/fabulous-fluid/about/page-markup-and-formatting/

smaller quote symbol as per Decree theme:
https://catchthemes.com/demo/decree/style-gude/
or slightly more subtle Gridalicious theme:
https://catchthemes.com/demo/gridalicious/2013/01/11/markup-html-tags-and-formatting/

So my question is: How can I change this please, does it require custom CSS and if so should it be done in a child theme? If you could provide the relevant CSS required and instruct where to put it that would be awesome ! Thank you.

May 11, 2018 at 2:48 am #145513

Skandha
Participant

@landyvlad: You can change the block-quote style by adding a bit of CSS Code. It is better to always create a child theme while making customizations as you won’t risk losing your customizations after theme updates.
Let me know which block-style you want?

Kind Regards,
Skandha

May 11, 2018 at 3:12 am #145516

Michael
Participant

Perhaps this one please.

https://catchthemes.com/demo/high-responsive/style-gude/

Thank you so much.

May 11, 2018 at 4:11 am #145519
Skandha
Participant
@landyvlad: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
blockquote {
	border:0 solid #1a1a1a;
	border-left-width:4px;
	color:#777;
	font-size:19px;
	font-style:italic;
	line-height:1.4736842105;
	margin:0 0 1.4736842105em;
	overflow:hidden;
	padding:0 0 0 1.263157895em;
	background:none;
}
```
Let me know if does the trick.
Kind Regards,
Skandha
May 22, 2018 at 10:42 pm #146293

Michael
Participant

Yep does well.

Is there a way that I can indent the blockquote (including the vertical line) a bit further from the LHS of the page please?

Also if you could provide the code for the blockquote style from the Simple Catch theme, I’d really appreciate that too. https://catchthemes.com/demo/simplecatch/html-elements/

May 23, 2018 at 6:41 am #146314
Skandha
Participant
@landyvlad: To indent the blockquote
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
blockquote {
    margin-left:40px;
}
```
You can adjust the margin according to your requirement.

To get blockquote style like of Simple Catch Theme
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
blockquote {
	font-style:italic;
	font-weight:normal;
	padding:20px 20px 20px 50px;
	background: url("https://catchthemes.com/demo/simplecatch/wp-content/themes/simple-catch/images/blockquote-bg.jpg") 10px 10px no-repeat #eee;
	border-left:4px solid #CCCCCC;
	border-right:4px solid #CCCCCC;
	margin-bottom:20px;
}
```
Let me know if this works out.
Kind Regards,
Skandha
May 23, 2018 at 9:02 pm #146383
Michael
Participant
Again that works – thank you so much.

If I might ask just one additional little thing.

I have this as per the high-responsive theme:
```
blockquote {
	border:0 solid #1a1a1a;
	border-left-width:4px;
	color:#777;
	font-size:19px;
	font-style:italic;
	line-height:1.4736842105;
	margin:0 0 1.4736842105em;
	overflow:hidden;
	padding:0 0 0 1.263157895em;
	background:none;
}
```
and would like to keep that as is, but merely add the quote symbol from the simple-catch theme,
(https://catchthemes.com/demo/simplecatch/wp-content/themes/simple-catch/images/blockquote-bg.jpg)leaving all else the same.
And if you could tell me where to put the symbol so it can be referenced locally rather than having to call on the catch themes sites each time, that would be best.

I hope this makes sense.

Thank you again.
May 24, 2018 at 4:17 am #146411
Skandha
Participant
@landyvlad: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
blockquote {
	border:0 solid #1a1a1a;
	border-left-width:4px;
	color:#777;
	font-size:19px;
	font-style:italic;
	line-height:1.4736842105;
	margin:0 0 1.4736842105em;
	overflow:hidden;
	background:url(blockquote-bg.jpg) no-repeat;
	padding:0 0 0 1.263157895em;
}
blockquote p {
	padding-left:5px;
}
```
You can put the image inside images folder in your theme folder.
Let me know if this works out.
Kind Regards,
Skandha
May 24, 2018 at 7:31 pm #146494

Michael
Participant

Q1: so in

background:url(blockquote-bg.jpg) no-repeat;

Do I need to put that just as is, or do I put the URL specific to me and if so is that a relative or full URL ?

Q2: Oh and by the way that code for the indent you provided earlier

blockquote {
margin-left:40px;
}

doesn’t work. I’ve tried it both in front of and after the existing blockquote code. I’ve even trued to alter the expression to the 4 variable format within the existing blockquote code, to make a 40px LH margin. No luck.

Perhaps I’m missing something? It’s likely my fault.. 🙂

Thanks again for your ongoing assistance with this it is REALLY appreciated.

May 25, 2018 at 1:04 am #146508

Skandha
Participant

@landyvlad: 1. Once you have pasted the block-quote image inside the images folder inside your theme folder you need to put the full url only the image name with extension will do.

2. Please post in your site URL.

Kind Regards,
Skandha

May 28, 2018 at 10:04 am #146683

Michael
Participant

Not sure what you mean by the first line?

My sites are http://www.landyvlad.net and http://www.gayundah.info

May 29, 2018 at 2:36 am #146716
Skandha
Participant
@landyvlad: I meant once you have pasted the image inside images folder under you theme folder you need not write the full url and can just write the image filename along with the extension.
For eg. url(blockquote-bg.jpg);

For padding try this
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.
```
blockquote {
    margin-left:40px !important;
}
```
Let me know if this works out.
Kind Regards,
Skandha
Author

Posts