Styling blockquote with two images not working

  • 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 (https://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: https://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.

Viewing 8 replies - 1 through 8 (of 8 total)

  • 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.

    [duplicate reply deleted by author]

    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:
    https://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>

    Thread Starter bekanator

    (@bekanator)

    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.

    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:
    https://jigsaw.w3.org/css-validator/

    Also fix your HTML errors (you can find those in the header.php and other template files).
    https://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 {...

    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(https://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(https://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;}

    Thread Starter bekanator

    (@bekanator)

    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!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling blockquote with two images not working’ is closed to new replies.