Extensions Blog Press Contribute Forum FAQ Videos Changelog About Contact English
Chrome extensions you can't live without!
Extensions Blog Press Contribute Support About
Forum FAQ Videos Changelog Bio Contact

Don't know CSS too well, could someone tell me what I'm doing wrong here?

I wanted to make ALL of the tabs colored, the last 3 seem to stay white, not sure what I did.


The code in question - 

    background-color: #059fff !important;
color:#fff !important;

    background-color: #d900d9 !important;
color:#fff !important;

    background-color: #059fff !important;
color:#fff !important;

background-color: #16A765 !important;
color:#fff !important;

#tabGoogle Play {
background-color: #16A765 !important;
color:#fff !important;

background-color: #ff0040 !important;
color:#fff !important;

/*Optional transparent gradient overlay for all tabs. */

background: -moz-linear-gradient(top, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.5)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 100%);


.selected {
  padding-bottom: 15px;
  margin-top: -9px;
  border: 1px solid #CCC !important;

/*BEGIN: Optional rounded corners. Rounds top left and right corners of tabs so they really look like tabs. If you don't want rounded corners, eliminate this section*/
.tab {
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;

/*END: Optional rounded corners*/

/*optional custom background image with darker toolbar icons on a semi-transparent white background*/

[main] core-toolbar paper-icon-button, #topLeft {color:#679D43} [main] {background-image: url(http://i.imgur.com/rIc1UnM.jpg);background-size:cover;background-position-x:50%;background-position-y:50%} [main] core-toolbar {background-color:rgba(255,255,255,0.6) !important;} .accountHeader {background-color:rgba(255,255,255,0.5 !important;} 

I got it from this post here and altered it.https://jasonsavard.com/forum/discussion/1710/custom-css-for-colored-tabs-with-optional-rounded-corners-in-gmail


  • Those last 3 tabs don't have identifiers such like tabAmazon etc. you'll have to find another way to target them with more sophisticated css.
  • @Jason Ah, Looks like I have more research to do.  Any idea how I would get the body (All the white basically) into a dark grey kinda like this post? 


    I tried to do it myself and mess around a bit but came up with nothing
  • edited about a year ago
    Zerodeck, you must have missed the part of my post where PeterGibb asked the same question (link below). An edited version of my answer is below (customized for your labels). Pay particular attention to my notes because both apply in your case :

    For custom, top-level labels, selectors follow this pattern:

    #label_your label text in lowercase

    Descriptively, that's:

    1. a pound sign, #, immediately followed by
    2. the word "label" (not in quotes), immediately followed by
    3. an underscore, immediately followed by
    4. your label name, including spaces if the label has them, but all lowercase, even if the label has uppercase

    Using your labels, the selectors and code would look like this (there is no relevance to the fact that some of this text is blue. It's a function of how this forum is configured):

    #label_amazon {background-color: #FF00C6 !important;}

    #label_google play {background-color: #68FF00 !important;}

    #label_youtube {background-color: #68FF00 !important;}

    Of note:

    1. Use all lowercase letters for the label ID, even if your label has some uppercase ones.

    2. Maintain any spaces (hence, the space in "google play" but not in "youtube")

    For NESTED labels, use the same pattern, but preceded by the name of the parent label followed by a hyphen. So, if your YouTube and Google Play labelss were nested within a "Media" label, the selectors would look like this: 

This website uses cookies to ensure you get the best experience on our website. More info
Got it!