How can I customized the color of each tab of the navbar

[lorenzo]

I want to customized the color of each tab of the navbar, example the first tab is yellow, then the second is red, and the third is blue....how can these be done.....

[Illya Stepanov]

Hi lorenzo, you can do it using custom CSS rule for navbar, Appery.io using standart jQuery mobile component navbar - this shoud help :: http://jquerymobile.com/demos/1.2.1/d...

[lorenzo]

I've read the link that you've given and also read the tutorials on appery http://docs.appery.io/documentation/a... to try to do this myself, but it seems that I'm not getting anywhere because the main problem is I'm not sure of what will the code be that will work for this....can you please give me an example of the code......

[Kateryna Grynko]

Hi Lorenzo,

You can use this example:
precode[name=mobilenavbaritem_31] .ui-btn-inner {
background-color: red;
}
[name=mobilenavbaritem_31] .ui-btn-inner:hover {
background-color: green;
}/code/pre

[lorenzo]

I've tried several times with trial and error but still no luck, the following is the last trial I've made.....Please tell me where did I go wrong.....Thank you in advance....

[dsid=mobilenavbaritem_31] .ui-icon {
background: url("http://png.findicons.com/files/icons/...");
background-size: 30px 30px;
height: 30px !important;
margin-left: -15px !important;
width: 30px !important;

}

[dsid=mobilenavbaritem_31] .ui-color {
data-theme: B !important;

}

[Kateryna Grynko]

Try the example above and let us know..

[lorenzo]

Wow!!! It works!!! .......thank you guys....specially to Ms. Katya and Sir Illya, your help and support is really great and very much appreciated.....

[antonback89]

Hey i also trying to change my navbar but just one color for the background of it and one for the tab who is active.

I've tried the code you wrote but nothings happening.

[name=menuitem2] .ui-btn-inner {
background-color: #ff9815;
}
[name=menuitem2] .ui-btn-inner:active {
background-color: #ffffff;
}

Can i change my navbars color also with the CSS? Thanx for your support

[Serhii Kulibaba]

Hello Anton,

Add custom CSS:

[name=mobilenavbaritemName]{
background-color:red!important;
}

where mobilenavbaritemName - mobilenavbaritem's name

[Aeneas McBurney]

I have a navbar with 2 nav bar items (navInWork and navSpelling). I want to change color and bold the active one so added the below to my CSS style sheet but it has no effect??

[name=navInWork] .ui-btn-inner:active{
background-color: green;
font-weight:bold;
}
[name=navInWork] .ui-btn-inner{
background-color: red;
font-weight:normal;
}
[name=navSpelling] .ui-btn-inner:active{
background-color: green;
font-weight:bold;
}
[name=navSpelling] .ui-btn-inner{
background-color: red;
font-weight:normal;
}