FANDOM


  • Hey guys! I am the bureaucrat/admin on the Fox's Star TV Wiki and I would like to customize the shape and coloring of the words on the tabber to make it fit the theme of the wikia. Does anyone know how to help? You can talk to me on my talk page also if needed.

    Thanks in advance,

    ibringme

      Loading editor
    • You can take a look at the wiki I admin. The CSS is here in the following section.

      /* new cyberdex tabber formatting */
      ⋮
      CSS Stuff
      ⋮
      /* end of new cyberdex tabber formatting */

      An example page is here.

        Loading editor
    • Ok so how would I be able to customize it?? I'm sorry I don't understand CSS. Here is an example of a page with tabbers on my wiki. I want the tabber color and letters to match the background of the wiki, and the shape to be rounded like. 

        Loading editor
    • Well, if both the tab color and the text match the background color, you won't be able to read the text.

        Loading editor
    • Andrewds1021 wrote:
      Well, if both the tab color and the text match the background color, you won't be able to read the text.

      I meant colors similar

        Loading editor
    • Well, you could try something like:

      .tabberlive,
      .tabbertab,
      .tabbernav {
          margin: 0px;
          padding: 0px;
          border: none;
      }
      .tabbernav li {
          border: 2px solid transparent;
          -moz-border-radius: 10px 10px 0px 0px;
          -webkit-border-radius: 10px 10px 0px 0px;
          border-radius: 10px 10px 0px 0px;
          background-color: hotpink;
      }
      .tabbernav li:hover {
          border-color: #360731;
      }
      .tabbernav li a,
      .tabbernav li a:hover,
      .tabbernav li a:link,
      .tabbernav li a:visited,
      ul.tabbernav li.tabberactive a {
          color: #360731;
          background-color: transparent;
          background-image: none;
          border: none;
      }
      ul.tabbernav li.tabberactive a {
          color: #FFFFFF;
      }
        Loading editor
    • so where would i add in colors and shape and everything? and how would i get it the way i want to. the shape i mean?

        Loading editor
    • Colors are set by lines with "color" in them and shape is set using lines with "border-radius" in them.

        Loading editor
    • Andrewds1021 wrote:
      Colors are set by lines with "color" in them and shape is set using lines with "border-radius" in them.

      so how do i determine the shape i want? oh and the font color?

        Loading editor
    • I'm not sure about shape, but I believe that the font color is determined by what Hex code you use (or sometimes, common color names). For Hex codes, Google [Color's name] hex code.

        Loading editor
    • Slytherinisforver is correct. To change the color of the text, change the value of color in the following sections.

      .tabbernav li a,
      .tabbernav li a:hover,
      .tabbernav li a:link,
      .tabbernav li a:visited,
      ul.tabbernav li.tabberactive a {
          color: #360731;
          background-color: transparent;
          background-image: none;
          border: none;
      }
      ul.tabbernav li.tabberactive a {
          color: #FFFFFF;
      }

      The first set (enclosed in {}) controls the text color for tabs other than the one being viewed. The second set controls the text color for the tab being viewed. You can change them to be the same if you want but I personally think different colors is best as it allows the viewer to easily identify which tab they are viewing. For extensive information on specifying colors, read this. For a quick summary of named colors, read this.

      To change the shape, change the values of the border radii. They are in the following section of CSS.

      .tabbernav li {
          border: 2px solid transparent;
          -moz-border-radius: 10px 10px 0px 0px;
          -webkit-border-radius: 10px 10px 0px 0px;
          border-radius: 10px 10px 0px 0px;
          background-color: hotpink;
      }

      For a description of valid values, read this. Note that the lines starting with -moz- and -webkit- should be changed to match the line with border-radius.

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message