How to change <ons-tab> icon colors?
ChunYu last edited by
I have a question please help me,
I use code:
<ons-tabbar id=“myTabbar” position=“auto” class=“yourFooterClass”>
<ons-tab page=“html/pending_tasks.html” label=“TEST” icon=“fa-home” active></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“fa-calculator” s></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“fa-address-book”></ons-tab>
<ons-tab page=“tab2.html” label=“TEST” icon=“address-card”></ons-tab>
How to blue color active icon change “red” (or other color) colors ?
The easiest way to do this is by creating a custom theme with Onsen UI Theme Roller: https://onsen.io/theme-roller/
Check the ‘Customize’ box and then scroll down to the Tabbar component. On the right-hand pane, you will see ‘Component Variables’ and under that heading is ‘tabbar highlight text’. Changing ‘tabbar highlight text’ will change the colour.
Once you are finished, click ‘Download’ and then import the downloaded files into your Onsen UI project.
@emccorson Can you give us a little more about this ‘import the downloaded files into your project’.
I mean, I know what this mean, but how we should do it?
Does it mean that we should do something with node moduls/onsenui/css-components-src and so on or something different.
Can you give us here a detail instructions how to do it. Thank you!
No need to touch any of the files in node_modules.
First unzip the onsen-css-theme.zip file you downloaded from Theme Roller. Put the CSS files in a directory in your source directory (for example, www/styles).
In your index.html, you should have a line something like:
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
hrefattribute to point to the onsen-css-components.css file that you just put in your source directory. For example, if you put the CSS files in
www/stylesand your index.html file is in
wwwchange it to:
<link rel="stylesheet" href="styles/onsen-css-components.css">
Then add another line to link the theme.css file:
<link rel="stylesheet" href="styles/theme.css">
That should be it working. If you are still having problems, can you provide a tree of your project structure so I can see which files are where?
Oh, I just realised from your other post that you might be using React.
If you are using React, instead of using the
linktag, you should import your CSS styles however you already import CSS styles for React.
@emccorson thank You for replyed, it was helpful.
I downloaded a ‘theme.css’ from theme roller and imported it in project and everything working right now, but I have now something different to deal with, people with who I working on project gave me something like this (pictures down below).
How they told me, they created this files on ‘onsen theme roller’ but I don’t know how!?
As you can see, I have theme and also I have components, its different from what ‘theme roller’ generate for you. So, how I should import all of these components in my React project?
Thank You in advance.
It’s hard to know without seeing the files, but it looks like the components directory contains CSS only for specific components. In that case you want the styles in the components directory to override the ones in onsen-css-components.css. So you should still import theme.css and onsen-css-components.css as normal, but then after the onsen-css-components.css import, import each file in the components directory. (I think.)
It is just how you said it. Thank you a lot.
After importing a theme.css, I imported each component from components and it override onsen component style.