Grow your CSS skills. Land your dream job.

Better Pull Quotes???

  • # March 3, 2010 at 7:03 pm

    Hey guys,

    I’m following this tutorial by Chris: http://css-tricks.com/better-pull-quotes/ and I’m using WordPress for those wondering.

    I’ve copied the latest jQuery into my root. ("js/jquery.js")

    I’ve wrapped my pull quote in this <span class="pullquote">, and put this in my header:

    Code:


    This in my CSS:

    Code:
    span.pulledquote {
    display: block;
    float: right;
    padding: 0 0 0 10px;
    margin: 0 0 10px 10px;
    width: 170px;
    font-size: 1.5em;
    line-height: 1.4em;
    text-align: right;
    color: #666;
    border-left: 3px solid #ccc;
    }

    And put this this before my closing body tag:

    Code:

    I’m getting no pull quote whatsoever. What could I be doing wrong?

    Thanks in advance

    Raph

    # March 18, 2010 at 9:34 pm

    Bump!

    # March 19, 2010 at 9:31 am

    My best guess is that jQuery isn’t getting loaded properly. I’d get that hard link to the library out of there and try this:

    http://digwp.com/2009/06/including-jque … right-way/

    # March 19, 2010 at 10:36 pm
    "chriscoyier" wrote:
    My best guess is that jQuery isn’t getting loaded properly. I’d get that hard link to the library out of there and try this:

    http://digwp.com/2009/06/including-jque … right-way/

    Sorry to sound like a noob but could you check if I’m doing this right?
    I’ve got this in the header.php file, RIGHT BEFORE the <?php wp_head(); ?>:

    Code:
    < ?php wp_enqueue_script("jquery"); ?>

    Then I have this RIGHT AFTER the <?php wp_head(); ?>:

    Code:

    And it’s still not working. Am I doing anything wrong, am I using the wrong jQuery file. I went to this site http://jquery.com/ and clicked the Download (jQuery) button with Production selected (as below).

    [attachment=0]Screen shot 2010-03-20 at 02.28.30.png[/attachment]
    What could I be doing wrong? I really appreciate the help by the way.

    Thanks in advance.

    # March 20, 2010 at 7:28 am

    first replace the script that is right before your closing body tag with this…

    Code:

    you opened document.ready, but didn’t close it… but if the script is right before your closing body tag, you don’t need it.

    The first line

    Code:
    $(‘body’).append(“jQuery is working!!”);

    is simply to test if jquery is working and it’ll bit, a bit of text at the bottom of your page…

    Remove that line if the text shows up, but i think your problem was the document.ready not being closed.

    # March 20, 2010 at 12:12 pm

    Well in all your jquery, you use span.pullquote, but in your css that you put here you write span.pulledquote. They don’t match. Maybe thats your problem.

    # March 20, 2010 at 12:56 pm

    Just re-read the article, and noticed that both of the mistakes (missing, closing of the document.ready, and the CSS class pullEDquote) are both in the article code examples…

    Chris, if you get a chance, maybe you could fix them?

    # March 21, 2010 at 9:13 pm

    If I change it to span.pulledquote in the CSS I get the pull-quotes but the original text where the pull-quotes are pulled from are missing. It’s styling the quote and pulling it from the body of text to create the pull-quote. I’m so confused now, would appreciate any further help.

    Thanks!

    # March 21, 2010 at 10:46 pm

    I should really read better…. it should be pulledquote as the jquery adds that class to the cloned copy…

    is there any way you can link your page, so that we can see what is going on?

    in essence, this is what should happen on your page…

    in the head section keep this:

    Code:

    after the wp_head(), and this:

    Code:
    < ?php wp_enqueue_script("jquery"); ?>

    before wp_head…

    then before the closing body tag, this code…

    Code:

    (I removed the document.ready which wasn’t closed, and added a single quote after "pulledquote" as it was missing.)

    this should be removed altogether, as it is just an illustration as to what makes this technique work (the .each method)

    Code:


    # March 22, 2010 at 6:51 pm

    This is test article page I’m trying to get it to work on. http://bitthirsty.com/perfect-dark-revi … k-required

    I followed exactly what you’ve said and I’ve wrapped this bit of text in a span class of pullquote: “This is not a game about saving the princess or the world. Its purely about a father’s love.”

    Still no luck though, I really do appreciate the help blue642.

    # March 22, 2010 at 7:54 pm

    we’ll get through this… lol,

    needed to add another closing quote…

    Code:

    also you have an error with the supersleight javascript, but it may be caused because of this… use the new code above in place of the old code above the body tag, and we’ll go from there.

    # March 25, 2010 at 2:38 pm

    Haha thanks! Ok I’ve replaced that code with the one above before the closing body tag. Still no luck with the pull quotes though.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".