Tweaking Blockquote Format

Community Forums Forums Design Tips and Tricks Tweaking Blockquote Format

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  pfbeat 2 years, 10 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #10145



    I’m trying to tweak the way my blog uses blockquotes.  See how it looks, here.

    You’ll notice that the quoted text a) is in a light-gray font color, b) does not have a left-side border, and c) the space/gap between my text, and the quoted text, is quite large.

    I’m trying to change it to fix these three things. Here’s an example of how I’d like it to look. You’ll notice on this site, the quoted text is the same font color as the rest of the text; that there is a left-side border, and that the space/gap between the author’s text, and the quoted text, is minimal.

    I tried playing around in my CSS editor but have not had much luck.  Any tips would be appreciated.





    Thanks for the link.

    I was able to accomplish one of my three goals: changing the color of the font of the blockquoted text.

    Your link provides some code on how to left-side border, but when I inserted it into my CSS, it put a border around the entire blockquote.

    Also, any suggestions for narrowing the “white space” before & after the blockquote would be awesome. Here is how my coding currently looks:


    blockquote {
    background: none;
    border: none;
    margin: 5px 5px 5px;
    padding: 5px 30px 5px 50px;


    blockquote p {
    color: #00000;
    font-style: none;

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.