[Michael]

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.

[Skandha]

@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

[Michael]

Perhaps this one please.

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

Thank you so much.

[Skandha]

@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

[Michael]

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/

[Skandha]

@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

[Michael]

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.

[Skandha]

@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

[Michael]

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.

[Skandha]

@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

[Michael]

Not sure what you mean by the first line?

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

[Skandha]

@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