Single post in Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >
I have been trying to make a template but horizontal tabbed interfaces are messing up, I can't seem to figure out why this occurs. Could anyone help me out? ^^
code
[style]
@header-background: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@header-txt-color: white;
@stroke-color: black;
@txt-box-bg: rgb(0,0,0,.80);
@txt-box-txt: #757575;
@tab-box-color: black;
@tab-txt-color: white;
@tab-active-color: #ca702c;
@credit-color: white;
@header-bg: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@header-txt-color: white;
@a-color: #ce2531;
@b-color: #59426c;
@h2-color: #363636;
@table-border: white;
@th-background: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@th-txt-color: white;
@th-border: black;
@td-background: #1C1C1C;
@td-border: #4D4D4D;
@td-txt-color: #999999;
@td-hover-background: #bf6723;
@td-hover-text: black;
@td-hover-border: #4b2a11;
@link-background: white;
@link-txt: black;
@link-hover-bg: transparent;
@link-hover-color: #ca702c;
@expbar-bg: #012B24;
@expbar-fill: linear-gradient(to right,#76B4AA,#0D4C41);
@tooltip-txt: white;
@tooltip-border: black;
@tooltip-bg: rgb(0,0,0,.80);
@tooltip-content-txt: white;
@display-header-bg: #458C80;
@display-header-txt: white;
@display-box-bg: white;
@display-box-txt: #858585;
@display-box-border: #59426c;
//------
@font-face{font-family:daisy;src:url('https://dl.dropboxusercontent.com/s/sj8j1947fw813sm/paperdaisy-demo.ttf?dl=0');}
.top {
display: inline-block;
width: 600px;
max-width: 100%;
img {
width: 100%;
}
}
.bottom {
display: inline-block;
width: 600px;
max-width: 100%;
img {
width: 100%;
}
}
.border {
border-radius: 55px;
border-color: black;
border-style: solid;
}
.bg{background-image:url(@background);
background-size:cover;
width:100%;
height:auto;}
.header{background-image:url(@header-background);
position:relative;
top:0px;
left:0px;
height:150px;
width:100%;
border-bottom:30px @tab-box-color solid;}
.headtxt{position:relative;
top:45px;
width:100%;
text-align:center;
font-family:daisy;
font-size:55px;
font-weight:bold;
color:@header-txt-color;
letter-spacing:1px;
text-transform:uppercase;}
.headtxt{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
div.tab,div.tab-active{position:relative;
margin-top:-2%;
margin-left:4.5%;
width:90%;
background-color:@txt-box-bg;
border:none;
box-shadow:none;
padding:5px;}
div.tab,div.tab-active{font-family:calibri;
font-size:14px;
color:@txt-box-txt;
letter-spacing:1px;
word-spacing:5px;
line-height:16px;}
.tabbed_interface {
border: 1px black dotted;}
ul{position:relative;
top:-32px;
left:0%;
height:33px;
width:100%;
background:transparent;
border:none;}
li{background:transparent;
border:none;
padding-top:10px;
text-align:center;}
li{font-family:consolas;
font-size:13px;
color:@tab-txt-color;
text-transform:uppercase;
font-weight:bold;
letter-spacing:1px;
transition:.6s ease-in-out;}
li.tab-active{color:@tab-active-color;
transition:.6s ease-in-out;}
.credit{position:relative;
float:right;
margin-bottom:5px;
margin-right:5px;}
.credit a{font-family:consolas;
font-size:10px;
color:@credit-color;
font-weight:bold;
text-decoration:none;}
.h1{display:block;
background-image:url(@header-bg);
padding-left:5px;
width:99%;
height:20px;
font-family:consolas;
font-size:14px;
color:@header-txt-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
word-spacing:5px;}
.h1{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
.a{display:inline;
font-family:verdana;
font-size:11px;
color:@a-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}
.b{display:inline;
font-family:verdana;
font-size:11px;
color:@b-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}
.h2{border-bottom:2px @h2-color solid;}
table{width:100%;
border:1px @table-border dotted;}
th{background-image:url(@th-background);
background-attachment:top left;
height:30px;
padding:3px;
vertical-align:middle;
text-align:center;
font-family:consolas;
font-size:12px;
color:@th-txt-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
border:1px @th-border solid;}
th{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
td{height:25px;
padding:3px;vertical-align:middle;
text-align:center;
background-color:@td-background;
font-family:calibri;
color:@td-txt-color;
border:1px @td-border dotted;
transition:.6s ease-in-out;}
td:hover{background-color:@td-hover-background;
color:@td-hover-text;
border:1px @td-hover-border solid;
transition:.6s ease-in-out;}
div.tab a,div.tab-active a{background-color:@link-background;
font-family:calibri;
font-size:12px;
color:@link-txt;
padding:3px;
margin:5px;
text-align:center;
text-decoration:none;
transition:.6s ease-in-out;}
div.tab a:hover,div.tab-active a:hover{background-color:@link-hover-bg;
color:@link-hover-color;
transition:.6s ease-in-out;}
.expbar{width:96%;
border-radius:10px;
background-color:@expbar-bg;
height:15px;
border:3px @expbar-bg solid;}
.expbar span{font-family:verdana;
font-size:10px;
color:white;
margin-top:-4px;
font-weight:bold;}
.expbar div{border-radius:10px;
background:@expbar-fill;}
.expbar img{display:block-inline;
width:15px;
height:15px;
margin-top:3px;}
span.bbcode_tooltip{font-family:calibri;
font-size:14px;
color:@tooltip-txt;
line-height:12px;
word-spacing:5px;
padding-bottom:2px;
border-bottom:1px @tooltip-border dashed;
margin:3px;}
.tooltip_content{background-color:@tooltip-bg;
font-family:consolas;
font-size:10px;
color:@tooltip-content-txt;
border-radius:0px;
border:none;
font-weight:bold;}
.panel{background-color:transparent;
box-shadow:none;
border:none;
border-radius:0px;}
.panel>h3,.panel>h3 a{background-image:url(@display-header-bg);
background-position:center right;
font-family:verdana;
font-size:13px;
color:@display-header-txt;
font-weight:bold;
letter-spacing:-1px;
text-align:left;
padding:3px;
margin:0px;
border-bottom:0px;
text-transform:uppercase;
webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
.panel>div{background-color:@display-box-bg;
font-family:consolas;
font-size:10px;
color:@display-box-txt;
border-left:1px @display-box-border dotted;
border-right:1px @display-box-border dotted;
border-bottom:1px @display-box-border dotted;}
[/style]
[sc=border][sc=top][img]https://i.ibb.co/wzHBzg1/3rksyD3b.png[/img][/sc][css=background:url('https://i.ibb.co/Fng5mbz/vhddj64y.png'); background-repeat:repeat-y; background-size:100%; padding: 0px 100px 0px 100px; color:black;]
TEXT HERE
[sc=credit][url=https://pokefarm.com/user/NightVisions101]CREDITS[/url][/sc]
[/css][sc=bottom][img]https://i.ibb.co/RSHR035/sZTdnJVb.png[/img][/sc][/sc]
Avatar drawn by me of Villain Deku, sprite made by Nightlore, Animated by AsteroidPizza39!! Hover
My Journal
Come and challenge me and my friend at The 5th Gym! My Sprite/Art shop
70% of the world thinks Warrior Cats is stupid. 25% say: "Who cares?". Repost if you are part of that 5% that would take a hard cover copy of Warrior Cats and slap the other people saying: "STARCLAN IS OUT FOR REVENGE!”
5th Heart badge
Click the sprite!
My Journal
Come and challenge me and my friend at The 5th Gym! My Sprite/Art shop