Home Forums Weaver Xtreme Theme Styling Blockquote

Viewing 16 posts - 1 through 16 (of 23 total)
  • Author
    Posts
  • #17455
    SurvivalWoman
    Participant

    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.

    #20464
    scrambler
    Moderator

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

    #20465
    Weaver
    Keymaster

    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;
    }

    #20466
    scrambler
    Moderator

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

    #20467
    SurvivalWoman
    Participant

    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.  
    #20468
    GR8FL
    Participant

    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/
    #20469
    scrambler
    Moderator

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

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

    #20470
    GR8FL
    Participant

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

    #20471
    scrambler
    Moderator

    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;}

    #20472
    GR8FL
    Participant

    perfect!

    thank you. 
    #49249
    WP neophyte
    Participant

    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!!!

    #49254
    Weaver
    Keymaster

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

    #49262
    scrambler
    Moderator

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

    #49276
    WP neophyte
    Participant

    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!

    #49277
    scrambler
    Moderator

    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

    #49278
    WP neophyte
    Participant

    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!

Viewing 16 posts - 1 through 16 (of 23 total)
  • You must be logged in to reply to this topic.