WordPress.org

Forums

Expound
[resolved] Styling Blockquotes (6 posts)

  1. JoeMD
    Member
    Posted 1 year 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?

  2. JoeMD
    Member
    Posted 1 year ago #

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

  3. EricSalvi
    Member
    Posted 1 year 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.

  4. WPyogi
    Forum Moderator
    Posted 1 year 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.

  5. JoeMD
    Member
    Posted 1 year ago #

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

  6. WPyogi
    Forum Moderator
    Posted 1 year ago #

    Looks great :)!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.