Bueno – Changing colors
-
I checked the forums and spent about an hour going through the css file, but I can’t figure this out.
How do I change the color (including hover color) on the page navigation?
Similarly, how do I change the color on the widget links and border lines?
Last, how do I change the color of the circle that the date is in on the posts?Thank you for reading this post and taking any time to help me.
Elliott
The blog I need help with is: (visible only to logged in users)
-
First is the non-hover color, second is the hover color.
#pagenav a { color: #000000; } #pagenav a:hover { color: #CC0000; } -
Thanks thesacredpath. I read your responses in other posts and I was hoping I would get a response from you!
I noticed the codes above change the font color for the pagenavigation font. I am trying to figure out how to change the color (and hover color) of the line below the page navigation menu. Sorry for being unclear in my original post.
-
Duh Oh! You were clear, I just didn’t read close enough.
#pagenav a { border-bottom: 4px solid #FBDDDF; } #pagenav li.current_page_item a, #pagenav li.current-menu-item a, #pagenav li a:hover { border-color: #F3686D; }And for the widgets.
.widget h3 { border-bottom: 1px solid #F3686D; } widget ul li a:link, .widget ul li a:visited { border-bottom: 1px solid #FBDDDF; }Lastly, the date circle is an image, so you will have to create a new one. Create it as a PNG with a transparent background. You will need to then upload the image to the media library, get the URL of that image and then put it into the following between the quote marks. This is the existing image which is 71px x 70px (why the one extra pixel on the one dimension, I have no idea).
.post .date { background: url("URL of new date image here") no-repeat scroll left top transparent; } -
Wow, you are a jedi master! I have been working with css for about 3 months and it is so interesting. I have a lot to learn still. Do you use any extra programs that help you edit? Any recommendations?
I am still using the free css editor (haven’t upgraded yet), but the changes you helped me with have been reflected in the preview. Thank you so much for your help. Changing the last part will be a bit of a project, so I will probably do that later.
-
Ah yes, the secret sauce. It is an add-on for Firefox called Firebug which allows you to identify the different elements in a web page and the corresponding CSS (split window at the bottom of the browser). You can even try changes in real time on the CSS to make sure they are going to do what you want them to do.
https://addons.mozilla.org/en-us/firefox/addon/firebug/
I also use another one from time to time called the Web Developer. It is sort of the Swiss Army Knife of web tools, but takes more practice to get to know it. Generally Firebug does everything I need.
-
Thanks for the tip. I downloaded firebug and started using it just now. It’s great!
Btw: How did you get so good at css editing?
I didn’t study computer science or anything in uni. Now I’m thinking I should have. Building websites has become an instant passion of mine over the last year.
-
-
-
You are welcome.
I’ve been doing web stuff since the mid 90’s (back when web pages were carved in stone), but did little as far as CSS till I started working with wordpress about 4 years ago. I’ve done some tutorials and stuff, and then just started looking at the CSS questions here and trying to figure out how to do what the person wanted to do and it just sort of worked up from there. I still get stumped on the more complex stuff and marvel at what @devblog and @hallluke can do, but I watch and work to understand how they do the complex stuff and then the next time it comes up, I know how to do it.
-
-
carved in stone – lol :0
That’s cool. Sounds like I need to be patient and get more experience. So far trial and error has been my best friend. I still don’t know what I’m doing exactly but sometimes it seems to work (lucky for me).
Another quick question about firebug: when you inspect an element and some of the code in the style pane to the right has a strikethrough, what does that mean? Does it mean that the code is being overridden somehow but still exists in the css file?
-
Yes, some other declaration in another class or ID (selector), is overriding that particular declaration.
-
can you check out his preview:
http://altjteconnect.wordpress.com/?csspreview=true
there is a borderline (black 5px) that I want to move closer to the header image and title, but I can’t adjust the space between them.
Also, the page alignment gets screwy when I ‘restore down’ the window. When the window is maximized the alignment is okay. Do you know what is going on?
-
-
I see. I will have to purchase the upgrade soon and hopefully try to resolve it then. Thanks again for all your help so far, thesacredpath. Especially the firebug recommendation. I’m hoping it will make me better than I actually am, too.
-
-
- The topic ‘Bueno – Changing colors’ is closed to new replies.
WordPress.com Forums 