Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
I was wondering if a hide box and display panel had different css? I'm working on a code and my hide boxes are styled but I added a display box and I couldn't get it to adopt the same css.
It works here!!! :0 idk why it isn't working in my code? Hmmm 🤔
Edit: Figured it out, had to do with the order in my style section
example
example
example
example
*pfp made by me & spinda is from official art*
Ren ❂ ×1,945 ❂ She/Her
QUOTE originally posted by Emberlynn
So something like this?
-snip-
scott | adult | extra silly
free templates
pkmn adoptables
love yourself or else i'll love you
creditsbackground: animation by Da Dou
coding: by me
im trying to switch up my journal codes and i cant figure out how to make side by side work again with the new one:
heres whats happening:
and heres what i had before
and heres what i had before
code im moving to
[style]
//Do not change anything besides the Title and Text without my (Gumshoe's) permission!
//This is a Forum Template, do not use it elsewhere!
[/style][
][sc=the][sc=title]Title[/sc][
][sc=textbox]text[/sc][
][sc=credit][pit=❁]F2U code by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
[url=https://www.rawpixel.com/image/2405332/free-illustration-png-black-and-gold-pattern-peony]Background[/url] edited by Gumshoe[/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@shadow: 5px;
@text:white;
@bg:black;
@bg2:#2e0a1a;
@bg3:#210813;
@link:#c7a260;
@linkhl:#fed081;
@bord:#9e804b;
@bordim:#78613b;
.the {
background-image:url("https://i.imgur.com/RGdNxE8.png");
background-color:@bg;
padding:10px;
padding-bottom:37px;
font-family: 'Bitter';
font-size:11pt;
div.tooltip_content {
background: @bg;
color: @text;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl; transition:.3s;}
border: solid 1px @bord;
font-size:11pt;
border-radius:0px;
}
.bbcode_tooltip {
border-bottom: 1px dotted @link;
}
}
.title {
font-size:25pt;
color:white;
text-align:right;
cursor:default;
font-family: 'Lobster';
text-shadow: 2px 0 1px black, -2px 0 1px black, 0 2px 1px black, 0 -2px 1px black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black;
float:right;
clear:left;
margin-right:3px;
position:relative;
z-index:9;
}
.textbox {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:36px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;}
.tabbed_interface>ul li {
text-align: center;
padding:3px;
margin: 4px 4px;
color:@link;
background:@bg3;
border: 1px solid @bordim;
cursor:default;
}
.tabbed_interface>ul>li.tab-active {
border-color:@bord;
color:@linkhl;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
display:inline-flex;
flex-direction: row;
margin-left:-2px;
}
.tabbed_interface>div {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:3px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;} }
.tabbed_interface>ul li {
cursor:default;
padding:1px 5px;
background:@bg3;
border:1px solid @bord;
margin:3px 3px;
min-width:50px;
}
.tabbed_interface>ul>li.tab-active {
background:@bg2;
color:@linkhl;
}
.tabbed_interface>ul {
background:none;
display:flex-inline;
flex-direction: inherit;
margin: 0px -3px;
}
.tabbed_interface>div {
margin-top:3px;
color:@text;
background:@bg;
box-shadow:none;
border:1px solid @bord;
padding:4px;
}
.panel {
background: @bg;
border-radius:0px;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @link;}
border: solid 1px @bord;
border-radius:0px;
background: @bg2;
color: @link;
text-align:left;
cursor:default;
}
> div {
color: @text;
a {color: @link;}
}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
border-radius:0px;
> div {
background: @bg;
border-right: solid 1px @bordim;
}
}
table {
border: solid 2px @bord;
}
table th {
border: solid 1px @bordim;
color: @link;
background: @bg2;
}
table td {
border: solid 1px @bordim;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
border-radius:0px;
color: @text;
border: 1px solid @bord;
box-shadow: none;
.action a[data-berry]:after {border: none;}
}
.action a[data-berry]:after {border: none;}
.berrybuttons > a {display: none;}
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background: none;
border:1px solid @link;
display:block;
position:absolute;
right:40px;
padding:0px 40px;
border-radius:0px;
}
hr {border: 1px solid @bord;}
}
.mq15 & .textbox {
.party > div {
width:86%;
margin-left: 0px;
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']
{right:21px;}
}
.party > div > .name {
position:absolute;
right:0px;
top:0px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:-10px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
}
.credit {
font-size:15pt;
margin-top:5px;
color:@link;
background:black;
position:absolute;
right:15px;
border-radius:0px;
border:1px solid @bord;
padding:1px 2px;
div.tooltip_content {
position:absolute;
bottom:-1px;
right:28px;
width:198px;
font-size:10pt;
text-align:right;
}
.bbcode_tooltip {border-bottom: none;}
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lobster/v27/neILzCirqoswsqX9zoKmMw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[/style]
code i had before
[styleclass=base][styleclass=main]
[sc=sidebyside][
][display=Index][
][table]
[tr][td]1) [tip=You are here!]Info[/tip][/td][/tr]
[tr][td]2) [url=https://pokefarm.com/forum/post/5016386]About[/url][/td][/tr]
[tr][td]3) [url=https://pokefarm.com/forum/post/5016390]Site Progress[/url][/td][/tr]
[tr][td]4) [url=https://pokefarm.com/forum/post/5016396]Useful Links[/url][/td][/tr]
[tr][td]5) [url=https://pokefarm.com/forum/post/5016397]Badge Progress[/url][/td][/tr]
[tr][td]6) [url=https://pokefarm.com/forum/post/5016401]Inventory[/url][/td][/tr]
[tr][td]7) [url=https://pokefarm.com/forum/post/5016402]Wishlist[/url][/td][/tr]
[tr][td]8) [url=https://pokefarm.com/forum/post/5016404]Hunts[/url][/td][/tr]
[tr][td]9) [url=https://pokefarm.com/forum/post/5016405]Babies[/url][/td][/tr]
[tr][td]10) [url=https://pokefarm.com/forum/post/5016408]Miasmadex[/url][/td][/tr]
[tr][td]11) [url=https://pokefarm.com/forum/post/5016411]Dex[/url][/td][/tr][/table][/display][
][display=Credits][
][table]
[tr][td][tip=item tables]HowlingCat[/tip][/td][/tr]
[tr][td][tip=forge and hunt tables]Jampharos[/tip][/td][/tr]
[tr][td][tip=bbcode help]Meu[/tip][/td][/tr]
[tr][td][tip=dex tables]Zico[/tip][/td][/tr][/table][/display]
[/sc]
[/styleclass]
[style]
.base {background: gold; width: 98%; border: 3px solid black; padding: 1%;}
.main {background: maroon; color: lightsteelblue; border: 2px dashed black; padding: 1%;}
a {color: black;}
.sidebyside{display:flex;border-radius 100px;}
.sidebyside>.panel{flex:1 0;margin-right:10px;margin-bottom:auto;border: black;}
table{width:100%;border-radius 10px;border:black;}
tr,td{border: none;padding:5px;text-align:center;font-size:12px;height:20px;}
li{margin-bottom:10px;}
//colour coding//
//editable//
@bkg: maroon;
@text: white;
@accent: gold;
.top {background: @accent;
padding:10px;
max-height:auto;
color:@bkg;
text-align:center;}
.middle {background: @bkg;
padding:10px;
width:93%px;
min-height:7%px;
color: @text;
text-align:center;}
.bottom {background: @accent;
padding:10px;
max-height:auto;
color: @bkg;
text-align:left;}
a {color: @accent;}
a:hover {letter-spacing: 2px; transition: all 1s; }
a:not(:hover){letter-spacing: 0px; transition: all 1s; }
.tooltip_content {border: 3px solid @accent;
background: @bkg;
min-width:1%;
width: fit-content;
color: @text;
font-size: 8;
padding: 5px; }
span.bbcode_tooltip {
border-bottom: 1px dotted #ff81c1;
}
.panel {background-color: maroon;
border: 1px solid black;
border-radius:5px;
box-shadow: none;
width: 75%;
margin: 0 auto;
&>h3{background: @accent;
border-bottom:1px solid @accent;
font-size:90%;
color: @bkg;
font-weight:bold;
text-align: center;
padding:5px;}
&>div{color: @text;
padding: 10px;}}
.expbar {padding: 5px;
background: @bkg;
color: @bkg;
border-radius: 0px;
width: 65%;
text-shadow:
1px 1px 0 @text,
-1px -1px 0 @text,
1px -1px 0 @text,
-1px 1px 0 @text,
1px 1px 0 @text;
border: 2px solid @accent;}
.expbar div {background: @accent;
border-right: 2px solid @accent}
.expbar span {color: @bkg;}
.bbcode_table {background: transparent;
border: 1px solid hidden;}
table {border: 4px solid @bkg;
padding: 4px;
border-collapse: separate;
th, td {text-align: center;
padding: 5px;
border-radius: 8px;
border: 2px solid @accent;
color: @text;}
th {background-color: @accent;
color: @bkg;}
td {background-color: @bkg;}}
table{margin: 0 auto;}
.tabbed_interface {border-collapse: separate;
&>ul {background: @bkg;
&>li {background: @accent;
color: black;
border: 1px solid @accent;
border-radius: 0px;
margin: 10px;
height: 15px;
font-size: 12px;
min-width: 15%;
padding: 5px 0px;
text-align: center;
color: @bkg;
&.tab-active {background: @bkg;
border: 1px solid @accent;
color: @text;}}}
.tab, .tab-active {background: @bkg;
color: @accent;
border: 1px solid @accent;
box-shadow: none;}}
hr{width: 80%;
height: 0.5px;
border-radius: 10px;
background: @accent;}
b,i{color: @accent;}
h1,h2{color: @accent;}
[/style][/styleclass]
|
| Buying:
| 
| 
hi! i think i fixed the problem, the newer one did not have "flexbox" which was present in the first one. highly recommend looking more into it like on w3schools, flexbox is super helpful with rows!
here's the preview i got to; (sorry if its messier / not intended this way, youre def free to mess with it more!)
and the code is here ~ (disclaimer: im very much a beginner, i just happen to have a bit of experience w flexbox!)
+ some notes:
margin in the .textbox > panel code is what separates the inner boxes, feel free to mess with that since i didnt know how you wanted it centered or anything! i hope this is helpful even a bit :'3
i stuffed the flexbox code into the .textbox css, you may have to make another version if you want it without the flexbox!! this was easiest for me to do
also sorry if this has been done already HAHA if it is feel free to ignore this!! (also love to see another umineko fan here aksdlkajda)
and the code is here ~ (disclaimer: im very much a beginner, i just happen to have a bit of experience w flexbox!)
+ some notes:
margin in the .textbox > panel code is what separates the inner boxes, feel free to mess with that since i didnt know how you wanted it centered or anything! i hope this is helpful even a bit :'3
i stuffed the flexbox code into the .textbox css, you may have to make another version if you want it without the flexbox!! this was easiest for me to do
also sorry if this has been done already HAHA if it is feel free to ignore this!! (also love to see another umineko fan here aksdlkajda)
code
[style]
//Do not change anything besides the Title and Text without my (Gumshoe's) permission!
//This is a Forum Template, do not use it elsewhere!
[/style][
][sc=the][sc=title]Title[/sc][sc=textbox][display=index]text text text[/display]
[
][display=credits]
info 2
text
more text to display![/display][/sc][
][sc=credit][pit=❁]F2U code by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
[url=https://www.rawpixel.com/image/2405332/free-illustration-png-black-and-gold-pattern-peony]Background[/url] edited by Gumshoe[/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@shadow: 5px;
@text:white;
@bg:black;
@bg2:#2e0a1a;
@bg3:#210813;
@link:#c7a260;
@linkhl:#fed081;
@bord:#9e804b;
@bordim:#78613b;
.textbox>.panel{flex: 1 0;
margin: 10px;
margin-top: 0px;
margin-bottom: 0px;
width: auto;
border: black;
min-height: 300px;
}
.the {
background-image:url("https://i.imgur.com/RGdNxE8.png");
background-color:@bg;
padding:10px;
padding-bottom:37px;
font-family: 'Bitter';
font-size:11pt;
div.tooltip_content {
background: @bg;
color: @text;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl; transition:.3s;}
border: solid 1px @bord;
font-size:11pt;
border-radius:0px;
}
.bbcode_tooltip {
border-bottom: 1px dotted @link;
}
}
.title {
font-size:25pt;
color:white;
text-align:right;
cursor:default;
font-family: 'Lobster';
text-shadow: 2px 0 1px black, -2px 0 1px black, 0 2px 1px black, 0 -2px 1px black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black;
float:right;
clear:left;
margin-right:3px;
position:relative;
z-index:9;
}
.textbox {
justify-content: space-between;
margin: auto;
position: relative;
display:flex;
flex-wrap: wrap;
width: 75%;
flex-direction: row;
border-radius 100px;
position: relative;
padding: -10%;
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding: 6%;
border: 4px double @bord;
margin-top:10%;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;}
.tabbed_interface>ul li {
text-align: center;
padding:3px;
margin: 4px 4px;
color:@link;
background:@bg3;
border: 1px solid @bordim;
cursor:default;
}
.tabbed_interface>ul>li.tab-active {
border-color:@bord;
color:@linkhl;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
display:inline-flex;
flex-direction: row;
margin-left:-2px;
}
.tabbed_interface>div {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:3px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;} }
.tabbed_interface>ul li {
cursor:default;
padding:1px 5px;
background:@bg3;
border:1px solid @bord;
margin:3px 3px;
min-width:50px;
}
.tabbed_interface>ul>li.tab-active {
background:@bg2;
color:@linkhl;
}
.tabbed_interface>ul {
background:none;
display:flex-inline;
flex-direction: inherit;
margin: 0px -3px;
}
.tabbed_interface>div {
margin-top:3px;
color:@text;
background:@bg;
box-shadow:none;
border:1px solid @bord;
padding:4px;
}
.panel {
background: @bg;
border-radius:0px;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @link;}
border: solid 1px @bord;
border-radius:0px;
background: @bg2;
color: @link;
text-align:left;
cursor:default;
}
> div {
color: @text;
a {color: @link;}
}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
border-radius:0px;
> div {
background: @bg;
border-right: solid 1px @bordim;
}
}
table {
border: solid 2px @bord;
}
table th {
border: solid 1px @bordim;
color: @link;
background: @bg2;
}
table td {
border: solid 1px @bordim;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
border-radius:0px;
color: @text;
border: 1px solid @bord;
box-shadow: none;
.action a[data-berry]:after {border: none;}
}
.action a[data-berry]:after {border: none;}
.berrybuttons > a {display: none;}
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background: none;
border:1px solid @link;
display:block;
position:absolute;
right:40px;
padding:0px 40px;
border-radius:0px;
}
hr {border: 1px solid @bord;}
}
.mq15 & .textbox {
.party > div {
width:86%;
margin-left: 0px;
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']
{right:21px;}
}
.party > div > .name {
position:absolute;
right:0px;
top:0px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:-10px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
}
.credit {
font-size:15pt;
margin-top:5px;
color:@link;
background:black;
position:absolute;
right:15px;
border-radius:0px;
border:1px solid @bord;
padding:1px 2px;
div.tooltip_content {
position:absolute;
bottom:-1px;
right:28px;
width:198px;
font-size:10pt;
text-align:right;
}
.bbcode_tooltip {border-bottom: none;}
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lobster/v27/neILzCirqoswsqX9zoKmMw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[/style]
QUOTE originally posted by enjushi
im trying to switch up my journal codes and i cant figure out how to make side by side work again with the new one:
heres whats happening:
and heres what i had before
and heres what i had before
code im moving to
[style]
//Do not change anything besides the Title and Text without my (Gumshoe's) permission!
//This is a Forum Template, do not use it elsewhere!
[/style][
][sc=the][sc=title]Title[/sc][
][sc=textbox]text[/sc][
][sc=credit][pit=❁]F2U code by [url=https://pokefarm.com/forum/thread/322214/Chicken-s-F2U-Templates]Gumshoe[/url]
[url=https://www.rawpixel.com/image/2405332/free-illustration-png-black-and-gold-pattern-peony]Background[/url] edited by Gumshoe[/pit][/sc][/sc][
][style]
//You are not allowed to change any of the code below without my (Gumshoe's) permission!
//----------------------------------------------------------//
@shadow: 5px;
@text:white;
@bg:black;
@bg2:#2e0a1a;
@bg3:#210813;
@link:#c7a260;
@linkhl:#fed081;
@bord:#9e804b;
@bordim:#78613b;
.the {
background-image:url("https://i.imgur.com/RGdNxE8.png");
background-color:@bg;
padding:10px;
padding-bottom:37px;
font-family: 'Bitter';
font-size:11pt;
div.tooltip_content {
background: @bg;
color: @text;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl; transition:.3s;}
border: solid 1px @bord;
font-size:11pt;
border-radius:0px;
}
.bbcode_tooltip {
border-bottom: 1px dotted @link;
}
}
.title {
font-size:25pt;
color:white;
text-align:right;
cursor:default;
font-family: 'Lobster';
text-shadow: 2px 0 1px black, -2px 0 1px black, 0 2px 1px black, 0 -2px 1px black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black, 0 0 @shadow black;
float:right;
clear:left;
margin-right:3px;
position:relative;
z-index:9;
}
.textbox {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:36px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;}
.tabbed_interface>ul li {
text-align: center;
padding:3px;
margin: 4px 4px;
color:@link;
background:@bg3;
border: 1px solid @bordim;
cursor:default;
}
.tabbed_interface>ul>li.tab-active {
border-color:@bord;
color:@linkhl;
background:@bg2;
}
.tabbed_interface>ul {
background:none;
display:inline-flex;
flex-direction: row;
margin-left:-2px;
}
.tabbed_interface>div {
box-shadow:none;
color:@text;
background:rgba(0,0,0,.6);
border-radius:0px;
padding:8px;
border: 4px double @bord;
margin-top:3px;
a {color:@link; transition:.3s;}
a:hover {color:@linkhl;transition:.3s;} }
.tabbed_interface>ul li {
cursor:default;
padding:1px 5px;
background:@bg3;
border:1px solid @bord;
margin:3px 3px;
min-width:50px;
}
.tabbed_interface>ul>li.tab-active {
background:@bg2;
color:@linkhl;
}
.tabbed_interface>ul {
background:none;
display:flex-inline;
flex-direction: inherit;
margin: 0px -3px;
}
.tabbed_interface>div {
margin-top:3px;
color:@text;
background:@bg;
box-shadow:none;
border:1px solid @bord;
padding:4px;
}
.panel {
background: @bg;
border-radius:0px;
border: solid 1px @bord;
color: @text;
box-shadow:none;
> h3 {
> a {color: @link;}
border: solid 1px @bord;
border-radius:0px;
background: @bg2;
color: @link;
text-align:left;
cursor:default;
}
> div {
color: @text;
a {color: @link;}
}
}
.expbar {
background: @bg2;
color: @text;
border: solid 1px @bord;
cursor:default;
border-radius:0px;
> div {
background: @bg;
border-right: solid 1px @bordim;
}
}
table {
border: solid 2px @bord;
}
table th {
border: solid 1px @bordim;
color: @link;
background: @bg2;
}
table td {
border: solid 1px @bordim;
background: @bg;
color: @text;
}
.party > div {
background: @bg;
border-radius:0px;
color: @text;
border: 1px solid @bord;
box-shadow: none;
.action a[data-berry]:after {border: none;}
}
.action a[data-berry]:after {border: none;}
.berrybuttons > a {display: none;}
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']{
background: none;
border:1px solid @link;
display:block;
position:absolute;
right:40px;
padding:0px 40px;
border-radius:0px;
}
hr {border: 1px solid @bord;}
}
.mq15 & .textbox {
.party > div {
width:86%;
margin-left: 0px;
.berrybuttons[data-up='sour'] > a[data-berry='aspear'],
.berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
.berrybuttons[data-up='dry'] > a[data-berry='chesto'],
.berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
.berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
.berrybuttons[data-up='any'] > a[data-berry='pecha']
{right:21px;}
}
.party > div > .name {
position:absolute;
right:0px;
top:0px;
letter-spacing:.5px;
}
.party > div > .action {
position: absolute;
right:1px;
bottom:30px;
}
.party > div > .extra > .nature {
position: absolute;
right:-10px;
bottom:5px;
}
.party > div > .expbar {
width:150px;
position:absolute;
top:15px;
right:10px;
}
}
.credit {
font-size:15pt;
margin-top:5px;
color:@link;
background:black;
position:absolute;
right:15px;
border-radius:0px;
border:1px solid @bord;
padding:1px 2px;
div.tooltip_content {
position:absolute;
bottom:-1px;
right:28px;
width:198px;
font-size:10pt;
text-align:right;
}
.bbcode_tooltip {border-bottom: none;}
}
/* latin */
@font-face {
font-family: 'Bitter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/bitter/v25/raxhHiqOu8IVPmnRc6SY1KXhnF_Y8fbfOLjOXQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/lobster/v27/neILzCirqoswsqX9zoKmMw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
[/style]
code i had before
[styleclass=base][styleclass=main]
[sc=sidebyside][
][display=Index][
][table]
[tr][td]1) [tip=You are here!]Info[/tip][/td][/tr]
[tr][td]2) [url=https://pokefarm.com/forum/post/5016386]About[/url][/td][/tr]
[tr][td]3) [url=https://pokefarm.com/forum/post/5016390]Site Progress[/url][/td][/tr]
[tr][td]4) [url=https://pokefarm.com/forum/post/5016396]Useful Links[/url][/td][/tr]
[tr][td]5) [url=https://pokefarm.com/forum/post/5016397]Badge Progress[/url][/td][/tr]
[tr][td]6) [url=https://pokefarm.com/forum/post/5016401]Inventory[/url][/td][/tr]
[tr][td]7) [url=https://pokefarm.com/forum/post/5016402]Wishlist[/url][/td][/tr]
[tr][td]8) [url=https://pokefarm.com/forum/post/5016404]Hunts[/url][/td][/tr]
[tr][td]9) [url=https://pokefarm.com/forum/post/5016405]Babies[/url][/td][/tr]
[tr][td]10) [url=https://pokefarm.com/forum/post/5016408]Miasmadex[/url][/td][/tr]
[tr][td]11) [url=https://pokefarm.com/forum/post/5016411]Dex[/url][/td][/tr][/table][/display][
][display=Credits][
][table]
[tr][td][tip=item tables]HowlingCat[/tip][/td][/tr]
[tr][td][tip=forge and hunt tables]Jampharos[/tip][/td][/tr]
[tr][td][tip=bbcode help]Meu[/tip][/td][/tr]
[tr][td][tip=dex tables]Zico[/tip][/td][/tr][/table][/display]
[/sc]
[/styleclass]
[style]
.base {background: gold; width: 98%; border: 3px solid black; padding: 1%;}
.main {background: maroon; color: lightsteelblue; border: 2px dashed black; padding: 1%;}
a {color: black;}
.sidebyside{display:flex;border-radius 100px;}
.sidebyside>.panel{flex:1 0;margin-right:10px;margin-bottom:auto;border: black;}
table{width:100%;border-radius 10px;border:black;}
tr,td{border: none;padding:5px;text-align:center;font-size:12px;height:20px;}
li{margin-bottom:10px;}
//colour coding//
//editable//
@bkg: maroon;
@text: white;
@accent: gold;
.top {background: @accent;
padding:10px;
max-height:auto;
color:@bkg;
text-align:center;}
.middle {background: @bkg;
padding:10px;
width:93%px;
min-height:7%px;
color: @text;
text-align:center;}
.bottom {background: @accent;
padding:10px;
max-height:auto;
color: @bkg;
text-align:left;}
a {color: @accent;}
a:hover {letter-spacing: 2px; transition: all 1s; }
a:not(:hover){letter-spacing: 0px; transition: all 1s; }
.tooltip_content {border: 3px solid @accent;
background: @bkg;
min-width:1%;
width: fit-content;
color: @text;
font-size: 8;
padding: 5px; }
span.bbcode_tooltip {
border-bottom: 1px dotted #ff81c1;
}
.panel {background-color: maroon;
border: 1px solid black;
border-radius:5px;
box-shadow: none;
width: 75%;
margin: 0 auto;
&>h3{background: @accent;
border-bottom:1px solid @accent;
font-size:90%;
color: @bkg;
font-weight:bold;
text-align: center;
padding:5px;}
&>div{color: @text;
padding: 10px;}}
.expbar {padding: 5px;
background: @bkg;
color: @bkg;
border-radius: 0px;
width: 65%;
text-shadow:
1px 1px 0 @text,
-1px -1px 0 @text,
1px -1px 0 @text,
-1px 1px 0 @text,
1px 1px 0 @text;
border: 2px solid @accent;}
.expbar div {background: @accent;
border-right: 2px solid @accent}
.expbar span {color: @bkg;}
.bbcode_table {background: transparent;
border: 1px solid hidden;}
table {border: 4px solid @bkg;
padding: 4px;
border-collapse: separate;
th, td {text-align: center;
padding: 5px;
border-radius: 8px;
border: 2px solid @accent;
color: @text;}
th {background-color: @accent;
color: @bkg;}
td {background-color: @bkg;}}
table{margin: 0 auto;}
.tabbed_interface {border-collapse: separate;
&>ul {background: @bkg;
&>li {background: @accent;
color: black;
border: 1px solid @accent;
border-radius: 0px;
margin: 10px;
height: 15px;
font-size: 12px;
min-width: 15%;
padding: 5px 0px;
text-align: center;
color: @bkg;
&.tab-active {background: @bkg;
border: 1px solid @accent;
color: @text;}}}
.tab, .tab-active {background: @bkg;
color: @accent;
border: 1px solid @accent;
box-shadow: none;}}
hr{width: 80%;
height: 0.5px;
border-radius: 10px;
background: @accent;}
b,i{color: @accent;}
h1,h2{color: @accent;}
[/style][/styleclass]
ahh thank you! (yes i was going to have ange as my user but it was taken :()
I'm trying to center all text and images both horizontally and vertically in each cell of a table. I didn't see it in the guide (though it's entirely possible I just missed it), so I used google and found this site. Unfortunately, when I add it to my coding it doesn't seem to affect anything... but I also have no idea what I'm doing.
Here is the post I'm trying to add it to.
Here is the code I'm using:
Code
[center][b]Eeveelution Collection[/b][/center]
[center][size=9][table]
[tr][th=10x1]Female Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2rYXZ][img]https://pfq.link/?2rYXZ=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2rYNg][img]https://pfq.link/?2rYNg=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Male Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2Drj8][img]https://pfq.link/?2Drj8=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Vaporeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?23Dd3][img]https://pfq.link/?23Dd3=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2PxDS][img]https://pfq.link/?2PxDS=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Jolteon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr][th=10x1]Flareon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Espeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Umbreon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2P7M2][img]https://pfq.link/?2P7M2=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Leafeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2cNlL][img]https://pfq.link/?2cNlL=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2DDCf][img]https://pfq.link/?2DDCf=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Glaceon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Sylveon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2d_LQ][img]https://pfq.link/?2d_LQ=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[/table][/size]
[style]
table {
margin:1px auto;
td {
width: 130px;
height: 20px;
}
}
[/style][/center]
avatar by hunbloom (permission)
27%
Water Gem
Gem
(
: 0)
A gem with an essence of water.
Sells for 
10
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
27%Rash nature
Edit;; Added the code under tables. So now everyone can see how to vertically align within a table.
This only works in anything with display set to table or in a table. Add vertical-align: middle; to the td block.
Eeveelution Collection
| Female Eevee | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Regular | Shiny | Albino | Melanistic | ||||||
 |
 |
 |
 |
||||||
| Male Eevee | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
 |
 |
|
|
||||||
| Vaporeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
 |
 |
 |
|
||||||
| Jolteon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Regular | Shiny | Albino | Melanistic | ||||||
| Flareon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Espeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Umbreon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
 |
|
|
||||||
| Leafeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
 |
 |
|
||||||
| Glaceon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Sylveon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
 |
|
|
||||||
Code
[center][b]Eeveelution Collection[/b][/center]
[center][size=9][table]
[tr][th=10x1]Female Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2rYXZ][img]https://pfq.link/?2rYXZ=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2rYNg][img]https://pfq.link/?2rYNg=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Male Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2Drj8][img]https://pfq.link/?2Drj8=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Vaporeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?23Dd3][img]https://pfq.link/?23Dd3=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2PxDS][img]https://pfq.link/?2PxDS=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Jolteon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr][th=10x1]Flareon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Espeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Umbreon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2P7M2][img]https://pfq.link/?2P7M2=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Leafeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2cNlL][img]https://pfq.link/?2cNlL=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2DDCf][img]https://pfq.link/?2DDCf=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Glaceon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Sylveon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2d_LQ][img]https://pfq.link/?2d_LQ=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[/table][/size]
[style]
table {
margin:1px auto;
td {
width: 130px;
height: 20px;
vertical-align: middle;
}
}
[/style][/center]
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
by Kaede
QUOTE originally posted by Aemilia
Edit;; Added the code under tables. So now everyone can see how to vertically align within a table.
This only works in anything with display set to table or in a table. Add vertical-align: middle; to the td block.
Long Post
Eeveelution Collection
| Female Eevee | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Male Eevee | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Vaporeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Jolteon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Regular | Shiny | Albino | Melanistic | ||||||
| Flareon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Espeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Umbreon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Leafeon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Glaceon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
| Sylveon | |||||||||
| Regular | Shiny | Albino | Melanistic | ||||||
|
|
|
|
||||||
Code
[center][b]Eeveelution Collection[/b][/center]
[center][size=9][table]
[tr][th=10x1]Female Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2rYXZ][img]https://pfq.link/?2rYXZ=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2rYNg][img]https://pfq.link/?2rYNg=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Male Eevee[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][url=https://pfq.link/?2Drj8][img]https://pfq.link/?2Drj8=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Vaporeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?23Dd3][img]https://pfq.link/?23Dd3=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2PxDS][img]https://pfq.link/?2PxDS=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Jolteon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr][th=10x1]Flareon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Espeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Umbreon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2P7M2][img]https://pfq.link/?2P7M2=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Leafeon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2cNlL][img]https://pfq.link/?2cNlL=platform.png[/img][/url][/td]
[td][url=https://pfq.link/?2DDCf][img]https://pfq.link/?2DDCf=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Glaceon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/x/x/z.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[tr][th=10x1]Sylveon[/th][/tr]
[tr]
[th]Regular[/th]
[th]Shiny[/th]
[th]Albino[/th]
[th]Melanistic[/th]
[/tr]
[tr]
[td][img]https://pfq-static.com/img/pkmn/x/x/y.png[/img][/td]
[td][url=https://pfq.link/?2d_LQ][img]https://pfq.link/?2d_LQ=platform.png[/img][/url][/td]
[td][img]https://pfq-static.com/img/pkmn/7/g/r/v.png[/img][/td]
[td][img]https://pfq-static.com/img/pkmn/w/1/8/j.png[/img][/td]
[/tr]
[/table][/size]
[style]
table {
margin:1px auto;
td {
width: 130px;
height: 20px;
vertical-align: middle;
}
}
[/style][/center]
does anyone know how to make the signature padding so it doesn't have the extra spaces at the top and bottom?
It's likely some margin somewhere in your code, can you post it so I can fiddle with it?
Cannot post: Please log in to post