MyBB Community Forums

Full Version: MyTabs - How to get style like this?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Anyone know how to get tab style like this for mytabs? I only want 2 tabs and stretched and fit to forum like this:

[Image: 89fc729d0d84b183526666889d13cc89.png]

https://gyazo.com/89fc729d0d84b183526666889d13cc89
What code do have for the tabs?
(2019-06-23, 10:05 AM)Ashley1 Wrote: [ -> ]What code do have for the tabs?

I am not sure exactly where to start.. I still have the default css.

Default tab style:
<a href="{$link}" style="margin-right: 6px;">	<div style="display: inline-block; padding: 10px; border: 1px solid #858787; color: black; background-color: #BABCBC;">		{$name}	</div></a>

Default selected tab style:
<a href="{$link}" style="margin-right: 6px;">	<div style="display: inline-block; padding: 10px; border: 1px solid #49B0D8; color: black; background-color: #8CDEFF;">		{$name}	</div></a>

Tab List Style:
<div class="trow2" style="border: 1px solid #ccc; margin: 0px 2px 20px 2px; padding: 10px;">	{$tablist}</div>
<div style="display: flex">
	<div style="flex-grow: 1">TAB 1</div>
	<div style="flex-grow: 1">TAB 2</div>
</div>	
(2019-06-23, 10:21 AM)Ashley1 Wrote: [ -> ]
<div style="display: flex">
	<div style="flex-grow: 1">TAB 1</div>
	<div style="flex-grow: 1">TAB 2</div>
</div>	

Thank u. That goes into Tab List Style?
I don't know this plugin at all. But that layout will do what you want - it's flex.
Anyone else think they know how to style it with mytabs?
Still wondering if can get some help with this please!
(2019-07-01, 04:05 AM)makpaolo Wrote: [ -> ]Still wondering if can get some help with this please!
Share your website URL so that we can know which plugin you are using.
Their are more than one way to solve this and Ashley1 has given a very good reply, if you are using MyTabs plugin(https://community.mybb.com/mods.php?action=view&pid=456)
than every tab item needs to be
<div style="flex-grow: 1">TAB 1</div>
Below is the complete code
(2019-06-23, 10:21 AM)Ashley1 Wrote: [ -> ]
<div style="display: flex">
	<div style="flex-grow: 1">TAB 1</div>
	<div style="flex-grow: 1">TAB 2</div>
</div>	


Regards
WallBB
(2019-07-01, 04:05 AM)makpaolo Wrote: [ -> ]Still wondering if can get some help with this please!

Found this partial code that I used for my former website.

DEFAULT TAB
<a href="{$link}" style="margin-right: 3px;">	<div style="display: inline-block; padding: 3px 5px 3px 5px; border:  transparent; color: #E5E5E5; background-color: #374C61;">		{$name}	</div></a>

DEFAULT SELECTED TAB
<a href="{$link}" style="margin-right: 3px;">	<div style="display: inline-block; padding: 3px 5px 3px 5px; border:  transparent; color: #E5E5E5; background-color: #596E72;">		{$name}	</div></a>

This will give you some idea on how to get a certain TAB decoration and colorize the TABs.
Pages: 1 2