Styling Blockquotes

  • Resolved JoeMD

    (@joemd)


    10 years, 4 months ago

    I’ve been trying to get the blockquotes to intergrate better with the style of my site but have come across some problems. No matter what I do the blockquote background will NOT change. Similarly, I can’t seem to get rid of the quotation mark image. Here is the code I have in my CSS at the moment; 

    blockquote {
font-style: italic;

width: 650px;
margin: 0.25em 0;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
border-left:5px solid #0030ff;
background:#b2bce8;
}

    Any suggestions on how to get around this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter JoeMD

    (@joemd)

    10 years, 4 months ago

    See here for an example of the blockquote as it is – http://soniccollectors.com/new-sonic-magazine-from-egmont-hits-uk-stores/

    EricSalvi

    (@ericsalvi)

    10 years, 4 months ago

    Hey JoeMD,

    First off it should be really easy to fix the background color issue. Try adding an !important tag after your background css tag.

    As of removing the quotation marks, you may want to try a display:none for that.

    WPyogi

    (@wpyogi)

    10 years, 4 months ago

    Try using more specific CSS –

    .site-content .entry-content blockquote:before,
.site-content .comment-content blockquote:before,
#tinymce blockquote:before,
.site-content .entry-content blockquote,
.site-content .comment-content blockquote {
    background-color: #b2bce8;
    content: "";
    border-left:5px solid #0030ff
}

    To get rid of the quotemarks, you need to include the “content” line above.

    Thread Starter JoeMD

    (@joemd)

    10 years, 4 months ago

    Thanks guys. With your help and a bit of styling I got it exactly as I wanted it. Cheers! ^_^

    WPyogi

    (@wpyogi)

    10 years, 4 months ago

    Looks great :)!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling Blockquotes’ is closed to new replies.