Support » Fixing WordPress » Changing look of blockquotes

  • Hi, am using a child of Clean Box, and I hate the way blockquotes display: no change in font size or family, there is only an open quotation mark, the quote is only slightly indented and aligned left.

    What I want is a larger font, a different font family (I’ll pick one later), italics, centered, and more padding. But I cannot seem to modify the CSS to achieve any of it. (When I say “modify” I mean add to my child theme’s CSS.)

    The only references I can find to blockquotes in the CSS are these:

    Under the section 1.Reset:

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    	border: 0;
    	font-family: inherit;
    	font-size: 100%;
    	font-style: inherit;
    	font-weight: inherit;
    	margin: 0;
    	outline: 0;
    	padding: 0;
    	vertical-align: baseline;
    }

    and

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    	content: "";
    }
    
    blockquote,
    q {
    	quotes: "" "";
    }

    Then in 3. Elements:

    blockquote:before {
    	content: "\201C";
    	display: block;
    	font-size: 30px;
    	height: 0;
    	left: -20px;
    	position: relative;
    	top: -10px;
    }

    The blockquote is supposed to have both opening and closing quotation marks but only the open marks appear.

    I have tried changing the font size but it only affects the quotation mark itself, not the text. I have tried adding font-style: italic; but to no avail.

    I can fake it somewhat by changing the text to a heading style and italicizing it, but the position of the quotation mark isn’t correct in relation to the text. I have modified an old post to demonstrate:

    The Backyard Tourist: Queen Elizabeth Park and the Bloedel Conservatory

    I am thinking that I have to create a new paragraph class of my own and use it instead. Any thoughts?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Changing blockquotes is pretty straightforward css function.

    The only reason it would not be changing would be due to the way stylesheets are loaded.

    Styles are always loaded top to bottom – therefore, if by some chance, you are loading your child style.css before the parent style.css then the parent will always overwrite the child.

    You need to look at https://developer.wordpress.org/reference/functions/wp_enqueue_script/ to get the styles loaded in the right order OR, you just need to apply your styles using !important to force overrriding.

    NOTE: Use the chrome element inspector to see what is happening – if the css is being overridden OR the css just isn’t loading at all.

    blockquote { font-size: 1.4em; line-height: 1.3; font-style: italic; }

    instead of editing the theme’s stylesheet, try working with a custom CSS plugin.

    Thread Starter Bad_Egg

    (@bad_egg)

    @shannon: I thought the point of using a child theme is precisely so the child CSS loads first? How else would one’s modifications work?

    The rest of the CSS is loading fine, as the rest of the site functions as designed. I haven’t made any changes to blockquotes in the child CSS.

    I think it may have something to do with the way the blockquote is styled in this theme; that is, only the blockquote quotation mark has been styled, not the text that makes up the blockquote.

    I’m not a coder, so the whole enqueue script thing is over my head.

    However, when I look again at the code,

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
    	content: "";
    }
    
    blockquote,
    q {
    	quotes: "" "";
    } 

    I understand it to mean that q, which is defined as the quotation marks, is supposed to appear both before and after the content, BUT then

    blockquote:before {
    	content: "\201C";
    	display: block;
    	font-size: 30px;
    	height: 0;
    	left: -20px;
    	position: relative;
    	top: -10px;
    }

    only styles the opening (“before’) quotation mark, which might explain why only that mark appears and changes when I change the values in that section of code (for example, if I change the font size to 90px, the change in size of the quotation mark is obvious). Yes? No?

    Perhaps the coders simply forgot to make a style for the closing quotation mark?

    @michael: I added your blockquote style to the parent CSS, in the Typography section as opposed to the Elements section where the rest of the blockquote code is, to test. This worked. Thank you.

    Now I just have to figure out how to get the after blockquote to be the same size as the opening one, to get it to display, and position it correctly. Can I not make another section of code similar to the blockquote:before but for a blockquote:after? I will try that while I await a reply.

    Thank you thus far.

    Thread Starter Bad_Egg

    (@bad_egg)

    @michael: when I try to put the code in my child CSS (so it won’t be overridden if and when the theme is updated), it doesn’t work anymore.

    I put it in the typography section of my child CSS. So I am flummoxed as to why it works in the parent CSS but not the child.

    EDIT: Never mind. I must have done something wrong because now it works.

    • This reply was modified 5 years, 9 months ago by Bad_Egg.
    Thread Starter Bad_Egg

    (@bad_egg)

    I’m almost there, but…

    I added this:

    
    blockquote:after {
    	content: "\201D";
    	display: block;
    	font-size: 60px;
    	height: 0;
    	right: -40px;
    	position: relative;
    	top: -20px;
    }

    but no amount of jiggling the values will make the quote sit automatically in relation to the text. Am I missing something or is a closing quote in a responsive design WP site not actually possible?

    HTML:

    
    <p class="myclass">your text here</p>
    

    CSS:

    p.myclass:before, p.myclass:after {
        content: '"';
    }
    

    ‘myclass’ is generic, call it what you want as long as it’s not already in your CSS (call it aksdjfhaklsdfhaslkf if needed).

    That makes the quotes the same – put at the end of your Child Theme CSS.
    You can add more to the style as shown in your example above as needed.

    Note: Child Theme CSS overrides parent theme CSS (it’s called after).

    Thread Starter Bad_Egg

    (@bad_egg)

    Hi Pioneer:

    Well, that almost worked. I created a class called “pullquote” and added the styling. I added the coding you suggested, but unfortunately what happened is that I got straight quotes instead of curly quotes.

    So I made two classes:

    p.pullquote:before {
    	content: "\201C";
    	font-size: 2em;
    	line-height: 1em; 
    	font-family: serif;	
    	}
    p.pullquote:after{
    	content: "\201D";
    	font-size: 2em;
    	line-height: 1em; 
    	font-family: serif;	
    	}

    But unfortunately the after quotation mark forces the last line of the pull quote to sit lower to accommodate the larger font of the quotation mark, even with the forced line-height of 1em. This is visually displeasing. And if I reduce the line-height to .5em, or even .25em to force the line up, this just pushes the over-sized quotation mark into the text above.

    I did some more digging about the Net, and found that some designers are actually using images to create the quotation marks for pull quotes. Some WP users are creating a closing quote that sits on the next line, flush with the opening quotation mark. It looks okay but not what I wanted to achieve. So it looks like what I wanted to do isn’t possible.

    Oh, well, them’s the breaks. 🙁

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing look of blockquotes’ is closed to new replies.