WordPress.org

1. Garrett Cobarr
   Member
   Posted 1 year ago #

   I have been attempting to further refine the CSS styling of my blockquote. Unfortunately, my limited knowledge of CSS coding is falling short of the goal.

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

   Example of current blockquote styling...

   Code used for example at Pastebin

   Thanks so much for any guidance.

2. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   We need to see example blockquotes on your site. CSS and code out of context isn't of much use.

3. Garrett Cobarr
   Member
   Posted 1 year ago #

   esmi. I apologize. This shows my limited knowledge of CSS. I have a link to how it currently looks and the code that directly creates and effects the style.

   There i a lot of files and CSS that make up this theme. The primary CSS is the style.css and the one that most of my styling is in, custom.css.

   What do you need to see?

4. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   My bad - I missed that link!
   Item 1 is do-able. Edit custom.css and change:

   .entry blockquote {
       background: url("images/blockquote_left.png") no-repeat 42% 4%;
       padding: 0 0 0 260px;
   }

   to:

   entry blockquote {
       background: url("images/blockquote_left.png") no-repeat 3% 4%;
       float: right;
       width: 50%;
   }

   Item 2: If you're only going to have a single paragraph in each blockquote, you could attach the second graphic to .blockquote p.

   Item 3: If you changed the 3% 4% on the left background image to 0 4%, you might be able to apply a text-indent of around 3% to .blockquote p to achieve a wrap effect on the top image. The bottom image, however, could be problematic unless you intend to manually markup each blockquote and add an extra <div></div>.

5. Garrett Cobarr
   Member
   Posted 1 year ago #

   esmi, thanks once again. Sorry about the double post, thought I was in the wrong forum...

   I implemented the change to the code, new visual example.

   Here is the new code at Pastebin

   I have introduced a new problem though. The body text wraps nicely but maintains a distance that I do not want from the block quote. In fact, it seems to be inset all the way around the paragraph. Attempts to use margin and padding did not alter the problem. Perhaps I am not applying them in the correct place.

   The quotes will always be one paragraph. I applied the code at the end of blockquote p but you can see that it overlaps the text.

   While I was working with what Root and ccmovies was telling in me in the other thread, it occurred to me that adding divs for the blockguotes image was the way to go and I began reading about how to nest or group but I could not find an example that applied to my situation. I get the concept but not how to execute.

   Would you be able to show me an example of that?

   Again, much thanks.

6. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   The body text wraps nicely but maintains a distance that I do not want from the block quote.

   Try reducing the padding-bottom in:

   .entry blockquote {
       background: url("images/blockquote.png") no-repeat 0 12px;
       color: #444444;
       padding: 10px 20px 10px 50px;
   }

   In reality, you're always going to hit this problem when the left-hand paragraph stops at around the same point as the blockquote. If that was a much longer paragraph, you'd see it wrap under the quote.

   it occurred to me that adding divs for the blockguotes image was the way to go

   If you're happy to hand code each blockquote, then it's definitely the best way to go in terms of being able to fine tune the placement and the background images. something like:

   <blockquote><div>
   <p>...</p>
   </div></blockquote>

   would allow you to attach the right quote image to the inner div using something like:

   blockquote div{
   background: url("images/blockquote_right.png") no-repeat right bottom;
   padding:0 38px 25px 0;}

   Essentially, you now get three elements to style on - blockquote, div and p - which gives you greater flexibility.

7. Garrett Cobarr
   Member
   Posted 1 year ago #

   Would it not take 4 elements, "div, blockquote, div and p?"

   There is a unique graphic for the start and end quotes. This would self adjust as opposed to trying to indent, which only supports only the first line of the paragraph, correct?

8. esmi
   Theme Diva & Forum Moderator
   Posted 1 year ago #

   If you want to be able to style on 4 elements, you'd need to add a class to the divs - otherwise you won't be able to target each one individually.

9. Garrett Cobarr
   Member
   Posted 1 year ago #

   Hey, waiting for you...

   New example of blockquote...

   The new code...

   As you can see the blockquote text is not wrapping around the quote graphics, is this possible?

   Also, is it possible to set this up so that the body text can wrap all the way around the quote? Now it alway creates a paragraph on the top and bottom. In other words, like the way the text wraps around an image?

   Thanks for all your patience and help, esmi.

10. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    You could try removing the 40px left padding on .entry blockquote and then adding a span around the first word of the actual quote and moving that 40px right (maybe using text-indent?) - but I don't know how well that will work.

11. Ahenry1
    Member
    Posted 1 year ago #

    I am trying to change the margins and spacing of my blockquote so that the lines and background are in line with the text.

    How can I do that? See what it looks like below now:

    http://img.myph.us/OEY.png

    [dupe: http://wordpress.org/support/topic/blockquote-3?replies=1 ]

12. alchymyth
    The Sweeper
    Posted 1 year ago #

    nice image - but useless to discuss any formatting/css issue.

    link to your site, pointing to the post/page with the blockquote?

13. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    Please post a new topic.

14. Ahenry1
    Member
    Posted 1 year ago #

    Sorry. New topic posted.

    Here is an example of the blockquote in action:

    http://astleyhenry.com/2009/10/19/the-war-on-drugs-is-a-sick-joke/

    I would like the quote to be more centred with the background and lines stopping where the text stops.

Topic Closed

This topic has been closed to new replies.