Single post in Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >
Hi everyone ~
I'm having problems with the code for tabs. My vertical tabs always work out, but the horizontal tabs just don't want to work with me ;_;
I copied the code directly over from one of my other Post Background, so the code looks quite messy at the moment. I still need to edit the rest of the code, just wanted to sort the tabs out first.
I'm trying to get the tabs to line up with the side of my Post Backgrounds, and then for the text to run straight down (if that makes sense). At the moment the text runs straight down and then continues right under the tabs. x_x
Thank you in advance for any help x_x
Code
[img]https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Top.png[/img][css=background:url('https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Background.png'); background-repeat:repeat-y; background-size:100%; padding: 0% 15% 0% -20%; color: black;][center][font=century gothic][size=12]
[style] a:link { color: #7d4f9d; }
a:visited { color: #41195d; }
a:hover { color: #3fb9c3; letter-spacing: 5px; transition: all 1s; }
a:active { color: black; } [/style]
[style].tippy {
span.bbcode_tooltip {
border-bottom: 0.5px dotted black;
}
.tooltip_content {
background-color: #d1a4f1;
color: #41195d;
border-color: #41195d;
}
}[/style]
[style].tabley {
table {
margin: 0px auto;
border: 0px;
}
td {
border: 1.5px #143a3e solid;
background-color: #d1a4f1;
color: #41195d;
text-align: center;
}
th {
border: 0.5px black solid;
background-color: #7d4f9d;
color: #41195d;
text-align: center;
}
}[/style]
[style]
.panelly {
color: #7d4f9d!important;
background: hidden!important;
text-align: center !important;
.panel {
border: 0.25px solid black!important;
background-color: hidden !important;
text-align: center;
&>h3 {
border-bottom: 1.5px solid black !important;
color: #41195d!important;
background-color: #7d4f9d!important;
border-radius: 2px !important;
padding: 3px;
text-align: center;
a {
color: #41195d!important;
text-decoration: none !important;
}
a:hover {
color: #d1a4f1!important;
}
}
&>div {
color: #41195d!important;
background-color: #d1a4f1!important;
border: 0.5px solid #41195d !important;
border-radius: 2px !important;
padding: 3px;
text-align: center;
}
}
}
[/style]
[style]ul { background: none; box-shadow: none; }
li.tab-active { box-shadow: none; background: #97f0f8 ; color: #000; border-left: 0 solid #000; border-right: 0; border-top: 0; border-bottom: 0 dashed #000; border-radius: 0; padding: 1%; margin: 1% auto; flex: none; animation: none; text-align: center; vertical-align: center; }
li {background: #d1a4f1;}
li.tab-active { transition: all 500ms; font-weight: bold; background: #5c6c6d; animation: none; }
.tab, .tab-active { color: #000; background: none; border: 0px; border-bottom: 0 solid #000; margin: 1% 5% 1% 1%; padding: 2%; animation: fade 500ms; box-shadow: none;
li { padding: 2px; margin: 10%; display: inline-block; }li:active { background: #5c6c6d ; }}[/style]
[styleclass=tippy][styleclass=tabley][styleclass=panelly][color=#41195d][sc=tabbed_interface vertical]
[ul]
[li]Title 1[/li]
[li]Title 2[/li]
[li]Title 3[/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc]
Post Template made by Nephable ~[/sc][/color]
[/styleclass][/styleclass][/styleclass][/size][/font][/center][/css][img]https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Bottom.png[/img]
Avatar Credit 
Ice retype of Spoink and Grumpig, made by me