Changing bg color and hoverbg color in menu
-
Hi! I really need some help with customizing my CSS.
I want to change the colors in the menu for the theme “Blissful Blog”.
It has a drop-down menu with submenus.The bg color in menu should be changed to #6C6C80 and the hovereffect at the bg in menu should be changed to #3F3F5F.
I don’t even know where in admin to change this properly.
Please, help me! Thanks! :-)This is what the menu’s CSS look like right now:
/* =Menu
———————————————–*/#navbar {
background: #fff url(‘images/nav_bg.png’) center no-repeat;
font-size: 11px;
font-family: Georgia, “Times New Roman”, Times, serif;
font-style: normal;
font-weight: normal;
line-height: 24px;
text-align: center;
margin: 20px auto;
max-width: 920px;
padding: 0 20px;
}.main-navigation ul {
background-color: #fff;
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}.main-navigation ul li {
background: #fff;
float: left;
margin: 0;
padding: 0;
position: relative;
border-left: 1px solid #ccc;
}.main-navigation ul li:first-child {
border-left: none;
}.main-navigation ul li a {
padding: 0 15px 0 15px;
color: #999;
display: block;
text-decoration: none;
}.main-navigation ul li a:hover {
color: #366;
text-decoration: none;
}.main-navigation ul .current_page_item > a,
.main-navigation ul .current-menu-item > a,
.main-navigation ul .current_page_ancestor > a,
.main-navigation ul .current-menu-ancester > a,
.main-navigation ul .current-cat a {
color: #366;
}.main-navigation ul li span {
/*–Drop down trigger styles–*/
float: left;
height: 24px;
width: 15px;
background: url(images/nav_arrow.png) no-repeat;
top: 2px;
left: -10px;
position: relative;
}.main-navigation ul li span.subhover {
/*–Hover effect for trigger–*/
cursor: pointer;
}.main-navigation ul li ul {
list-style: none;
position: absolute;
top: 24px;
left: 0;
z-index: 9;
margin: 0;
padding: 0;
display: none;
float: left;
width: 180px;
}.main-navigation ul li:hover > ul {
display: block;
}.main-navigation ul li ul li {
border: none;
margin: 0;
padding: 0;
width: 180px;
}.main-navigation ul li ul li ul {
top: 0;
left: 180px;
}.main-navigation ul li ul li a {
background: #eaf6f7;
color: #366;
display: block;
padding: 5px 15px;
text-align: left;
width: 150px;
}.main-navigation ul li ul li a:hover {
/*–Hover effect for subnav links–*/
background-color: #699;
color: #fff;
} -
Hi there, add the following custom CSS. Go to Appearance > Customize > CSS, delete all the informational text in that window and paste in the following. Since you are using fairly dark background colors, I changed the text color on the dropdown submenus to white also.
.main-navigation ul li ul li a { background: #6C6C80; color: #FFFFFF; } .main-navigation ul li ul li a:hover { background: #3F3F5F; } -
Oh, thankyou so much! :-) That helped a lot! :-) Perfect!
I also need to change the colors of my links. And the hovered links.
What code do I use then? Same two colors as in the new menu.Can I add all new CSS in the same window where I put the code you gave me? Under?
This is how the links CSS look today:
/* =Links
———————————————–*/a {
color: #669999;
text-decoration: none;
outline: none;
-webkit-transition: background .25s, color .25s;
-moz-transition: background .25s, color .25s;
-o-transition: background .25s, color .25s;
-ms-transition: background .25s, color .25s;
transition: background .25s, color .25s;
}a:focus,
a:hover,
a:active {
color: #336666;
text-decoration: underline;
outline: none;
}a img {
border: none;
}#submit,
#searchsubmit {
cursor: pointer;
-webkit-transition: background .25s, color .25s;
-moz-transition: background .25s, color .25s;
-o-transition: background .25s, color .25s;
-ms-transition: background .25s, color .25s;
transition: background .25s, color .25s;
} -
Also…a link that is active or links that are visited in the menu is still green, how do I change it to black color for example?
Thankyou so much for your help! <3
-
Prior warning: Obnoxious colors used for demo purposes. :) I would start with the following two rules and it should catch virtually all links in the site. White, isn’t going to work for any links on a white background such as the sidebar or content area. I have used your background hover color for the hover on links though. You can edit the bright red on the non-hovered links as desired.
a { color: #CC0000; } a:hover { color: #643C50; } -
Oh, nothing changed the links color now.
Any other ideas how to change them?
I pasted your new code in the same window as last time./ Ankie
-
By the way, this is the website I want to change, if that will help?
-
In your custom CSS, I see that you currently have this as the last rule:
a { color: #366; text-decoration:none; outline:none; -webkit-transition:background .25s, color .25s; -moz-transition:background .25s, color .25s; -o-transition:background .25s, color .25s; -ms-transition:background .25s, color .25s; transition:background .25s, color .25s }You really don’t need anything from that block except “color” if you’re just trying to change link colors. Also, note that the last rule in the custom CSS will override any previous rules with the same specificity. So, if you have this, the links will become red:
a { color: blue; } a { color: red; }But if you have this your links would become blue:
a { color: red; } a { color: blue; }I mention it because you currently have duplicate “a” rules in your custom CSS.
So, the link colors look good to me. They are set to the color #366, which is the last rule in your Appearance > Customize > CSS editor right now.
Menu link colors, however, are a bit of a different story. Were you trying to change menu link colors or content and sidebar link colors?
To change menu link colors and hover colors and current menu item colors and all that, it’s a bit more complicated. Here an example that completely changes the color settings for the main menu in the Blissful Blog theme, and you can adjust the color codes as needed:
.main-navigation ul { background-color: #000; } .main-navigation ul li { background: #000; border-left: 1px solid #ddd; } .main-navigation ul li a { color: #bbb; } .main-navigation ul li a:hover { color: hotpink; } .main-navigation ul .current_page_item > a, .main-navigation ul .current-menu-item > a, .main-navigation ul .current_page_ancestor > a, .main-navigation ul .current-menu-ancester > a, .main-navigation ul .current-cat a { color: #fff; } .main-navigation ul li ul li a { background: pink; color: #333; } .main-navigation ul li ul li a:hover { /*--Hover effect for subnav links--*/ background-color: hotpink; color: #000; } -
-
Could you help me take out the date for the shine on blog …. i am at my bits end trying to figure it out
-
Could you help me remove the date for the “Shine On” blog…….I am at my WITS End trying to figure it out.
-
@angietemple
You are at your wits end because you will not go to your own thread and wait your turn like everyone else does. You expect to get instant service and that’s not going to happen. Do not hijack threads that others have posted.Know that all CSS editing is theme specific editing and go back to your own own thread please https://en.forums.wordpress.com/topic/removing-date?replies=3#post-1697536
-
I was not aware I was hijacking someone eleses thread. If you have enough time to tell me I am hijacking someone’s thread why do you not have time to assist me? I am at my wits end and not because I don’t want to be patient. I was on a thread titled Customizing css and so I presumed it would be alright to post a question.
I am at a loss for how customer service works on WordPress because their is no direction as to how to do it or if you have done it correctly.
-
I am at a loss for how customer service works on WordPress because their is no direction as to how to do it or if you have done it correctly.
This is a peer support forum where Volunteers and Staff work together to provide support. I am a Volunteer and as I previously told you in another thread I do not help with CSS editing. Customer service here nworks by creating a thread which you have done and waiting patiently for Staff to answer the many threads which were posted prior to yours being posted. Staff work through all forum threads tagged for their attention and through all email support tickets in order of datestamps and timestamps – first posted first served, as would be expected.
-
You still have not answered my question whether I have entered my question correctly …. again I was not attempting to hijack or bump ahead of anyone else. Why are you the only person responding to my question and have I entered my question somewhere it will get answered?
-
This thread is correctly posted into the correct forum https://en.forums.wordpress.com/topic/removing-date?replies=3#post-1697536
Why are you the only person responding to my question and have I entered my question somewhere it will get answered?
The thread you created will be answered by Staff after they answer all the threads in the CSS Forum that predate the datestamps and timestamps on your thread.
-
It looks like your question about hiding dates in the Shine On theme was just answered at https://en.forums.wordpress.com/topic/removing-date?replies=5#post-1697945 so let’s continue the conversation over there.
- The topic ‘Changing bg color and hoverbg color in menu’ is closed to new replies.
WordPress.com Forums 