Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

"Little" assistance with blockquote color change?

  1. thehype
    Inactive

    Hi all, I've done a couple keyword searches here but didn't come up with anything and while we're waiting for the Feedback to come back, I'm hoping someone can help:

    I'm currently experimenting/learning how to do the CSS tweaking of the Regulus theme by myself over at my "test" blog here to be later shipped over to my actual blog. Yeah, it's pretty much a disaster to the eyes, it's because I just wanted to learn what goes where..(and I'm a totally newbie with code)

    As you can see I pretty much got the gist of what I want, EXCEPT the color change of the BLOCKQUOTE. I believe the blockquote code is this:
    #content blockquote {
    margin:20px;
    padding:1px 10px 1px 70px;
    background:#eef url( images/bg_blockquote.gif ) top left no-repeat;
    Changing #eef doesn't work and neither does eliminating the url (since it takes away the Quote gif competely, which I want). Any suggestions? I posted the same query to the theme creator on his Regulus thread just to see what he thinks..

    Hope this was good question (and hope I'm not getting mods angry for some reason or other!!)

  2. timethief
    Member

    Unfortunately you posted to the support forum rather than the css forum so it's a long shot as to whether or not sunburntkamel or wank will find your post here and drmike I believe may be gone for the day. When I'm done work for the day I will contact someone for you, okay?

  3. devlog
    Member

    Looking at your CSS, #content blockquote is defined twice. The second definition has a background value of #eef. Because #eef appears below the first definition (where you're setting the background color to #000), #eff is taking precedence over #000.

    Get rid of the second definition and your first one will kick in. OR get rid of the first and edit the second one.

  4. timethief
    Member

    @devblog* Thanks for the help. It's been a very, very long day. :)
    Magic happened this thread migrated to the correct forum ... OY! I need a cup of tea.

  5. thehype
    Inactive

    Ahh, I KNEW I'd screw up posting so so sorry timethief! :( ... (though I see that this post is in CSS Customization...)

    --devlog, I hope you're still around, because I'm slightly lost. From my point of view, I only see one definition (and I hope I'm using that term correctly) and that's what I posted above. So I'm not sure where to look for the 1st or 2nd one. Some more insights pretty please?

    small edit: Is it the ORIGINAL CSS definition that's overriding mine? and that's how you're seeing 2.. (I'm just guessing here, I have no way to know how one goes about checking out all the CSS things, all I have is the one in my dashboard)

  6. timethief
    Member

    @thehype *lol* Please do not misunderstand me. You screwed up nothing at all here. You're doing just fine. I know nothing about css. I couldn't have helped in any event but devblog arrived before I sent for someone else. :)

  7. thehype
    Inactive

    timethief: Oh it's all good, I'm just glad someone like you takes the time reply (makes WordPress forums AWESOME). And it makes two of us not knowing much about CSS hehe (learning as I go!)

  8. devblog
    Member

    I just got home but I still need to take care of some stuff. Gimme like 1 hour and I'll be happy to assist you with your CSS.

  9. thehype
    Inactive

    Sweet! Thank you so much for taking the time :)

  10. devblog
    Member

    thehype,

    Looking directly at the source code of your page, there are only 2 linked style sheets and one embedded making a total of 3 style sheets. The 2 linked style sheets are: (for simplicity, I'm not writing the whole path)

    css=css&rev=73
    switch.css

    rev=73 is yours, and this is the one that should take precedence. However, with one of the tools I use, I can see that the server is sending another linked style sheet, making a total of 4 style sheets the browser is reading. The style sheet file is: .../pub/regulus/style.css

    This style sheet is being put below yours, therefore overriding your CSS (css=css&rev=73). That's why you can't see your changes to blockquote, AND that's why it confused you when I first said you had two definitions (my bad, I was at work and just glanced at the code). You indeed have only one #content blockquote definition.

    This, I think, should be looked at by staff. This same 'bug' might be the one affecting the custom header problem.

    So, my suggestion to you is DELETE YOUR BLOG! No, I'm just kidding (the clown in me just came out).

    For real, my suggestion to you is to add the !important rule to your definition, so it will look like this:

    #content blockquote {
    background: #000 url ('images/bg_blockquote.gif') top left no-repeat !important;
    margin:20px;
    padding:1px 10px 1px 70px;
    }

    What !important will do is to tell the browser "pay attention to me, this is what I'm telling you to display", thus, the browser will ignore the other one.

    By the way, this same suggestion goes to the members who are having problems with their headers. Try adding this rule to your header definition and see what happens.

    I hope this helps :D

  11. thehype
    Inactive

    Haha, you're funny devblog (along with being smart and helpful!). That's some neat stuff, and it's great that you explain it step by step, appreciate it!

    The suggestion however, didn't work out for me. I put in the !important but it's still showing the defaut color. I think it's like you said, the "bug". I guess I'll just have to wait to ask WordPress.com's Support Staff huh? Time for bedtime and try again tomorrow..Thanks anyways!

  12. devblog
    Member

    No problem. *sigh* Of course it didn't work, my bad again... (I guess I'm too tired...) you won't see any change because you're using the same image URL in your definition - like the default CSS does (I forgot to remove it from my example), take it out and write your definition like this:

    #content blockquote {
    background:#000 !important;
    margin:20px;
    padding:1px 10px 1px 70px;
    }

    It's gotta work this time!

    Now if you have a background image, replace the 'default' path with your image's. But if it's just the bacground color you want, just change it to look like the example above.

    If the above doesn't work for you, then it's CSS 101 for me...

  13. sunburntkamel
    Inactive

    adding
    background-color: #000 !important;
    and removing the color value from background:
    gets it done for me.

    do note that the blockquote image has some color of it's own:
    http://hypun.wordpress.com/wp-content/themes/pub/regulus/images/bg_blockquote.gif
    so if you want quotes, you'll have to make a new image as well.

  14. sunburntkamel
    Inactive

    devblog posted while i was writing.

    we're kinda saying the same thing, you have to define the color and the image in two seperate statements when you have this many competing definitions.

  15. devblog
    Member

    Cool.

    Personally, I no longer use background-color, hence, the way I wrote the example, but yeah, background-color does the job too.

  16. thehype
    Inactive

    Okay, yeah, I know what you guys mean. Even without !important when I tried arranging the terms differently I was able to get a completely different blockquote color (by completely removing the .gif image)

    HOWEVA!
    That's my lil' problem: I still want that image (if not the Regulus one, then another one I guess..) Using your example, and trying with this:

    #content blockquote {
    background:#ccc url ('http://hypun.wordpress.com/files/2007/01/quote.png') top left no-repeat !important;
    margin:20px;
    padding:1px 10px 1px 70px;
    }

    (i'm going with #ccc just to see if it was because #000 was too dark..)

    So yeah, still not working :( haha sorry guys, guess this one is a good challenge for ya (that or I guess I need to contact Support Staff..)

  17. sunburntkamel
    Inactive

    support staff don't handle CSS (as it's too broad, and there are plenty of resources for it), we'll get you through this, eventually ;)

  18. sunburntkamel
    Inactive

    #content blockquote {
    background: url('http://hypun.wordpress.com/files/2007/01/quote.png') top left no-repeat !important;
    background-color: #ccc !important;
    margin:20px;
    padding:1px 10px 1px 70px;
    }

  19. thehype
    Inactive

    @sunburntka: YES!!!! plus another exclamation point to boot! :)

    I'm so glad it finally worked, but having someone(s) here to let me know how things work is equally satisfying. Thank you so much sunburntka and devblog.

    I should start hanging out in this forum more often to pick up tricks and info. No doubt I'll be able to use this for other definitions down the line!

    Resolved!

  20. sunburntkamel
    Inactive

    heh, it's actually sunburntkamel, but the forums are sloppy. if i could, i'd shorten it to SBK.

    i'm happy to help, and another helping hand in the CSS forums is always welcome.

  21. devblog
    Member

    FWIW, the way you had it would've worked too, but it didn't because you had a space between url and the opening parenthesis:

    url ( ...

    When it should have been:

    url(...

    Because of that space your background image was not being displayed.

    Glad it finally worked for you.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags