Need help? Check out our Support site, then

Making pull quotes using CSS

  1. Hi everyone,
    I'm using theme Gridspace, custom design. I would like to be able to put some pull quotes in my posts, as well as styling blockquotes.
    Does anyone now how to do that? Does it work with only custom design/css?


    The blog I need help with is

  2. I see you have the Custom Design upgrade on, so the easiest way would be to create the rule in CSS and then all you would have to do is add the class designation to the blockquote. It can be done without CSS, but it requires you to write all the CSS inline in the post or page, each time you use it. I see you have some basic blockquote styling already, so add the following CSS to your custom CSS. I've provided a right pull quote, but you can use it as a guide and create a left as well and change the "float" to left. You can modify the width also, and you should also narrow and widen your browser window down to smartphone size to see how it will look on small devices.

    .pull-right {
        width: 33%;
        float: right;

    In your post or page, you would then put in the blockquote as you normally would and then switch to the Text tab and add the class declaration to the opening blockquote tab like below.

    <blockquote class="pull-right">Your quote text here.</blockquote>

  3. Thank you very much for your reply, and sorry to bother you again...
    I've tried the things you said, but unfortunately, it still shows as a regular blockquote instead of a pull quote. Do you mind taking another look at my CSS? Can it have anything to do with my (gridspace) theme?

  4. Hi, can you point me at a page with a blockquote on it that you want to do as a pull quote? I don't see the "pull-right" rule in your custom CSS either. I see a "blockquote" rule only.

  5. This is an example of the way I'd like to use pull quote: (there are 2 pull quotes on the right)

    That's weird: I've used this css (below), but somehow it dissappears ones i've saved...

    blockquote {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #000000;
    font-style: italic;
    margin: 30px;
    padding: 30px;
    text-align: left;
    float: right;

    .pull-right {
    width: 33%;
    float: right;

    What do I do wrong?

  6. I've fixed it! Thanks for all your help!
    What do you think? ;-)

  7. Glad you got it going, and it looks great. Nice job and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic