CODEWITHSUNDEEP
cordovaonsen-ui
Ashish Shukla
Ashish Shukla

Reputation: 1047

Onsen ui change background color of ons-tabbar and ons-sliding-menu components

I am new to Hybrid app development using cordova with onsen ui.

I am trying to change the Background color of ons-tabbar and ons-sliding-menu from their default color to red but I am not able to change it.

I have tried using inline styles but in vain.

Is there any way that I can change them ?

Below is my code for on-tabbar:

<ons-tabbar style="background-color:red">


 <ons-tab
      active="true"
      label="Home"
      icon="home"
      page="pa.html"></ons-tab>

 <ons-tab
  label="Call Us"
  style="color:#fff"
  icon="fa-phone"
  page="page2.html"></ons-tab>

  <ons-tab
  label="Menu"
  style="color:#fff"
  icon="fa-building-o"
  page="men.html"></ons-tab>

   <ons-tab
  label="My Orders"
  style="color:#fff"
  icon="fa-file-text"
  page="p1.html"></ons-tab>
</ons-tabbar>

code for ons-sliding-menu :

 <ons-sliding-menu main-page="p2.html" menu-page="menu.html" style="background-color: #129793" max-slide-distance="260px" var="menu">
</ons-sliding-menu>

Upvotes: 0

Views: 2095

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

To style the button panel part of the ons-tabbar you just need to modify the class .tab-bar { background-color: red; }.

The sliding menu contains a simple ons-page inside. Therefore, you can style it with ons-sliding-menu .page__background { background-color: red; }.

For the next time you can just inspect the elements in the developer console and see where is the background color.

Upvotes: 0

Related Questions