This topic contains 11 replies, has 2 voices, and was last updated by  Skandha 4 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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.

    • This topic was modified 5 months, 1 week ago by  Michael.
    • This topic was modified 5 months, 1 week ago by  Michael.
    #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

    #145516

    Michael
    Participant

    Perhaps this one please.

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

    Thank you so much.

    #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

    #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/

    • This reply was modified 5 months ago by  Michael.
    #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

    #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.

    #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

    #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.

    #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

    #146683

    Michael
    Participant

    Not sure what you mean by the first line?

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

    #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

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

You must be logged in to reply to this topic.