Jump to content


Photo

Customization to the Nav Bar

nav bar customization

  • Please log in to reply
4 replies to this topic

#1 aliciamariephillips

aliciamariephillips

    Newbie

  • Members
  • Pip
  • 2 posts
  • Framework Version:lite
  • Country: Country Flag

Posted 02 April 2013 - 08:20 PM

I installed the customization plug-in and followed the directions.

 

the color of only PART of my bar changed, i'm know very little coding and did all the troubleshooting I could to no avail.

 

the color of the text will not change for some reason.

 

Here's my code:

 

<head>

<style type="text/css">
.navbar a {
font-size:18px;
font-family:Arial;
font-weight: bold;
color:#000000;
background-color:#17AB52;
}
.navbar a:link {
font-size:18px;
font-family:Arial;
font-weight: bold;
color:#000000;
background-color:#17AB52;
}
.navbar a:visited {
font-size:18px;
font-family:Arial;
font-weight: bold;
color:#000000;
background-color:#17AB52;
}

.navbar a:hover {
font-size:18px;
font-family:Arial;
font-weight: bold;
color:#000000;
background-color:#17AB52;
}



</style>
</head>



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 April 2013 - 08:29 PM

Hi Alicia

 

The navbar uses the background-image css commands and uses a gradient to apply the background color, as it's a gradient the css will be specific on a per browser basis as each browser renders the gradient differently. 

 

The full browser code is as follows based on editing the black color settings in the navbar menu.

 

 
.navbar.pl-color-black-trans { background-color: rgba(0, 0, 0, 0.12);
background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));
background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));
background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);
border-top: 1px solid rgba(0, 0, 0, 0.9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);
}

 


#3 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 April 2013 - 08:30 PM

For some reason the last part didn't paste well in the code editor, i'll try paste as text 

 

.navbar.pl-color-black-trans { background-color: rgba(0, 0, 0, 0.12);

background-image: -moz-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -ms-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -webkit-gradient(linear,0 0,0 100%,from(rgba(0, 0, 0, 0.8)),to(rgba(0, 0, 0, 0.9)));

background-image: -webkit-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: -o-linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-image: linear-gradient(top,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.9));

background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’rgba(0,0,0,0.8)’, endColorstr=’rgba(0,0,0,0.9)’, GradientType=0);

border-top: 1px solid rgba(0, 0, 0, 0.9);

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=’#444444′,EndColorStr=’#222222′);

}



#4 aliciamariephillips

aliciamariephillips

    Newbie

  • Members
  • Pip
  • 2 posts
  • Framework Version:lite
  • Country: Country Flag

Posted 02 April 2013 - 08:45 PM

OK thanks for the response.  This shoots so far over my head I can't even see it.  The nav bar will just stay standard. 



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 April 2013 - 09:02 PM

If you've not used css before check out - http://support.pagel...ion/custom-css/ which will give you an overview of using css inside the framework to edit and customize sections. Any custom code you have can be pasted into Pagelines>site options>custom code.

 

We also have some third part sections which will allow you to edit the color of the navbar within an admin panel inside the framework, check out http://www.pagelines...tions/crackbar/







Also tagged with one or more of these keywords: nav bar, customization