Thread:JokerXIII/@comment-24142930-20180323110631

Hi, if you're really determined to style tabber tabs so they appear as images, I'm glad to help out. If you're unfamiliar with CSS though, it can be pretty hard to grasp at first. I'll explain why:

.tabbernav li a[title="Example"] { background: red !important; } Every time you create a tabber and one of the titles is called "Example", that styling would apply. There may be times you don't want styling, so putting: background: red; } Where #Tabber is the div id, should ensure the tabber styling only applies if the div id "Tabber" is found first. Note that you don't need to use !important as well when placing it in a div id.
 * Best practice is to place any custom tabber styling you want in a div id first. By doing this, the custom tabber styling should only apply if the div id is called first. For example, if you just put:
 * 1) Tabber .tabbernav li a[title="Example"] {

The code would look like this when editing the actual page: Example=Your Text

.tabbernav li a[title="Example"], - Tab title styling when not selected, not hovered over .tabbernav li a[title="Example"]:hover, - Tab title styling when not selected but hovered over .tabbernav li.tabberactive a[title="Example"], - Tab title styling when selected, not hovered over .tabbernav li.tabberactive a[title="Example"]:hover - Tab title styling when selected and hovered over
 * Depending on the styling, you could potentially have to style each tab 4 different times:


 * The length of the tabber title itself plays a part in the styling. Really long titles would most likely mean introducing padding to keep the width of the tabber down. However, the size of the image may mean introducing margin styling, as it could overlap onto the main content area of the tab.

Sorry if this isn't explained very well, I'm not that good with CSS, this is just what I've been messing around with when tabber styling. 