Styling Blockquote

[SurvivalWoman]

In just a few hours, I was able to migrate to Weaver Xtreme in my Sandbox site.  I must be blind but where are the setting to style the blockquote?  I want blockquotes to have no background shading whatsoever.

[scrambler]

I am not sure what you mean, a link to the site with specifics about what you mean would help 🙂

[Weaver]

You can style blockquote with custom CSS. The default is:

blockquote {
    background:         rgba(128, 128, 128, 0.1);
    border-width:       0;
    border-left:        4px solid rgba(128, 128, 128, 0.4);
    margin:             1.5em;
    overflow:           auto;
    padding:            0 1.5em 1em 1.2em;
}

blockquote cite {
    font-style:         normal;
    font-weight:        bold;
}

blockquote p {
    font-style:         italic;
    font-size:          1em;
}

cite, em, i {
    font-style:         italic;

}

cite {                  /* cite is supposed to be used only in a quote or blockquote */
    border-width:       0;
    display:            block;
    margin-left:        3em;
    margin-top:         .5em;
}

[scrambler]

CUstom CSS goes into Main Options > Fonts & Custom > Custom CSS Rule box

[SurvivalWoman]

Okay, custom CSS is required.  Thank you so much for posting the defaults.  Using that, I was able to set up my block quotes and eliminate the background.

Next time I will include a link.  

[GR8FL]

I am trying to do a blockquote that I had styled in Weaver Pro. For some reason, it is not coming out well in Xtreme (has a background color and doesn’t pick up any of the styling) and the same goes with the one listed above.

Here is my CSS

blockquote {font-family: Georgia, serif; font-size: 18px; font-style: italic; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838;}

blockquote:before {display: block; content: ““”; font-size: 80px; position: absolute; left: -10px; top: -10px; color: #7a7a7a;}

blockquote cite {color: #999999; font-size: 14px; display: block; margin-top: 5px;float:right;}

blockquote cite:before {content: “— “;}

You can see it in action here: http://hattiesgarden.com/putting-food/

[scrambler]

As far as I can see your styling is being applied.

You may want to clear your cache and eventually be more specific

[GR8FL]

It works on the Weaver Pro website I gave you. It doesn’t work on the Xtreme one. See http://xtreme.littledropup.com/

[scrambler]

Your rules are working just fine, you just need to add what you want to change from weaver’s (see his post above) which are the left border, the background color and the overflow auto
blockquote {font-family: Georgia, serif; font-size: 18px; font-style: italic; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838;bacground-color:transparent;overflow:visible;border:none;}

edit: correct syntax

blockquote {font-family: Georgia, serif; font-size: 18px; font-style: italic; margin: 0.25em 0; padding: 0.25em 40px; line-height: 1.45; position: relative; color: #383838;background-color:transparent;overflow:visible;border:none;}

[GR8FL]

perfect!

thank you. 

[WP neophyte]

Not clear if I can piggyback on this thread, but I’ve been unable to find any settings for blockquotes.

I’ve never used blockquotes before, but when I’ve seen them on other sites, they’re more visually appealing.  I put one on the bottom of this page: http://staging.performanceallies.com/your-compelling-intro/

It’s on a very bland grey background, the text isn’t even centered.  I’ve searched everywhere in “Appearance,” but can find nothing that seems to address blockquotes at all.  I’ve seen some comments about CSS, but I don’t want to open a can of worms tweaking something I know nothing about.  Is that the ONLY way to change blockquotes?

This is one of perhaps 3 modestly significant issues left on my site, which could be switched live at any time.  Thanks!!!

[Weaver]

@WP neophyte – Your question has been answered already in this thread.

My previous reply gave the default styling Weaver Xtreme uses to style blockquotes. You can tweak that CSS directly by adding override rules to Weaver Xtreme’s global CSS rules as mentioned previously.

Custom CSS is the only way to get custom styling for blockquote – there are no settings for that.

[scrambler]

If you are not understanding the solution provided  in that thread, be specific about what part you do not understand, Modifying the Custom CSS or where to put it..

[WP neophyte]

I apologize for being dense!  Someone else today convinced me that CSS isn’t dangerous for a dummy like me, as long as I know what code to copy-&-paste, where, & what to modify.

So starting with where, I saw “Weaver” refer to Global CSS Rules.  I hunted & found this:
Appearance > Customize > Custom CSS > Global Custom CSS
but I also saw a choice for Additional CSS – WP Setting.  The info there (& the links I followed) made me think that 2nd choice is definitely not where I want to go.

“scrambler” seemed to recommend a different place to put the code:
Appearance > Weaver Xtreme Admin > Main Options > Custom CSS Rules
Perhaps BOTH locations accomplish the same thing, but I want to be sure I do this right.

I suspect it’s easier to add some short chunk of CSS code that overrides the default.

I know where to find hex color codes, but not “rgba” “Weaver” posted as the default CSS. I’m guessing the 0.1 and the 0.4 are gradients of darkness or saturation? I see some tags for border, margin, padding…

The example that GR8FL posted from her Weaver Pro website is HTML that I can generally more easily comprehend. I see where she has huge open-quote marks I’m used to seeing for blockquotes, instead of the left border.  (I suspect she did this with {display: block; content “””; font-size: 80px; position: absolute; left: -10px; top: -10px; color: #7a7a7a;}. The #383838 color appears to be her text color choice.)

Her website seems to use a transparent background, but none of the hex color codes in her post seem to correspond. Then I saw “scrambler’s” response, with the highlighted: { … bacground-color: transparent; overflow: visible; border: none;}. …I’m guessing “background” misspelled by mistake, but I see this bit of code says specifically no border.

I’m really trying to understand what I need, but again, maybe I just need a reference to color codes (for the background), what will make the text vertically centered, etc. With the chunk of code & some guidance on what to vary, I can experiment until it looks good.

I imagine it can be frustrating to explain this stuff to someone with so little understanding of the code, etc, but I really appreciate the guidance I’ve gotten so far.  My site is looking better & better, & I expect the Weaver version of my site to go live sometime tonight.  Thank you so much!

[scrambler]

The proper place is either

Appearance > Customize > Custom CSS > Global Custom CSS

if using the customizer, or the one below if using the legacy admin

Appearance > Weaver Xtreme Admin > Main Options > Custom CSS Rules

They are both the same location, just accessed from different user interface.

If you are just trying to change the background, the rule to put in there will be

blockquote {background:red;}

replacing red by the color name, or hex code or rgb(a) of your choice. You can find out the hex code of any color easily by using any of the color picker available in any of the color option

[WP neophyte]

Thank you, scrambler.  I pasted that code, & sure enough, the blockquote background turned bright red.  I tried replacing “red” with different hex color codes, even “white,” & finally removed the CSS code I added, saved the CSS every time, but no matter how long I wait & refresh the browser, I’m still seeing the bright red.  I just looked on my phone, refreshed the page, & it’s bright red there, too.

What did a break?

Also, how do I make the quoted text vertically centered in the blockquote?

Thank you!

[Author]

Posts