“Little” assistance with blockquote color change?
-
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!!)
-
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?
-
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.
-
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)
-
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!)
-
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.
-
-
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.cssrev=73is 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.cssThis style sheet is being put below yours, therefore overriding your CSS (
css=css&rev=73). That’s why you can’t see your changes toblockquote, 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
-
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!
-
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…
-
adding
background-color: #000 !important;
and removing the color value frombackground:
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. -
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.
-
Cool.
Personally, I no longer use background-color, hence, the way I wrote the example, but yeah, background-color does the job too.
-
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..)
-
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 ;)
-
#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;
} -
@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!
-
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.
- The topic ‘“Little” assistance with blockquote color change?’ is closed to new replies.
WordPress.com Forums 
