Support » Themes and Templates » Styling Blockquote Using CSS

  • Resolved _alexsmith1

    (@_alexsmith1)


    I am having a lot of difficulty styling the blockquotes in my theme. I know people are going to say, “Go to theme’s support,” but I already tried that.

    I just want a simple giant quotation mark-led, indented blockquote. No borders, no background.

    Here’s an example from a CSS tutorial site of what I want. The problem is, when I use this custom CSS, the blockquotes will not indent from the left side of posts. Also, the background and border styling is still prevalent.

    How can I achieve the example given on my site?

    Here’s an example of a post with blockquotes on my site.

    Here’s the CSS code given by that CSS tutorial site that I linked above that is not giving me the desired results:

    blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    }
    
    blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a;
    }
    
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 5px;
    }
    
    blockquote cite:before {
    content: "\2014 \2009";
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • CrouchingBruin

    (@crouchingbruin)

    How did you add the above CSS? I don’t see it anywhere.

    You’ll need to add the .post-entry class selector to the beginning of your rules in order to get it to override the existing rules for blockquote. For example:

    .post-entry blockquote {
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    width: 500px;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    }

    If you use a web debugging tool like Firebug or Chrome Developer Tools, you’ll be able to see what the existing rules are.

    Thread Starter _alexsmith1

    (@_alexsmith1)

    I removed the code from the site until I got it right, that’s why you don’t see it applied.

    CrouchingBruin

    (@crouchingbruin)

    Try using this CSS:

    .post-entry blockquote {
    border-left: none;
    background: transparent;
    font-family: Georgia, serif;
    font-size: 26px;
    font-style: italic;
    margin: 0.25em 10px;
    margin-right: 0px;
    padding: 0.25em 40px;
    position: relative;
    color: #383838;
    }
    
    .post-entry blockquote:before {
    display: block;
    content: "\201C";
    font-size: 80px;
    position: relative;
    left: -50px;
    top: 48px;
    color: #7a7a7a;
    }
    
    .single-post .post-entry blockquote p {
        font-size: inherit;
    }

    The first rule is a general one for the blockquote. The first two properties clears the left border and sets the background to transparent. You would adjust the font attributes in this rule.

    The second rule is just for the big quote mark. You set the font-size property depending upon how big you want the quote mark, and adjust the left and top properties to move the quote mark sideways or up & down.

    The last rule just sets the paragraphs within the blockquote to use the same font size as was defined in the containing element.

    Thread Starter _alexsmith1

    (@_alexsmith1)

    Closed.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling Blockquote Using CSS’ is closed to new replies.