Important notice: we will respond to all open ticket requests up until November the 1st. After this date, we will be unable to process the ticket requests here on Ticksy.
Is it possible (and how) to adjust the font and background colors in the main menu dropdowns? (attached for reference: I'd like to change the background from dark to light)
In the Elated Options area I can only find appearance on how it shows up. (attached for reference on what I see in my menu screen)
If you know anything about CSS you can easily change the background color using this code. I'm just a user but this is what I wrote to change it on my website. This will change the Menu, Top Bar, and User Drop down to a lighter color. Note: The colors are meant for my design you can can simply just change the Hex and RGB colors to your personal choice.
/*************** Menu and Dropdown Light **************/
.eltd-drop-down .narrow .second .inner ul, .eltd-drop-down .second .inner>ul { display: inline-block; position: relative; background-color: rgba(255,255,255,0.92)!important; border: 1px solid #d6d6d6!important; border-top: none!important; box-shadow: 0px 0px 1px #d6d6d6 } .eltd-drop-down .second .inner ul li a, .eltd-drop-down .second .inner ul li h4 { display: block; color: #888888!important; font-size: 13px!important; line-height: 32px!important; } .eltd-drop-down .second .inner ul li a:hover, .eltd-drop-down .second .inner ul li h4:hover { display: block; color: #00afef!important; } .eltd-header-standard:not(.post-type-archive-listing-item) .eltd-page-header .eltd-menu-area { background-color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #d6d6d6!important; } .eltd-page-header .eltd-sticky-header .eltd-sticky-holder { background-color: rgba(255, 255, 255, 0.9); border-bottom: 1px solid #d6d6d6!important; box-shadow: 0px 0px 1px #d6d6d6; } .eltd-login-register-widget .eltd-login-dropdown { background-color: rgba(255,255,255,.9)!important; } .eltd-login-register-widget .eltd-login-dropdown li a { color: #888888!important; } .eltd-login-register-widget .eltd-login-dropdown li a:hover { color: #00afef!important; } .eltd-top-bar #lang_sel ul ul { background-color: rgba(255,255,255,.9)!important; } .eltd-top-bar #lang_sel ul ul a { color: #888888!important; } .eltd-top-bar #lang_sel ul ul a:hover { color: #00afef!important; }
I'm not sure what you mean by the lighter footer though as the text and elements should already be lighter. Anyways, hope that helped!
Thanks so much Kevin! I really appreciate the hack — I will give it a shot!!
Re: the footer — yes, the icons and search button etc are light but the background is dark grey and black (like the header drop downs). I'd love to lighten them up with custom colours!
I think I know what you mean by the footer now. I would recommend uploading a night bright image as the background for the footer which you can do at Elated Options > Footer > Footer Background Image
Than to change the bottom bar overlay color and text you can use this custom CSS code
Background color will change the bar color and color will change the font color
One last quick quick question, if I can — I'm sorry! Should I copy the code you provided into the 'custom css' box in the Elated Options (what I've screenshotted), or right into the css file (and if the latter, is there any existing code in there I need to find and replace with below)?
You can do that but the best practice to get into is to actually download the Child Theme and activate that instead of the main theme. This allows you to add custom coding to the style.css and it wont get erased when you update the theme in the future.
If you have the child theme activate simple go to Appearance > Editor From there you can just copy and paste and save.
I attached a screenshot to give you a visual of that I'm talking about
Hi there —
Is it possible (and how) to adjust the font and background colors in the main menu dropdowns? (attached for reference: I'd like to change the background from dark to light)
In the Elated Options area I can only find appearance on how it shows up. (attached for reference on what I see in my menu screen)
Thank you!!
Also, if I could also ask in the same vein...
Is it possible (and how) to adjust the colours for the footer? I'd also like to change it from dark to light.
Thanks again!
Hey Tam,
If you know anything about CSS you can easily change the background color using this code. I'm just a user but this is what I wrote to change it on my website. This will change the Menu, Top Bar, and User Drop down to a lighter color. Note: The colors are meant for my design you can can simply just change the Hex and RGB colors to your personal choice.
/*************** Menu and Dropdown Light **************/
.eltd-drop-down .narrow .second .inner ul, .eltd-drop-down .second .inner>ul {
display: inline-block;
position: relative;
background-color: rgba(255,255,255,0.92)!important;
border: 1px solid #d6d6d6!important;
border-top: none!important;
box-shadow: 0px 0px 1px #d6d6d6
}
.eltd-drop-down .second .inner ul li a, .eltd-drop-down .second .inner ul li h4 {
display: block;
color: #888888!important;
font-size: 13px!important;
line-height: 32px!important;
}
.eltd-drop-down .second .inner ul li a:hover, .eltd-drop-down .second .inner ul li h4:hover {
display: block;
color: #00afef!important;
}
.eltd-header-standard:not(.post-type-archive-listing-item) .eltd-page-header .eltd-menu-area {
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid #d6d6d6!important;
}
.eltd-page-header .eltd-sticky-header .eltd-sticky-holder {
background-color: rgba(255, 255, 255, 0.9);
border-bottom: 1px solid #d6d6d6!important;
box-shadow: 0px 0px 1px #d6d6d6;
}
.eltd-login-register-widget .eltd-login-dropdown {
background-color: rgba(255,255,255,.9)!important;
}
.eltd-login-register-widget .eltd-login-dropdown li a {
color: #888888!important;
}
.eltd-login-register-widget .eltd-login-dropdown li a:hover {
color: #00afef!important;
}
.eltd-top-bar #lang_sel ul ul {
background-color: rgba(255,255,255,.9)!important;
}
.eltd-top-bar #lang_sel ul ul a {
color: #888888!important;
}
.eltd-top-bar #lang_sel ul ul a:hover {
color: #00afef!important;
}
I'm not sure what you mean by the lighter footer though as the text and elements should already be lighter.
Anyways, hope that helped!
Thanks so much Kevin! I really appreciate the hack — I will give it a shot!!
Re: the footer — yes, the icons and search button etc are light but the background is dark grey and black (like the header drop downs). I'd love to lighten them up with custom colours!
Your welcome Tam!
I think I know what you mean by the footer now.
I would recommend uploading a night bright image as the background for the footer which you can do at Elated Options > Footer > Footer Background Image
Than to change the bottom bar overlay color and text you can use this custom CSS code
Background color will change the bar color and color will change the font color
.eltd-footer-bottom-holder {
background-color: rgba(255,255,255,.5)!important;
color: #f8f8f8!important;
}
Thanks so much, Kevin — this is so appreciated :D
One last quick quick question, if I can — I'm sorry! Should I copy the code you provided into the 'custom css' box in the Elated Options (what I've screenshotted), or right into the css file (and if the latter, is there any existing code in there I need to find and replace with below)?
Thanks again!!!
You can do that but the best practice to get into is to actually download the Child Theme and activate that instead of the main theme. This allows you to add custom coding to the style.css and it wont get erased when you update the theme in the future.
If you have the child theme activate simple go to Appearance > Editor
From there you can just copy and paste and save.
I attached a screenshot to give you a visual of that I'm talking about
Thank you so much, Kevin! I really appreciate your time and patience on this!
( I'm sorry for my late reply; I was away from my desk unexpectedly for a few days :/ )
No problem Tam! Hope you were able to figure it out and had a great weekend!
Hi,
Glad that you were able to solve it!
Let is know if there is anything else we can do for you, thanks!
The Elated Support Center has been moved to our centralized support platform.
Please note that any existing tickets prior to this change will be answered right here on Ticksy, and in due time.
If you wish to submit a new support request, for all new inquiries please head on to our Help Center.
Elated Themes is part of Qode Interactive – the home of 300+ premium WordPress themes.
Don’t forget to sign up for our newsletter and be the first to find out all the latest news.