CODEWITHSUNDEEP
cssmaterialize
Kruthika C S
Kruthika C S

Reputation: 739

change the color of tab text and the underline in materialize framework

The default color of materialize tabs are pinkish. Also the underline for the active tab. I want to customize that and add some styles. How do I do that?

Upvotes: 12

Views: 20839

Answers (4)

Emmanouil Kafieris
Emmanouil Kafieris

Reputation: 119

The best way to add custom CSS to Materialize 1.0.0 default tabs is the following:

.tabs .tab a {
  color: rgba(38, 166, 154, 0.7);
  /*Custom Text Color*/
}

.tabs .tab a:hover {
  color:#26a69a;
  /*Custom Color On Hover*/
}

.tabs .tab a:focus.active {
  color:#26a69a;
  /*Custom Text Color While Active*/
  background-color: rgba(38, 166, 154, 0.2);
  /*Custom Background Color While Active*/
}

.tabs .indicator {
  background-color:#26a69a;
  /*Custom Color Of Indicator*/
}

*If you want to keep the default styling of the framework, use the RGBA values as they are in the example.

Upvotes: 11

Charitha Goonewardena
Charitha Goonewardena

Reputation: 4714

For the underline color add <div class="indicator orange" style="z-index:1"></div> right before the </ul>, and for the text color use this <li class="tab col s3"><a href="#test1" class="teal-text">Test 1</a></li>

eg:

<ul class="tabs transparent" materialize="tabs">
  <li class="tab col s3">
    <a href="#test1" class="teal-text">Test 1</a>
  </li>
  <li class="tab col s3">
    <a href="#test2" class="teal-text">Test 2</a>
  </li>
  <div class="indicator teal" style="z-index:1"></div>
</ul>

Upvotes: -1

Kruthika C S
Kruthika C S

Reputation: 739

Images: Active tab and Tab2 on hover

Code changes in CSS for the effects in above 2 images :

        .tabs .tab a{
            color:#000;
        } /*Black color to the text*/

        .tabs .tab a:hover {
            background-color:#eee;
            color:#000;
        } /*Text color on hover*/

        .tabs .tab a.active {
            background-color:#888;
            color:#000;
        } /*Background and text color when a tab is active*/

        .tabs .indicator {
            background-color:#000;
        } /*Color of underline*/

Upvotes: 30

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

Its very easy to apply predefined classes in materialize.

Just Refer Page : http://materializecss.com/color.html

Here I have applied classes teal lighten-2 but there are various combination of classed from which you can choose from. Additionally you can write your own custom class and apply that too.

HTML : 

<div class="row">
  <div class="col s12">
    <ul class="tabs teal lighten-2">
      <li class="tab col s3"><a href="#test1">Test 1</a></li>
      <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
      <li class="tab col s3"><a href="#test3">Test 3</a></li>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
  <div id="test3" class="col s12">Test 3</div>
  <div id="test4" class="col s12">Test 4</div>
</div>

JSFiddle : http://jsfiddle.net/nikdtu/doska9qe/

Upvotes: -2

Related Questions