MyBB Community Forums

Any way to seperate each tab so its not one bar of tabs. Can't seem to add a gap in between each tab.

edit: Nevermind i got it working! Thank you

How the heck do i upload a background picture? :o

Is it possible to add a background colour to an active tab by default? I always have to click a tab to get the right background colour.

Hello. I know this is an old thread. But I'm trying to get this to work and just cant figure it out. Everything seems to be fine as per the default category, other than when i click on a tab nothing happens. I checked and checked and checked, to be sure I did everything as instructed. If anyone out there can help with this it would be amazing.

(2014-12-19, 12:54 AM)Aoki Wrote: [ -> ]Is it possible to add a background colour to an active tab by default? I always have to click a tab to get the right background colour.

I know it's a little late but just in case anybody else needs help.

#forum_tabs > .forum_tab_links > span > a:hover,
#forum_tabs > .forum_tab_links > span > a.active {
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.449)!important;
}

Above handles hover and active. Separate them and you can write individual styles for them.

hello, I would like to have a different color on each button but I can not find how to do...

I managed to separate the buttons by changing this code:

<div class="tab_1" id="forum_tabs">

<div class="forum_tab_links">
<span>
<a href="javascript:;" id="tab_1">First</a>
<a href="javascript:;" id="tab_2">Second</a>
<a href="javascript:;" id="tab_3">Third</a>
</span>
</div>

<div>

by that:

<div class="tab_1" id="forum_tabs">
<div class="forum_tab_links">
<span>
  <a href="javascript:;" id="tab_1">First</a>
  </span>
<span>
<a href="javascript:;" id="tab_2">Second</a>
  </span>
<span>
<a href="javascript:;" id="tab_3">Third</a>
  </span>
    </div>

which gives me a report like this:

and here is the css code that is proposed in the first page:

#forum_tabs > .forum_tab_links {
     text-align:center;
     margin:7px auto;
     display:block;
}

#forum_tabs > .forum_tab_links > span {
     background-color: #003454;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#026cb0), to(#03568a)); /* Saf4+, Chrome */
     background-image: -webkit-linear-gradient(top, #026cb0, #03568a); /* Chrome 10+, Saf5.1+ */
     background-image: -moz-linear-gradient(top, #026cb0, #03568a); /* FF3.6+ */
     background-image: -ms-linear-gradient(top, #026cb0, #03568a); /* IE10 */
     background-image: -o-linear-gradient(top, #026cb0, #03568a); /* Opera 11.10+ */
     background-image: linear-gradient(top, #026cb0, #03568a); /* W3C */
     display:inline-block;
     border-radius:3px;
     border:1px solid #003454;
} 


#forum_tabs > .forum_tab_links > span > a {
     padding:4px 5px;
     font-size:11px;
     display:block;
     float:left;
     color:#f5f5f5;
     text-align:center;
     border-right: 1px solid #003454;
     text-decoration:none;     
}
#forum_tabs > .forum_tab_links > span > a:hover,
#forum_tabs > .forum_tab_links > span > a.active {
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.449)!important;
}

#forum_tabs > .forum_tab_links > span > a:last-child {
     border-right:0 !important;
}


#forum_tabs  div[id^="tab_cat_"] {
  display:none; /*Hides tabs content*/
}

I tried many things but unfortunately i can not succeed alone to give a diferent color each button...

thank you in advance to those who will help me

This should work, substituting "tab_1" whatever ID you use (so make 3 copies of this, one for each button ID):

#forum_tabs > .forum_tab_links > span#tab_1 {
     background-color: #003454;
     background-image: -webkit-gradient(linear, left top, left bottom, from(#026cb0), to(#03568a)); /* Saf4+, Chrome */
     background-image: -webkit-linear-gradient(top, #026cb0, #03568a); /* Chrome 10+, Saf5.1+ */
     background-image: -moz-linear-gradient(top, #026cb0, #03568a); /* FF3.6+ */
     background-image: -ms-linear-gradient(top, #026cb0, #03568a); /* IE10 */
     background-image: -o-linear-gradient(top, #026cb0, #03568a); /* Opera 11.10+ */
     background-image: linear-gradient(top, #026cb0, #03568a); /* W3C */
     display:inline-block;
     border-radius:3px;
     border:1px solid #003454;
} 

thanks a lot for your responsiveness ! I'll get the kids to school and I quickly test !!!

---

thanks a lot @Tom K. ! thanks to you, it works perfectly and I managed to get what I want,
thanks again !!!

How can I make it so that the when I reload the page, the first tab-forum appears?