(2019-07-01, 04:50 AM)WallBB Wrote: [ -> ] (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
Yes I am using MyTabs. If I need to send u forum link still, plz let me know and I will.
(2019-07-01, 04:53 AM)Serpius Wrote: [ -> ] (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.
Code looks like:
https://i.gyazo.com/9069e28fb78b25bd1edd...1df2ee.png
I am wondering how to make the 2 tabs stretch to fit, not really design. I can work with design, but no idea how to make it work with stretching them both out.
As far as the flex goes, what do I put in for TAB 1 and TAB 2? Isnt it supposed to be a variable?
(2019-07-01, 05:35 AM)makpaolo Wrote: [ -> ]Code looks like: https://i.gyazo.com/9069e28fb78b25bd1edd...1df2ee.png
I am wondering how to make the 2 tabs stretch to fit, not really design. I can work with design, but no idea how to make it work with stretching them both out.
As far as the flex goes, what do I put in for TAB 1 and TAB 2? Isnt it supposed to be a variable?
Disregard the "flex" code for MyTabs. It is not used.
padding: 3px 5px 3px 5px;
Use the 'padding' call to stretch out the TABs.
Follow this procedure:
Example: padding: 10px 5px 15px 20px;
top padding is 10px right padding is 5px bottom padding is 15px left padding is 20px
Experiment with different numbers until you get the desired effect.
<div style="display: flex">
<div style="flex-grow: 1">
<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>
</div>
<div style="flex-grow: 1">
<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>
</div>
</div>
(2019-07-01, 11:00 AM)Ashley1 Wrote: [ -> ]<div style="display: flex">
<div style="flex-grow: 1">
<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>
</div>
<div style="flex-grow: 1">
<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>
</div>
</div>
The code is incorrect.
You're using the same 'div style' for both tabs. That will screw up the MyTabs plugin.
In fact, there is no need for the 'DIV' call for the MyTabs plugin.
So which one is the correct code? I wish to edit my tabs as the OP stated.
(2019-08-13, 10:19 PM)Serpius Wrote: [ -> ] (2019-08-13, 10:11 PM)MrRobotV2 Wrote: [ -> ]So which one is the correct code? I wish to edit my tabs as the OP stated.
Try my method first.
Report back the results.
Sort of works, Still didn't figure it out how to format it.
Im not familiar with CSS/HTML.
(2019-08-14, 09:48 AM)MrRobotV2 Wrote: [ -> ] (2019-08-13, 10:19 PM)Serpius Wrote: [ -> ] (2019-08-13, 10:11 PM)MrRobotV2 Wrote: [ -> ]So which one is the correct code? I wish to edit my tabs as the OP stated.
Try my method first.
Report back the results.
Sort of works, Still didn't figure it out how to format it.
Im not familiar with CSS/HTML.
You must do it in this format.
First, you must define the Default Tab, then do the Default Selected Tab.
Formatting the tabs is done in the MyTabs configuration section. You can modify the padding, spacing, colors, font styles and so on.
You see the padding code shown in the code example below. It is very easy HTML coding that you can understand.
Go to this
WEBSITE to learn the basic HTML codes. CSS uses many of the same HTML codes that you see on that 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>
(2019-08-14, 11:29 AM)Serpius Wrote: [ -> ] (2019-08-14, 09:48 AM)MrRobotV2 Wrote: [ -> ] (2019-08-13, 10:19 PM)Serpius Wrote: [ -> ] (2019-08-13, 10:11 PM)MrRobotV2 Wrote: [ -> ]So which one is the correct code? I wish to edit my tabs as the OP stated.
Try my method first.
Report back the results.
Sort of works, Still didn't figure it out how to format it.
Im not familiar with CSS/HTML.
You must do it in this format.
First, you must define the Default Tab, then do the Default Selected Tab.
Formatting the tabs is done in the MyTabs configuration section. You can modify the padding, spacing, colors, font styles and so on.
You see the padding code shown in the code example below. It is very easy HTML coding that you can understand.
Go to this WEBSITE to learn the basic HTML codes. CSS uses many of the same HTML codes that you see on that 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>
Thank you, Will have some HTML classes then.
