Is there a way to style tabs?
For the regular tabs bbcode, you can't change how the actual tab looks like. The most you can do is change the content's background.
Code:
[tabs]
[tab=Dis is a tab][/tab][tab=Dis is a tab][div=height:200px;background:grey; margin:-10px; padding:10px;]Content 1[/div][/tab]
[/tabs]
Stabs on the other hand, lets us use divs to change how the tabs and content area look. When it comes to changing the background colour however, it doesn't really let us do that fully. Here's an example of what I mean:
[stabs=100%]
{slide=
tab 1
|center}
Content
{/slide}
[/stabs]
Code:
[stabs=100%]
{slide=[div=background:purple; color:white;]tab 1[/div]|center}[div=height:200px; background:purple; color:white;]Content[/div]{/slide}
[/stabs]
The background doesn't cover it fully cause both the tabs and the content area have paddings in them which come from the stabs. There isn't any way to remove these paddings, but there are way to cheat around this.
For the tabs, adding a margin of -6px and padding of 6px on the right and left side of the div inside the slave tag is enough to solve the problem of filling it out with the background we want.
[stabs=100%]
{slide=
tab 1
|center}
Content
{/slide}
[/stabs]
Code:
[stabs=100%]
{slide=[div=background:purple; color:white; margin:0 -6px; padding:0 6px;]tab 1[/div]|center}[div=height:200px; background:purple; color:white;]Content[/div]{/slide}
[/stabs]
But unfortunately, the negative margin trick doesn't really work on the content area. The way I work around for that one is kinda tedious and a bit complex, but it does get the job done.
Step 1: Make a div outside the entire thing that matches the dimensions of the area that I want to cover, which in this case would be the content area, and slap it over by giving it a higher z-index than the stabs (2 should be good enough) and then moving it up via the bottom property (the value for this depends on the height of your stabs; I recommend just fiddling with it till you get the right value). This gives the false effect of the background fully covering the content area.
Step 2: Since the entire content area was covered up making so that even the content couldn't be seen, we need to bring the content out from behind. To do this we simply wrap the content in a div and set the div to have a higher z-index than the previous div we were working with (if you used 2 before, 3 should be enough for this).
Step 3: Last thing to do is to trim the unwanted space left behind by the div we used to cover the content area up with. This is done by wrapping the entire thing in a div, giving it a fixed height that matches that of the entire stabs, and then setting the overflow to hidden.
And viola! It should look like something like this after:
[stabs=100%]
{slide=
tab 1
|center}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. "Vestibulum commodo ante ac erat mattis, at fringilla neque elementum." Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.
Praesent pellentesque, massa et blandit commodo, metus erat bibendum lorem, elementum sollicitudin diam turpis ut magna. Fusce ornare blandit aliquet. Suspendisse euismod pellentesque leo sit amet laoreet. Quisque pellentesque cursus ullamcorper. Duis fermentum est eget dui auctor sagittis. Fusce aliquet nulla semper nisl dignissim, nec rhoncus lectus rutrum. Morbi blandit magna at dapibus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis blandit felis non finibus iaculis. Duis lacus massa, posuere ut arcu ut, sagittis pharetra nisl. Donec at commodo ipsum. Integer quis porttitor turpis. Sed mi sem, finibus nec neque quis, vehicula sagittis dolor.
{/slide}
[/stabs]
Code:
[div=height:260px; overflow:hidden;][stabs=100%]
{slide=[div=background:purple; color:white; margin:0 -6px; padding:0 6px;]tab 1[/div]|center}[div=height:200px; color:white; z-index:3; overflow-y:auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. "Vestibulum commodo ante ac erat mattis, at fringilla neque elementum." Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.
Praesent pellentesque, massa et blandit commodo, metus erat bibendum lorem, elementum sollicitudin diam turpis ut magna. Fusce ornare blandit aliquet. Suspendisse euismod pellentesque leo sit amet laoreet. Quisque pellentesque cursus ullamcorper. Duis fermentum est eget dui auctor sagittis. Fusce aliquet nulla semper nisl dignissim, nec rhoncus lectus rutrum. Morbi blandit magna at dapibus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis blandit felis non finibus iaculis. Duis lacus massa, posuere ut arcu ut, sagittis pharetra nisl. Donec at commodo ipsum. Integer quis porttitor turpis. Sed mi sem, finibus nec neque quis, vehicula sagittis dolor.
[/div]{/slide}
[/stabs]
[div=height:235px; z-index:2; bottom:195px; background:purple;][/div][/div]
The disadvantage of this tho is that for one it's not really very mobile friendly. Second is that you can't have it so you have different background colours for every tab you have since you're not really changing the background of what's inside the tab.