WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Attempting to Refine CSS Styling of blockquote... (7 posts)

  1. Garrett Cobarr
    Member
    Posted 3 years ago #

    I originally post this in "How-To and Troubleshooting" but realized that it is really a theme and CSS question and moved it here.

    I have limited knowledge of CSS but I am eager to learn more. I have managed to get a lot done on my site but on some occasions I really hit the wall, this is one of them. I seem to be most lacking in structural knowledge but get some of the local stuff.

    I have been trying to refine the design of how my block quotes appear in my site. Here is how it looks now... Block Quote visual sample.

    There are 3 things I am trying to add:
    1. I would like the body text above and below to flow past the quote, in this case to the left.
    2. I have and end quote graphic to put at end but do not understand how to get it on the other side, to the right of quote.
    3. I would like the block quote text to wrap around the quote graphics, instead of simple being at each side, if possible.

    I have the code snippet that styles the blockquote in Pastebin

    Blockquote code snippet used for example

    esmi stated in the former post, "We need to see example blockquotes on your site. CSS and code out of context isn't of much use." But did not get back to me on clarification of what more was needed to answer question. If more is needed, please let me know.

    Much thanks for any help.

  2. Root
    Member
    Posted 3 years ago #

    Apropos flowing text:
    a blockquote like a p is a block level element
    unless it is floated it occupies the full width of the container

  3. Connor Crosby
    Member
    Posted 3 years ago #

    1. style the blockquote like this:
    blockquote { float: right; }

    2. In order to do this you would need to wrap the <blockquote> in a div or something and make the background image of that div the right of the quote and have it at the bottom right. So something like this:
    .blockquote-wrap { background: url(images/quote-right.png) no-repeat bottom right; }

    3. I cannot think of a way to do this.

  4. Root
    Member
    Posted 3 years ago #

    no u wouldnt
    a wp blockquote has a paragraph in it
    float that

  5. Garrett Cobarr
    Member
    Posted 3 years ago #

    Thanks! Great stuff I will go give this a try. I do know about float so i will give that a try and come back.

  6. Root
    Member
    Posted 3 years ago #

    blockquote p {width: 70%; float: right}

  7. esmi
    Forum Moderator
    Posted 3 years ago #

Topic Closed

This topic has been closed to new replies.

About this Topic