Jump to content
cdadjl13

add custom color to simple Navbar

Recommended Posts

cdadjl13

How do I add custom colors to simple navbars?

Share this post


Link to post
Share on other sites
Rob

Hi,

 

NavBar has a selection of five color schemes.  However, not everyone likes those colors.

 

If you have Firebug or use Chrome's Inspection Tools, you can identify the CSS for the color of your navbar, and adjust it.  There is technically more than one CSS group (I think two) -- one for the navbar itself, and one for the drop downs, if any.

 

The NavBar primary color CSS has several places where colors may need changing, as there's a border, an upper half color, and a lower half, creating the blended shaded scheme.

 

Now here's a little trade secret.  WordPress lets you assign a unique class to each menu item, via Dashboard > Appearance > Menus.   If you do that, you can actually color each menu item a different color. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dario
This is what I did to make the PL blue nav bar a solid color instead of a gradient:

/* THIS CUSTOMIZES THE NAVBAR BACKGROUND COLORS */
.navbar.pl-color-blue {
background-color: #003876;
background-image: -moz-linear-gradient(top,#003876,#003876);
background-image: -ms-linear-gradient(top,#003876,#003876);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#003876),to(#003876));
background-image: -webkit-linear-gradient(top,#003876,#003876);
background-image: -o-linear-gradient(top,#003876,#003876);
background-image: linear-gradient(top,#003876,#003876);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003876', endColorstr='#003876', GradientType=0);
border-top: 0px;
color: #fff;
}

/* THIS CUSTOMIZES THE LI ITEMS */
.navbar.pl-color-blue .navline > li > a {
color: #fff;
text-shadow: 0 1px 0 #000000;
}

.navbar.pl-color-blue .navline > li.current-menu-item > a {
color: #fff;
}

/* THIS CUSTOMIZES THE LI HOVER */
.navbar.pl-color-blue .navline > li > a:hover {
color: #e8ae10;
text-shadow: 0 1px 0 #000000;
}

/* THIS CUSTOMIZES THE DROPDOWN - BG COLOR */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
background-color: #003876;
background-image: none;
background-repeat: repeat-x;
}

And, on another site, using the Main WP menu but styled in the PL custom CSS area:

/* THIS IS THE MAIN NAV STYLING */
.navigation_wrap .main_nav_container {
border-bottom: 1px solid #ccc;
}

.main_nav ul li a {
color: #999 !important;
font-size: 1.25em;
}

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
background-color: #f6f6f6;
}

Share this post


Link to post
Share on other sites
cdadjl13

This is what I did to make the PL blue nav bar a solid color instead of a gradient:

/* THIS CUSTOMIZES THE NAVBAR BACKGROUND COLORS */
.navbar.pl-color-blue {
background-color: #003876;
background-image: -moz-linear-gradient(top,#003876,#003876);
background-image: -ms-linear-gradient(top,#003876,#003876);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#003876),to(#003876));
background-image: -webkit-linear-gradient(top,#003876,#003876);
background-image: -o-linear-gradient(top,#003876,#003876);
background-image: linear-gradient(top,#003876,#003876);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003876', endColorstr='#003876', GradientType=0);
border-top: 0px;
color: #fff;
}

/* THIS CUSTOMIZES THE LI ITEMS */
.navbar.pl-color-blue .navline > li > a {
color: #fff;
text-shadow: 0 1px 0 #000000;
}

.navbar.pl-color-blue .navline > li.current-menu-item > a {
color: #fff;
}

/* THIS CUSTOMIZES THE LI HOVER */
.navbar.pl-color-blue .navline > li > a:hover {
color: #e8ae10;
text-shadow: 0 1px 0 #000000;
}

/* THIS CUSTOMIZES THE DROPDOWN - BG COLOR */
.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {
background-color: #003876;
background-image: none;
background-repeat: repeat-x;
}

And, on another site, using the Main WP menu but styled in the PL custom CSS area:

/* THIS IS THE MAIN NAV STYLING */
.navigation_wrap .main_nav_container {
border-bottom: 1px solid #ccc;
}

.main_nav ul li a {
color: #999 !important;
font-size: 1.25em;
}

.main-nav li a:hover:hover, .main-nav li.current_page_item > a:hover, .main-nav li.current-page-ancestor > a:hover {
background-color: #f6f6f6;
}

I do apologize, but where exactly did you add the above code? Please indicate the files that need to be modified with the above code.

Share this post


Link to post
Share on other sites
cdadjl13

Hi,

 

NavBar has a selection of five color schemes.  However, not everyone likes those colors.

 

If you have Firebug or use Chrome's Inspection Tools, you can identify the CSS for the color of your navbar, and adjust it.  There is technically more than one CSS group (I think two) -- one for the navbar itself, and one for the drop downs, if any.

 

The NavBar primary color CSS has several places where colors may need changing, as there's a border, an upper half color, and a lower half, creating the blended shaded scheme.

 

Now here's a little trade secret.  WordPress lets you assign a unique class to each menu item, via Dashboard > Appearance > Menus.   If you do that, you can actually color each menu item a different color. 

Where exactly (which files) do I need to modify to get things done? Dashboard > Appearance > Menus.does allow creation of menus, but where do I customize their properties, such as colors?

 

Please refrain from adding incomplete replies, this clutters your support database, wastes my time, and creates frustration.

 

Your reply is elusive, incomplete, confusing - please clarify. The reason i bought into this "framework" was to find an easier method to be productive where it matters (the content) and to code less if at all.

Share this post


Link to post
Share on other sites
batman

Hi there

 

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

 

It is advisable to learn how to do this on your own too.  

 

Check out 

http://support.pagel...ion/custom-css/


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
dario

I do apologize, but where exactly did you add the above code? Please indicate the files that need to be modified with the above code.

You don't necessarily change things in the files directly, rather, you customize styles via the route Batman suggested, right through the PL interface. You change functions and actions via a child theme's function file. This way nothing gets overwritten when updates occur to WP and PL.

WP, on the fly through the webserver, replaces its code with your customizations. It's quite a brilliant way to manage changes actually.

As far as wanting supreme customization options with no coding, perhaps DMS will be like that. The options in Framework exceeded those in Platform Pro so it seems logical. Still, I can't imagine that developers can cover all contingencies that a designer could want. There are infinite variables.

Share this post


Link to post
Share on other sites
cdadjl13

Thanks for your replies.

What I meant by "no coding" was "minimal coding", without wasting time by "trial and error". My concerns are less on how to design a website which should be streamlined and more on the content.

 

I edited some of the .less files directly however no changes appear on the design. How come?

Share this post


Link to post
Share on other sites
Rob

I'm not sure which .less files you're editing, but the best way to add your custom CSS is via Dashboard > PageLines > Site Options > Custom Code, which takes both CSS and LESS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
cdadjl13

Where is the code in the Custom Code added? Does it add it to a .less file?

Share this post


Link to post
Share on other sites
Rob

When you navigate to Dashboard > PageLines > Site Options, you'll see a tab for Custom Code.  On a new line, anywhere below body {}, you can add custom code in the first box you find there.

 

No, it does not add to a .less file, nor a .css file. It writes directly to the database, so if you accidentally overwrote or deleted your PageLines Framework, you would not lose those customizations and could safely reinstall.


Former PageLines Moderator, Food Expert and Raconteur

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


×