Need help? Check out our Support site, then

Inline CSS for occasional change of blockquote background color?

  1. 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 {
    border:1px solid #f5f5fb;

    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

  2. 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. 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. 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. 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. 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. You are welcome.

  8. 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. 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. The first post here viewed in IE8:


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

    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.


    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 {
    border:1px solid #f5f5fb;

    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>

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

    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. <p style="text-align:justify;">Tess</p>

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

  13. 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:

    When using:

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

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


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

    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