Need help? Check out our Support site, then


How to add CSS for pull quote

  1. sarahwbartlett
    Member

    I have read several threads about this topic: but when I try to put the CSS code on my CSS editor, nothing happens. Clearly I am missing something and would very much appreciate someone walking me through this. All of which is assuming that a pull quote will indeed look different from a blockquote, which is my goal.

    Many thanks in advance.

    The blog I need help with is sarahwbartlett.com.

  2. Hi Sarah,

    I'd love to help but I'm not quite sure what you're trying to do here. Can you show me where on your site do you want this tweak to work, and how?

    Also, what was the CSS code you tried to add into the Custom CSS box?

  3. sarahwbartlett
    Member

    Sorry, I guess this sounds pretty vague!

    I got CSS code from an earlier forum thread for creating a pullquote aligned right. I put it on my CSS revisions board - but clearly did not know what I was doing as it is not there and didn't do anything when I tried to create the quote.

    One example of where I would have liked to use a pullquote is my 2/11/14 post, "Re-Set"; I would have liked to pull this line out to the side for emphasis: 'True presence is unmitigated by expectation or judgment. It is a pure opening to the moment.'

    If there is a way to put a line around it or change color or in some additional way to highlight it, that would be fun to know as well.

    By now I've read everything I can find - I definitely did not input the code correctly onto the revisions page. But now I'm not even sure what kind of code it is I'm looking for!!

    Thanks for any way you can help me through this :-)

  4. Thanks for the explanation. So if I understand correctly, you want to create your own pullquote style, which should look different with the theme's default blockquote styling.

    I think the easiest way to do this is by creating your own CSS class. Are you comfortable with editing HTML? You will first need to:

    1. Create a standard blockquote with that text
    2. Edit that blockquote in code view to add a custom class, let's call it "pull-quote", so it now looks like this:
      <blockquote class="pull-quote">True presence is unmitigated by expectation or judgment. It is a pure opening to the moment.</blockquote>

    Are you able to do this? If yes, let me know once you're done and then we can work on the custom styling.

  5. I checked http://sarahwbartlett.com/2014/02/11/re-set/ and I don't see the extra HTML code added yet.

    If there is a way to put a line around it or change color or in some additional way to highlight it, that would be fun to know as well.

    You could do this too, but like hfzrhmn's example above, it would also require some additional HTML. However, I can make up an illustration based on the other content on that page. I see that some of the text has "em" tags around it in the HTML (italics in the visual editor), and you can get a highligher effect for those quotes with a CSS rule like this:

    .entry-content em {
    padding: 0.3em;
    background-color: lightyellow;
    }

    You should be able to see it in a live preview without having to save the CSS first. Just go to Appearance > Customize > CSS, add the example to the editor, and browse to the post in the live preview on the left.

  6. sarahwbartlett
    Member

    Sorry I dropped the ball for a few days.

    Do I enter the HTML code in the overall CSS editor or on the page where I'm trying to make the pullquote???

    Sorry, but this is NOT my area of expertise or comfort. Though I'd like to understand and take control for future use . . . several times in the past couple of weeks I've wanted to to a pullquote for this blog and for writinginside.com.

    But I need to understand it first; then try it on an old post.

    Thanks for hanging in with me . . .

  7. Sorry I dropped the ball for a few days.

    No problem at all. We answer questions all day long every day, so yours just falls into line. :) Also, forums are great for asynchronous conversations (and it's helpful to meditate on CSS questions sometimes because some are easier than others!).

    Do I enter the HTML code in the overall CSS editor or on the page where I'm trying to make the pullquote???

    Good question. The HTML should be entered into the post, and the CSS should be entered into the Appearance > Customize > CSS editor.

    Here is some information about editing HTML in a post: http://en.support.wordpress.com/editors/#text-editor

    But I need to understand it first; then try it on an old post.

    Sounds like a good idea to me. :) We'll be here whenever you're ready!

Topic Closed

This topic has been closed to new replies.

About this Topic