Styling Blockquotes

  • Resolved JoeMD

    (@joemd)


    11 years 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)

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

    EricSalvi

    (@ericsalvi)

    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)

    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)

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

    Looks great :)!

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