• 0

Menu bar color


Question

Posted · Report post

Can the menu bar be given a diff colour than  those available, if so does anyone have sample code on applying a gradient and new color ? 

Where is this applied, in the custom CCS section ?

 

Much appreciated.

Share this post


Link to post
Share on other sites

6 answers to this question

  • 0

Posted · Report post

Hi there,

 

I have been trying to work through an issue with this myself today. I have set up DMS with a child theme wherein I am attempting to make some changes to the styles.less file to add a gradient to override the pre-packaged options in DMS. I add the following lines to the styles.less file:

 

.navbar.pl-color-red {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 14, 16)), to(rgb(149, 0, 5)));
background-image: -webkit-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -moz-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -o-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -ms-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#bc0e10', EndColorStr='#950005');
border-top: 1px solid rgb(149, 0, 5);
}
.navbar.pl-color-red .searchform .searchfield {
  border: 1px solid rgb(149, 0, 5);
}
 
I noticed that it is being compiled in the /wp-content/uploads/pagelines/compiled-css-xxxxxxxxx.css file and it is not being overridden by the child theme's style.css file, yet it is not being reflected on my site. If I plug the same code into either the Custom Code section on the DMS editor or directly into the child theme's styles.css file, it does take effect. I have been searching all day for the answer to this issue. I simply want to be able to edit the child theme's styles.less file and have the modifications take place.
 
Any suggestions from anyone on what I am doing wrong?
I am developing locally and here is the output of my DMS debug:
 
WordPress Version : 3.6 Multisite Enabled : No Current Role : Administrator Framework Path : /Users/highlander/Dropbox/Websites/angola3.dev/wp-content/themes/dms Framework URI : http://angola3.dev/wp-content/themes/dms Framework Version : 1.0.3 Framework Build : 1.0.3 PHP Version : 5.3 Child theme : Yes
/Users/highlander/Dropbox/Websites/angola3.dev/wp-content/themes/dms-template-theme
http://angola3.dev/wp-content/themes/dms-template-theme PHP memory : 256 Mysql version : 5.1.44 PHP type : Apache2handler PHP User : Highlander OS : Darwin Licence OK : Warren@peatfirestudios.com Plugins : 3
custom-sidebars/customsidebars.php
easy-random-quotes/kl-easyrandomquotes.php
feedwordpress/feedwordpress.php

 

Any help would be greatly appreciated.

 

Many thanks,

Warren

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

peatfire You are very close. You just need to be more specific with your CSS and target .section-navbar.

 

Try .section-navbar .navbar.pl-color-red { your code }

 

See if that works.

 

Ellen

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you so much Ellen! Spot on.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ellen is always spot on! :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

Hi there,

 

I have been trying to work through an issue with this myself today. I have set up DMS with a child theme wherein I am attempting to make some changes to the styles.less file to add a gradient to override the pre-packaged options in DMS. I add the following lines to the styles.less file:

 

.navbar.pl-color-red {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(188, 14, 16)), to(rgb(149, 0, 5)));
background-image: -webkit-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -moz-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -o-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: -ms-linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
background-image: linear-gradient(top, rgb(188, 14, 16), rgb(149, 0, 5));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#bc0e10', EndColorStr='#950005');
border-top: 1px solid rgb(149, 0, 5);
}
.navbar.pl-color-red .searchform .searchfield {
  border: 1px solid rgb(149, 0, 5);
}
 
I noticed that it is being compiled in the /wp-content/uploads/pagelines/compiled-css-xxxxxxxxx.css file and it is not being overridden by the child theme's style.css file, yet it is not being reflected on my site. If I plug the same code into either the Custom Code section on the DMS editor or directly into the child theme's styles.css file, it does take effect. I have been searching all day for the answer to this issue. I simply want to be able to edit the child theme's styles.less file and have the modifications take place.
 
Any suggestions from anyone on what I am doing wrong?
I am developing locally and here is the output of my DMS debug:
 
WordPress Version : 3.6 Multisite Enabled : No Current Role : Administrator Framework Path : /Users/highlander/Dropbox/Websites/angola3.dev/wp-content/themes/dms Framework URI : http://angola3.dev/wp-content/themes/dms Framework Version : 1.0.3 Framework Build : 1.0.3 PHP Version : 5.3 Child theme : Yes
/Users/highlander/Dropbox/Websites/angola3.dev/wp-content/themes/dms-template-theme
http://angola3.dev/wp-content/themes/dms-template-theme PHP memory : 256 Mysql version : 5.1.44 PHP type : Apache2handler PHP User : Highlander OS : Darwin Licence OK : Warren@peatfirestudios.com Plugins : 3
custom-sidebars/customsidebars.php
easy-random-quotes/kl-easyrandomquotes.php
feedwordpress/feedwordpress.php

 

Any help would be greatly appreciated.

 

Many thanks,

Warren

 

 

peatfire You are very close. You just need to be more specific with your CSS and target .section-navbar.

 

Try .section-navbar .navbar.pl-color-red { your code }

 

See if that works.

 

Ellen

Would that be the same Ellen if not applied to a child theme, just to confirm before I try it, thanks 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@j powers Yes, it will work in the custom code area.peatfire code works for the Red Navbar in case you use his example.

 

Ellen

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now