Home Forums Weaver Xtreme Theme Blockquote center box

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #64394
    plumcreek
    Participant

    I give. How can I center the quote boxes throughout the site? http://www.beyoutifulandblessedlife.com/makeup/

    I added this to the Global CSS to change the color and that worked well: blockquote {width:90%; background-color:#FCE8E8;}

    Tried adding various things to that line and some work and some not so much and I’m stuck.

    Thanks!

    Beth

    #64396
    scrambler
    Moderator

    I cannot access your page (invalid link)

    That said to center the block, add the margin property below

    blockquote {margin:0 auto;}

    the blockquote are already set to 90% width, you can use a different width value, or better you can use a max-width to make sure it does not get too small on phone

    blockquote {margin:0 auto; max-width:500px;}

    #64397
    plumcreek
    Participant

    Sorry, DNS issues. I want the box to center, the text is centering fine.

    #64398
    scrambler
    Moderator

    Still not loading the page, but the CSS I gave you should do the trick

    #64399
    plumcreek
    Participant

    Yeah, GoDaddy is struggling today, it’s back up now.

    And nope, that margin stuff didn’t center the pink box.

    http://www.beyoutifulandblessedlife.com/makeup

    This is what I have in Global Custom CSS

    blockquote {width:90%; background-color:#FCE8E8;margin:0 auto;}

    Thanks for the neat trick about sizing it though, that will come in handy.

    Thanks!

    #64400
    plumcreek
    Participant

    And I just made it 100% so it looks centered but we do want to do it at 90%. Customer is showing it off today, of course.

     

    #64402
    scrambler
    Moderator

    I don’t see a blockquote in the page you link to.

    Once you reduce the width gain with the centering margin, provide a link to the page that has the blockquote and specify where to look so I can see what is going on.

    #64406
    plumcreek
    Participant

    Ok, got the DNS straightened out and here are the real tests with a nice twist I found between the Global CSS and the per page version. Yes, I realize I can override it on the per page but that’s non-workable as the site grows. Or it’s just really bothering me more now to find out what the answer is. Different site, same versions of Weaver Xtreme Plus, etc.

    http://theriverlist.com/test/ – Here I used Global CSS and the box stays left justified

    http://theriverlist.com/test2/ – Here I overrode it on the page itself in the Xtreme Plus tab and it works.

    Here’s the code used in each:
    blockquote {width:50%; background-color:#FCE8E8; margin:0 auto;}

    Thanks again!

    #64407
    scrambler
    Moderator

    You need to add !important to the margin property as there is another WordPress rule overriding it

    blockquote {width:50%; background-color:#FCE8E8; margin:0 auto !important;}

    The per page worked because a per page rules adds the page selector to the blockquote selector, and that makes the whole selector stronger than the WP selector.

    This is why inspecting the page with the browser developer tools help, it allows you to see what is overriding and how.

     

    #64421
    plumcreek
    Participant

    I was looking at the developer tools but you have to really know what you are looking at to get what needs to be changed and I’m an old programmer with VERY limited CSS skills. Thanks so much, this worked.

    #64422
    scrambler
    Moderator
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.