Autonav Menu
Permalink Browser Info Environment
I need to change the color of the nav menu to blue (from green). I was hoping you wouldn't mind pointing me in the right direction as to where I can make this change. I am assuming it is in a css file somewhere? Please help. Thank you.
Sincerely,
Daniel Thornton
Sincerely,
Daniel Thornton
Type: | Discussion |
---|---|
Status: | In Progress |
I was just looking to accomplish the same thing (with a different color of course).. When I followed the directions as you presented them, I did not have the outcome you suggested I would. Everything remained the same.. Any other ideas?
Bill
Bill
Go to packages/theme_casual_/themes/casual/main.css open main.css and on or around line 160 you will see:
body .container .nav a, body section .nav a{
color: #fff;
background: #32556b;
display: block;
padding: 10px 15px;
border-bottom: 1px solid #fff;
position: relative;
}
body .container .nav li li a, body section .nav li li a{
background: none repeat scroll 0 0 #777;
padding-left: 25px;
}
body .container .nav li li a:hover,
body .container .nav li li a.nav-selected,
body .container .nav li a.nav-selected,
body .container .nav a:hover,
body section .nav li li a:hover,
body section .nav li li a.nav-selected,
body section .nav li a.nav-selected,
body section .nav a:hover
{
background-color: #7495ab;
text-decoration: none;
color: #fff;
On the third line above and third from the bottom is where you change the two colors for nav bar. You will also notice just a little further down where you change colors for links.
body .container .nav a, body section .nav a{
color: #fff;
background: #32556b;
display: block;
padding: 10px 15px;
border-bottom: 1px solid #fff;
position: relative;
}
body .container .nav li li a, body section .nav li li a{
background: none repeat scroll 0 0 #777;
padding-left: 25px;
}
body .container .nav li li a:hover,
body .container .nav li li a.nav-selected,
body .container .nav li a.nav-selected,
body .container .nav a:hover,
body section .nav li li a:hover,
body section .nav li li a.nav-selected,
body section .nav li a.nav-selected,
body section .nav a:hover
{
background-color: #7495ab;
text-decoration: none;
color: #fff;
On the third line above and third from the bottom is where you change the two colors for nav bar. You will also notice just a little further down where you change colors for links.
That is wonderful.. Thank you so much for helping me resolve that.. I am a bit newer to this so I am finding some points where I get stuck.. Took a second for me to figure out which place adjusted what color but it worked perfectly.. Thanks so much for your help.. Much appreciated.
Bill Hochsprung
Bill Hochsprung
Sorry, I just read my own explanation and it warrants clarification. I mean on or around line 159, you see the following code. On or around line 161, you will see a reference to background. Then on or around line 180 there is another reference to background color. Don't know if this helps, but I hope so. I tried the solution provided by author myself and it didn't work for me either. So I just looked for the code in main.css
It worked perfect so no worries at all.. I really do appreciate the prompt reply and the much needed help.. :-)
Hello,
The solution I posted works for the main navigation's active and hover states. For autonavs outside of the main nav area, drthornton's solution works best.
Let us know if we could be of more help.
Thanks and regards,
Datasouth
The solution I posted works for the main navigation's active and hover states. For autonavs outside of the main nav area, drthornton's solution works best.
Let us know if we could be of more help.
Thanks and regards,
Datasouth
Hi, I need to resize the sidebar block, as well as the main block...how am i going to established this on your theme please
Thanks in advance and God Bless
Thanks in advance and God Bless
Hi Fono,
Try following the steps below to edit the width of the Main and Sidebar Areas respectively:
1. On your theme_casual directory, open the file theme_casual/themes/casual/default.php
2. On line 51, you can see the container <div> for both the Main and Sidebar Area.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
<div class="col-md-4">
<div class="sidecontent">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
</div>
</div>
</div>
3. Go to line 53 (<div class="col-md-8">) Main Area and line 64 (<div class="col-md-4">) Sidebar Area.
4. Update the class to your desired size.
ie. If you want to make the Main Area Wider
- Change <div class="col-md-8"> to <div class="col-md-10">
- Change <div class="col-md-4"> to <div class="col-md-2">
IMPORTANT: Please note that on CSS Bootsrap, the total for both <div> should be equal to 12 (ie. 8 + 4 = 12, 10 + 2 = 12)
Hope this helps.
Thanks
Try following the steps below to edit the width of the Main and Sidebar Areas respectively:
1. On your theme_casual directory, open the file theme_casual/themes/casual/default.php
2. On line 51, you can see the container <div> for both the Main and Sidebar Area.
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content">
<?php
$a = new Area('Main');
$a->display($c);
?>
</div>
</div>
<div class="col-md-4">
<div class="sidecontent">
<?php
$a = new Area('Sidebar');
$a->display($c);
?>
</div>
</div>
</div>
</div>
3. Go to line 53 (<div class="col-md-8">) Main Area and line 64 (<div class="col-md-4">) Sidebar Area.
4. Update the class to your desired size.
ie. If you want to make the Main Area Wider
- Change <div class="col-md-8"> to <div class="col-md-10">
- Change <div class="col-md-4"> to <div class="col-md-2">
IMPORTANT: Please note that on CSS Bootsrap, the total for both <div> should be equal to 12 (ie. 8 + 4 = 12, 10 + 2 = 12)
Hope this helps.
Thanks
Thanks in advance it works perfect!!!
Thanks for trying out our theme. There are currently two ways to apply the color change to the autonav and the simplest way is to go to dashboard -> theme -> and click the customize button on the casual theme -> click "Add Your Css" and paste this code:
.masthead .nav > .active, .masthead .nav > .nav-selected > a, .masthead .nav > .active > a:hover, .masthead .nav > .active > a:focus {
background:blue;
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: blue;
}
you can change the color "blue" to a hex color (e.g #ffffff, #000000, #fff000).
Let me know if you need more help.
Regards,
Datasouth