Formatting site title and admin bar links
-
Following some link formatting over the last two days, I now have three small problems I need to sort out:
1. I have some small purple marks beneath the third character of each link in the live twitter feed on my sidebar. these weren’t here before the text styling I did yesterday.
2. As a result of the text styling, the links at the top of my website in the admin bar are now purple (#3B0466) which is making them difficult to read. I want to change these both back to #EEEEEE, I picked this up from the source info for the site, and think this is covers them:
<li id=”wp-admin-bar-blog” class=”menupop”>
A Slice of Cuplet<li id=”wp-admin-bar-my-account” class=”menupop with-avatar”>
Paula<img alt=”I’ve tried some things myself with these to see if I can alter the color of the text, but I’ve had no luck as yet. The nearest I can get makes all the links in the drop down #EEEEEE:
#wp-admin-bar-blog.menupop a {
color:#EEEEEE!important;
}I really only want the main heading links (A Slice of Cuplet and Paula) to change color, so that they are easier to read against the dark background of the admin bar. Any suggestions on how to get these to convert to #EEEEEE?
3. My site title is defaulting to the Bueno theme color and text-decoration, despite the following code I’ve put in:
.site-title a {
color:#EEEEEE!important;
text-decoration:none!important;Any ideas what i’ve missed out here to make this work?
I’m T-16 hours before I go live, so I really want to get these last few bits sorted out tonight, please please please :)
The blog I need help with is: (visible only to logged in users)
-
OK, let se what we can do.
1. The small purple marks are caused by that bit of code:
.widget ul li a:link, .widget ul li a:visited {
background: url("http://s0.wp.com/wp-content/themes/pub/bueno/styles/purple/bullet_hover.png?m=1391150862i") no-repeat scroll 10px 12px transparent !important;
}2. As for the style of your admin bar, it is most probably caused by the other styles you applied. Indeed, every time you use the !important property, the rule you create overwrites all the other ones. Consequently, it is better not to abuse of !important, and instead target the new styles you apply only to the areas of the page you want them to appear.
3. Your site title uses the properties you defined in your custom CSS. It is grey and does not have any underline, as you have indicated in your CSS. Which colour would you like the title to be?
-
thanks jeherve, I’m still very new to CSS, and HTML for that matter, so I’m still getting to grips with how to get it to do the things i want, so I’m sure my inexperience is what’s causing all my formatting problems. I’m sure my CSS could do with a lot of tidying up, I’m just not sure how to do it without undoing all the work i’ve done already. And as I’m due to go live with my website tomorrow (eek!) I think I’m going to have to make the best of what I’ve done, and what all you awesome members have helped me to achieve so far.
With that said, I’d just had a response from thesacredpath outlining the same issue with the important attribute in the above code, so have removed it and now the purple marks have gone! he also mentioned that something in my CSS was overwriting the style for the admin bar, and suggested this:
#wpadminbar * {
color:#CCCCCC!important;
}which has worked to get the titles in the admin bar back to their default color, but it has also affected in the links in the admin bar drop down boxes, which now look grayed out! Man CSS is fiddly huh?!
I did manage to sort the site title out myself after i posted the query. so that’s of the three two crossed off the list. Just got to sort the admin bar drop down box link colors now, so that they don’t look grayed out. And now i’ve managed to solve one issue myself, I don’t feel as much of a nuisance to all you guys. Although I am still pretty much a big nuisance :)
-
Okay, I see the problem on the admin bar.
Try something like this then:
#wpadminbar .ab-submenu .ab-item {
color: #333333 !important;
}
#wpadminbar .quicklinks li#wp-admin-bar-shortlink {
color: #666666 !important;
}Does that look better to you?
-
ooo, that’s getting more like it. you’re a smart little cookie aren’t you :). Right ok, so one more brain scratcher… is there a way to make the main titles for the two drop down boxes – “A Slice of Cuplet” and “Paula” – turn to color #333333 as soon as you hover over the drop down box, like they do in the CSS editor screen? I’ve tried this
#wpadminbar a:hover {
color:#333333!important;
}but it only makes the font color change when the cursor is directly over it. As soon as you move the cursor away, it goes back to #CCCCCC. In the admin bar in the CSS editor screen the title stays the darker color regardless of where the cursor is placed in the drop down box.
- The topic ‘Formatting site title and admin bar links’ is closed to new replies.
WordPress.com Forums 