Jump to content
aliciamariephillips

Customization to the Nav Bar

Recommended Posts

aliciamariephillips    0
aliciamariephillips

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>

Share this post


Link to post
Share on other sites
James B    436
James B

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′);
}

 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B    436
James B

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′);

}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
aliciamariephillips    0
aliciamariephillips

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. 

Share this post


Link to post
Share on other sites
James B    436
James B

If you've not used css before check out - http://support.pagelines.me/docs/customization/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.com/store/sections/crackbar/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
    • yemoonyah
      By yemoonyah+
      I just installed and added the Flipper section to my home page and it makes my navigation/menu bar items disappear.
      They do show up again when scrolling down and everything seems normal on the other pages.
      http://yemoonyah.com
      Thanks.
       
    • janpeeters
      By janpeeters+
      Hi all,
      I was totally excited to find out about 'CSS Hero' (http://www.csshero.org) I read about it in the compatible plugins section of the PL5 docs (http://www.pagelines.com/resources/compatible-plugins) For me it's a great way to more easily customize my sites because I'm not a CSS pro.
      I'm wondering about one thing though… Does anyone know if using this will result in a heavy penalty on page loading speeds? Would love to start using it but only if it doesn't cost too much in terms of speed.
      Thanks, Jan
    • abuzzelli
      By abuzzelli+
      I need the modal popup background to be solid and I can't get the css to work. Not sure what to do. Here's the page: http://bellissimoplasticsurgery.com/breast-augmentation-test-page/
×