Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Inline CSS for occasional change of blockquote background color?

  1. meagenda
    Member

    I use Garland theme with Custom Design upgrade and have made a number of minor modifications to Garland's CSS.

    Instead of the default for display of blockquotes, I have modified to

    blockquote {
background:#f5f5fb;
border:1px solid #f5f5fb;
padding:10px;
}

    which gives a light blue background to my blockquotes.

    Occasionally, within a post, I would like to be able to overide my CSS instruction for display of blockquotes and use different colors for selected blockquotes, whilst retaining the modified CSS for all posts and pages.

    Is there a way this can be achieved through inline CSS which would enable me to have, for example, the first blockquote in a post display in blue, as per the modified CSS, but code the next blockquote within the same post to display in yellow or by modifying the html for selected, blockquote content?

    (What I am not seeking to achieve is permanently alternating blockquote background color, so that post #n has blue blockquotes, post #n + 1 yellow, post #n + 2 blue etc.)

    The blog I need help with is dxrevisionwatch.wordpress.com.

  2. thesacredpath
    Staff

    Use a style rule in the opening blockquote tag as follows and then edit the color code as desired.

    <blockquote style="background: #f5f5fb;">BLOCKQUOTE TEXT HERE</blockquote>

  3. meagenda
    Member

    Thank you, tsp, for a prompt response. That works for me, but it gives no padding at all round the text at top, bottom, left or right.

    Inserting some padding, as below, gives too much top and bottom:

    <blockquote style="padding:12px;background: #f5f5fb;">BLOCKQUOTE TEXT HERE</blockquote>

    Is there a way I can include specifying padding above and below the text to the code above without using div style?

  4. meagenda
    Member

    Compared with my existing blockquotes, I appear to have the same space above and below the text as the code you have provided but with padding inserted - so that will be OK.

    So please ignore question above and thanks again for your reponse.

  5. meagenda
    Member

    On closer inspection, I have less space top and bottom on my blockquotes, so yes, I will need to find a way to specify the space between top and bottom of blockquote and text when using

    <blockquote style="padding:12px;background: #f5f5fb;">BLOCKQUOTE TEXT HERE</blockquote>

  6. meagenda
    Member

    Scratch the above! The space top and bottom is the same in Preview, but not in the RT editor. So the code I have above will be fine. Thank you, tsp. I'll mark as resolved.

  7. thesacredpath
    Staff

    You are welcome.

  8. meagenda
    Member

    I'm not quite done yet, it appears.

    This displays OK in FF12 and Chrome, but in IE8 (for which Garland is currently badly broken since implementation of "infinite scrolling" on Thursday/Friday - thank you WordPress) I am seeing a fine grey line down the right hand side of the blockquote background and then a strip of approx 10px more background color.

    Garland has a variable width posting area and I'm wondering whether this may have something to do with this.

  9. thesacredpath
    Staff

    Can you give me a link to where this is happening? I don't have IE of any flavor (I'm on Mac) but I can take a look and see if I see anything that might cause this. The first thought is a misbehaving border and padding on the blockquote. It may have to wait till someone with IE comes along.

  10. meagenda
    Member

    The first post here viewed in IE8:

    http://meagenda.wordpress.com/

    using

    <blockquote style="padding:10px;background:#ffff99;">
<p style="text-align:justify;">TEXT HERE</p>
</blockquote>

    gives an unwanted fine gray rule round the color block in IE8, Chrome and FF and an unwanted vertical gray line on the far right of the color block, in IE8 only.

    Screenshot:

    http://meagenda.files.wordpress.com/2012/07/blockquoteie81.png

    I have a vague memory of having this problem, initially, when modifying the CSS for Garland's display of blockquotes and for that I use:

    blockquote {
background:#f5f5fb;
border:1px solid #f5f5fb;
padding:10px;
}

    But I've just tried specifying a same color border, thus:

    <blockquote style="padding:10px;background:#ffff99;border:1px solid #ffff99;">
<p style="text-align:justify;">TEXT HERE</p>
</blockquote>

    which you can see in the first post on this other site:

    http://dxrevisionwatch.wordpress.com/

    and that displays for me without the unwanted vertical line in IE8. I don't know whether it's the best way of achieving what I want to achieve, but I'd rather avoid div style as div tags often seem to screw up formatting in WordPress.

  11. iww4n
    Member

    <p style="text-align:justify;">Tess</p>

  12. meagenda
    Member

    Sorry, iww4n, I don't understand your comment.

  13. meagenda
    Member

    When WordPress implemented "infinite scrolling" for Garland theme last Thursday/Friday, Garland users experienced multiple display issues when blogs were viewed in IE8 and IE9.

    Since WordPress fixed the issues with Garland theme I no longer see the unwanted vertical gray line down the right hand side of the colored background when viewed in IE8, which can be seen in this screenshot:

    http://meagenda.files.wordpress.com/2012/07/blockquoteie81.png

    When using:

    <blockquote style="padding:10px; background:#ffff99;">
<p style="text-align:justify;">TEXT HERE</p>
</blockquote>

    I still see a thin gray border round the color block.

    But 

    <blockquote style="padding:10px; background:#ffff99; border:1px solid #ffff99;">
<p style="text-align:justify;">TEXT HERE</p>
</blockquote>

    does gives me what I want to achieve in IE8 FF and Chrome. So unless there is a more economical way of achieving this, I'll be using the above.

    Thanks again for your help, thesacredpath.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags