MyBB Community Forums
MyTabs - How to get style like this? - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Plugins (https://community.mybb.com/forum-73.html)
+---- Forum: Plugin Support (https://community.mybb.com/forum-72.html)
+---- Thread: MyTabs - How to get style like this? (/thread-223574.html)

Pages: 1 2


MyTabs - How to get style like this? - makpaolo - 06-23-2019

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


RE: MyTabs - How to get style like this? - Ashley1 - 06-23-2019

What code do have for the tabs?


RE: MyTabs - How to get style like this? - makpaolo - 06-23-2019

(06-23-2019, 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>



RE: MyTabs - How to get style like this? - Ashley1 - 06-23-2019

<div style="display: flex">
	<div style="flex-grow: 1">TAB 1</div>
	<div style="flex-grow: 1">TAB 2</div>
</div>	



RE: MyTabs - How to get style like this? - makpaolo - 06-23-2019

(06-23-2019, 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?


RE: MyTabs - How to get style like this? - Ashley1 - 06-23-2019

I don't know this plugin at all. But that layout will do what you want - it's flex.


RE: MyTabs - How to get style like this? - makpaolo - 06-23-2019

Anyone else think they know how to style it with mytabs?


RE: MyTabs - How to get style like this? - makpaolo - 07-01-2019

Still wondering if can get some help with this please!


RE: MyTabs - How to get style like this? - WallBB - 07-01-2019

(07-01-2019, 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
(06-23-2019, 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


RE: MyTabs - How to get style like this? - Serpius - 07-01-2019

(07-01-2019, 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.