[Theme Twenty Fifteen] Problem with secondary blockquote class

  • Resolved wpneuby

    (@wpneuby)


    7 years, 9 months ago

    Hi. I’ve been testing an alternate blockquote.

    Here is the HTML:

    <blockquote class="quote-mark">Memory... is a diary that we carry about with us.</blockquote>
<span class="cite-after">Oscar Wilde</span>

    Here is the CSS:

    .quote-mark {
    background:#fff;
    border: none;
    font-family: "Noto Sans", sans-serif;
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    width: auto;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
    quotes: "\201C""\201D""\2018""\2019";
}
.quote-mark:before {
    content: open-quote;
    font-weight: bold;
    font-size:60px;
    line-height: 110%;
    color: #7a7a7a;
}
.quote-mark:after {
    content: close-quote;
    font-weight: bold;
    font-size:60px;
    line-height: 110%;
    color: #7a7a7a;
}
.cite-after {
    color: #9a9a9a;
    font-size: 15px;
    font-family: "Noto Sans", sans-serif;
    display: block;
    margin-top: 5px;
    margin-left: 70px;
}
.cite-after:before {
    content: "\2014 \2009";
}

    I created a page on my desktop and it looked how I wanted in all browsers. However, when I try this in WP it gets all wonky. Take a look here:

    http://mike.z-bang.net/2016/07/14/test-blockquote/

    The page is password protected. PW is tryme

    Any ideas how to get this to work in WordPress? Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    7 years, 9 months ago

    It looks OK to me. When I inspect it using Chrome DevTools, it looks like all of the rules are being applied. What exactly appears to be wrong?

    Don’t forget that there are other rules in the stylesheet that will have an effect on the same elements:

    blockquote:before {
    content: "\201C";
    font-size: 80px;
    color: #7a7a7a;
    float: left;
    position: relative;
    top: -30px;
    left: -20px;
}
blockquote cite {
    color: #9a9a9a !important;
    font-size: 14px !important;
    font-family: "Noto Sans", sans-serif;
    display: block;
    margin-top: 5px;
}
blockquote cite:before {
    content: "\2014 \2009";
}

    So the top and left properties in that first rule are what pulls the opening quote mark up and to the left, which is why it doesn’t line up with the text or the closing quote mark.

    Thread Starter wpneuby

    (@wpneuby)

    7 years, 9 months ago

    I figured it out. It was picking up the styles from the blockquote CSS, so I took blockquote out of the picture entirely.

    New HTML is:

    <span class="quote-mark">Memory... is a diary that we carry about with us.</span>
<span class="cite-after">Oscar Wilde</span>

    Modified CSS is:

    .quote-mark {
    background:#fff;
    font-family: inherit, sans-serif;
    color: #707070;
    color: rgba(51, 51, 51, 0.7);
    font-size: 18px;
    font-size: 1.8rem;
    font-style: italic;
    width: auto;
    margin: 0.25em 0;
    padding: 0.25em 40px;
    line-height: 1.45;
    position: relative;
    color: #383838;
}
.quote-mark:before {
    content: "\201C";
    font-weight: bold;
    font-size:60px;
    line-height: 110%;
    color: #7a7a7a;
}
.quote-mark:after {
    content: "\201D";
    font-weight: bold;
    font-size:60px;
    line-height: 110%;
    color: #7a7a7a;
}
.cite-after {
    color: #9a9a9a;
    font-size: 15px;
    font-family: "Noto Sans", sans-serif;
    display: block;
    margin-top: 5px;
    margin-left: 70px;
}
.cite-after:before {
    content: "\2014 \2009";
}

    Now it looks like I planned it. Have a look.

    http://mike.z-bang.net/2016/07/14/quote-test-2/

    Again, the password is: tryme

    Now, if I could figure out how to set the ending quote in a regular blockquote to show up before the citation.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘[Theme Twenty Fifteen] Problem with secondary blockquote class’ is closed to new replies.