WordPress.org

Ready to get started?Download WordPress

Forums

Styling blockquote with two images not working (9 posts)

  1. Bekanator
    Member
    Posted 4 years ago #

    I've recently been working on a template for my website and I am currently having some frustrating problems with my attempts to properly style my blockquote.

    I am attempting to use this method (http://www.webdesignerwall.com/tutorials/simple-double-quotes/) of styling a blockquote with two quotation images.

    For some reason it just doesn't want to work. The "first letter" part of the CSS doesn't seem to want to show the image of the opening quotation. Here's my test page: http://test.lifesgarbage.com/?p=3

    I have also attempted using the <span> method of achieving the same look, but that didn't work at all.

    Please help, as I am about to rip my hair out over this.

  2. Joni
    Member
    Posted 4 years ago #

    In your stylesheet, under blockquote.first-letter, change background:... to background-image:... and that should do it. If that fails, put important! after it, like this:

    background: url(images/openquote.jpg) !important;

    HTH.

  3. Joni
    Member
    Posted 4 years ago #

    [duplicate reply deleted by author]

  4. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    the style seems to work only on the first letter if it is directly in the blockquote, and not in a paragraph.
    you can try this behaviour here:
    http://www.w3schools.com/CSS/tryit.asp?filename=trycss_firstletter
    by editing it to:

    <html>
    <head>
    <style type="text/css">
    blockquote:first-letter
    {
    color:#ff0000;
    font-size:xx-large;
    }
    </style>
    </head>
    
    <body>
    <blockquote>first text<p>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p></blockquote>
    </body>
    </html>
  5. Bekanator
    Member
    Posted 4 years ago #

    Hey guys,

    Thanks for replying. I tried both of the techniques you suggested, both separately and together. The !important; tag didn't work, sadly, and styling the first letter and keeping it out of the paragraph only moved the first letter outside of the paragraph. The color and font size attributes didn't work at all.

    I'm finding this strange, considering that in my raw HTML test page, the blockquote worked perfectly. Something in WordPress must be blocking the styling. I don't know.

  6. Joni
    Member
    Posted 4 years ago #

    The test sample that you provided worked on all my browsers. There are 7 other errors in your stylesheet, however; so maybe fixing those will cause this code to behave properly. Validate and view errors here:
    http://jigsaw.w3.org/css-validator/

  7. Joni
    Member
    Posted 4 years ago #

    Also fix your HTML errors (you can find those in the header.php and other template files).
    http://validator.w3.org/

    And classes (.sample) should be used when an element appears more than once on a page. Don't use IDs (#sample) if an element appears more than once on a page. Fix your template code to reflect <div class="box"> rather than <div id="class"> and that will take care of that.

    Then just edit your stylesheet to change this line from this:
    #box {...

    to this:
    .box {...

  8. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    this worked in firefox developer add-on (after taking the paragraph away from the single T at the beginning of the quote):

    blockquote {
    background-image: url(http://test.lifesgarbage.com/wp-content/themes/starkers/images/closequote.jpg);
    background-repeat: no-repeat;
    background-position: right bottom;
    padding-left: 10px;margin-left:0px;
    padding-right: 40px;
    font-style: italic;
    }
    
    blockquote p:first-child {
    background-image: url(http://test.lifesgarbage.com/wp-content/themes/starkers/images/openquote.jpg) !important;
    background-repeat: no-repeat;
    background-position: left top;
    font-style: italic;padding-top:10px;padding-left:40px;
    
    }
    blockquote p {padding-left:40px;}
  9. Bekanator
    Member
    Posted 4 years ago #

    Thanks to all of you for the help with my little problem. I really appreciate it. I'll still have to validate my coding at the end of all of my tweaking, but nevertheless, alchymyth, your coding worked out for me just fine. Thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Topic