9 replies to this topic

[sternschnuppenschweif]

I read a lot topics about change colors of navigation but all it still doesn't work.

I searched the code with firebug and insert it in  <> Custom Code. Then I changed color. It doesn't work.

 

Then i installed pagelines-customize and try to change it in Wordpress with the editor, doesn't work and after that i tried to change it in style.css of pagelines-customize.

 

In Wordpress (Editor) is shown, that plugin pagelines-customize its active, but the functions.php an style.css is inactive. But I don't know, where I can change this.

 

Here its the code, I located with firebug:

 

[ code]

 

.dropdown-menu
li > a:hover, .dropdown-menu li > a:focus,
.dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item >
a {

    background-color: #0081C2;

    background-image: -moz-linear-gradient(center top , #0088CC, #0077B3);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}

 

 [ /code]

 

I only want to change the blue color in green color and 

and changed it into:

 

[ code]

{

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

    background-color: #167a19;

    background-image: -moz-linear-gradient(center top , #167a19, #167a19);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}

 

 [ /code]

Can you please help me???

 

 

An another question: Is it possible to insert a picture in the navigation bar instead of text?

 

Here its the link of the website:

 

Please Login or Register to see this Hidden Content

[Danny]

Hi,

 

First things first, when adding code to our forum, please use our paste server -

Please Login or Register to see this Hidden Content

 

I have provided you with a link to our custom CSS documentation, which has information on how to override the default CSS.

 

Please Login or Register to see this Hidden Content

 

Also the CSS you have linked is related to the drop down area only and you appear to have only copied the code that relates to the FireFox browser. This means that if you were to view your site in Chrome, IE, Safari or Opera, the code you have used wouldn't work, due to these browsers using a different browser processor.

 

If you're not comfortable using LESS CSS for your gradient CSS, then you will need to use this site to generate your all browser compatibility gradient CSS.

 

Please Login or Register to see this Hidden Content

 

Regarding your image instead of text in navigation, are you referring to replacing the menu text with an image ?

If so, you can use Font Awesome, which is the easiest way to achieve this look. Simply replace the Navigation label with the font awesome code, to achieve a similar to look to this:

 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

[sternschnuppenschweif]

Hi Danny,
thanks for your help!

I added the style.less to pagelines customize and deleted the style.css. Now, I added the code to change the color of the drop down area in the style.less document. In Mozilla Firefox the color is green now :-)
But in the other Browsers the color is still blue :-(
Then I tried it with

Please Login or Register to see this Hidden Content

selected a green color and copied the code in style.less. But that doesn't work, too. I don't know what I have to do with this gradient-editor.

 

I changed the code to:

[ code]

 

.dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > a, .dropdown-menu li.current-menu-item > a {

    background-color: #299a0b;

    color: #299a0b;

    background: #299a0b;

    background-image: -moz-linear-gradient(center top , #d3f0c8, #299a0b);

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d3f0c8), to(#299a0));

    background: -webkit-linear-gradient(top, #d3f0c8, #299a0);

    background: -ms-linear-gradient(top, #d3f0c8, #299a0);

    background: -o-linear-gradient(top, #d3f0c8, #299a0);

    background-repeat: repeat-x;

    color: #FFFFFF;

    text-decoration: none;

}

[ /code]

but the drop-down area is only in Mozilla firefox green

 

 

 

To image in navigation:
I don't want use Font Awesome. Ist a picture, which contains the navigation words in handwritten with pencil.
I tried to write the src in the title, but I think then the title of the link would be shown. But I want, that the image is shown instead of the text.

Can you please help me again?

[Danny]

Hi,

 

The reason why its only working in FireFox is that you haven't removed your previous code from somewhere and therefore it is still loading and overriding your new code you have in your style.less file.

 

Therefore, you need to find where you added the code that only had code for FireFox and remove it. Also, you're not using the PageLines Overrides, there is information on why you need to use these on the Custom CSS documentation.

 

Please Login or Register to see this Hidden Content

 

Also, if you're using LESS CSS, there is no need to use all that website to generate your gradient code, you can use the LESS mixin for gradient.

 

Please Login or Register to see this Hidden Content

For example, the code below is a LESS CSS gradient mixin, this means that when you use LESS and add this to your style.less file.

 

Please Login or Register to see this Hidden Content

Once loaded in the users browsers, the code above returns as this.

Please Login or Register to see this Hidden Content

[sternschnuppenschweif]

Hi Danny,

I only added the code in the style.less. I didn't add code only for Firefox. Do I have to search in the pagelines.style and remove the Firefox code there? If there is a pageline update, would the code than been inserted again?

 

The link, which you have posted doesn't work :-( 

Please Login or Register to see this Hidden Content

 

Thanks Sandra

[Danny]

Can you add all your custom CSS to our pastie service, so we can see your issue first hand. Also, your site is currently down, so I am unable to see it at the moment.

 

Please Login or Register to see this Hidden Content

 

PageLines.me, is also currently down and we are awaiting on our administrator to resolve the issue.

[sternschnuppenschweif]

Here is the link in which I posted the code of style.less:

Please Login or Register to see this Hidden Content

 

I didn't change an other css file. Or is it because I select the Nav Bar and choose the color grey?

 

Or is it possible, that the mysql-database is the reason for the problems? A view days ago, I couldn't add new sites. I deleted the database and add a new one, than  I could add new sites.

 

If you like I can give you access to the ftp-server where all the files are uploaded? But I don't want to publish the access in the forum.

[mackenzie]

Hello - I am just checking to see if anyone has responded to you privately

[sternschnuppenschweif]

Hello, the page is now online again. There was a Problem with the memory space.

But I can still not changing the color of the drop down menu. Below is the code, that i insert in the style.less file

But the color is still blue in all browsers.

Could this be a problem with the database? Or is the code wrong? I didn't know what to do :-(

 

 

.dropdown-menu li > a:hover,

.dropdown-menu li > a:focus,

.dropdown-submenu:hover > a,

.dropdown-menu li.current-menu-item > a {

  text-decoration: none;

  color: #fff;

  background-color: #4ba22d;

  background-color: #4ba22d;

  background-image: -moz-linear-gradient(top,#4ba22d,#91b983);

  background-image: -ms-linear-gradient(top,#4ba22d,#91b983);

  background-image: -webkit-gradient(linear,0 0,0 100%,from(#4ba22d),to(#91b983));

  background-image: -webkit-linear-gradient(top,#4ba22d,#91b983);

  background-image: -o-linear-gradient(top,#4ba22d,#91b983);

  background-image: linear-gradient(top,#4ba22d,#91b983);

  background-repeat: repeat-x;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ba22d', endColorstr='#91b983', GradientType=0);

}

.dropdown-menu .active > a,

.dropdown-menu .active > a:hover {

  color: #fff;

  text-decoration: none;

  outline: 0;

  background-color: #4ba22d;

  background-color: #4ba22d;

  background-image: -moz-linear-gradient(top,#4ba22d,#91b983);

  background-image: -ms-linear-gradient(top,#4ba22d,#91b983);

  background-image: -webkit-gradient(linear,0 0,0 100%,from(#4ba22d),to(#91b983));

  background-image: -webkit-linear-gradient(top,#4ba22d,#91b983);

  background-image: -o-linear-gradient(top,#4ba22d,#91b983);

  background-image: linear-gradient(top,#4ba22d,#91b983);

  background-repeat: repeat-x;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ba22d', endColorstr='#91b983', GradientType=0);

}

[Danny]

Unfortunately, we are unable to provide you the custom CSS needed to achieve your layout. If you're not comfortable with custom CSS or code. I recommend you contact one of our Pros for assistance 

 

Please Login or Register to see this Hidden Content

 

Be sure to also check out our CSS Customization section in our documentation to give you a good head start on CSS changes you can make.

 

Please Login or Register to see this Hidden Content