Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides >
Can anyone tell me why this code isn't working in mobile view but does in regular view? (About me)
code
[styleclass=icon][/styleclass]
[centre][img]https://see.fontimg.com/api/renderfont4/519DV/eyJyIjoiZnMiLCJoIjo2NSwidyI6MTAwMCwiZnMiOjY1LCJmZ2MiOiIjMDhERkJFIiwiYmdjIjoiI0ZGRkZGRiIsInQiOjF9/R3J5bQ/better-grade.png[/img][/centre]
[Sc=peanuts][sc=tabbed_interface vertical][ul]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[/ul][
][sc=tab]Hi. I'm 5 hours behind server time. I usually am online from 11:30 - 17:00 server time pretty reliably except Sundays. Otherwise it's just when I can get online.
Journal: [url=https://pokefarm.com/forum/thread/309336/Lazy-Acres]Lazy Acres[/url]
Favorite type: [type=fire/V=17][type=electric/V=17]
Rus count: 43
[/sc][
][sc=tab][Centre][b][u]Current Hunt:[/u][/b][/centre]
17[img]https://pfq-static.com/img/pkmn/shiny.png/t=1400179603[/img]/22[img]https://pfq-static.com/img/pkmn/albino.png/t=1414662094[/img]/0[img]https://pfq-static.com/img/pkmn/melanistic.png/t=1435353274[/img]/1,650 [pkmn=Munna(S)][pkmn=Munna(A)][pkmn=Munna(M)][pkmn=Munna] Apr/30/21 - Current
*Regulars are free.
[/sc][
][sc=tab][Centre][b][u]UFT:[/u][/b][/centre]
[Inventory=fire gem][tip=Fire gem][item=fire gem][/tip]
[math][inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box][/math][tip=boxes][item=sinister box][/tip]
S/A Munna (ask)
[/sc][
][sc=tab][Centre][b][u]Favorites:[/u][/b][/centre]
[pkmnpanel=GtS2j][Pkmnpanel=GhPXb][pkmnpanel=zbtcY]
Pokemon panel code by [url=https://pokefarm.com/user/Yeah]Yeah[/url] in BBCode guide posts
[/sc][
][sc=tab]
Icon made by [url=https://pokefarm.com/user/Dr.Devorak]Dr.Devorak[/url] here [url=https://pokefarm.com/forum/thread/224420/Lf-Avatars-Cute-art/post/4666606]Art thread[/url]
- It's also my avatar
[/sc][
][/sc]
[Style]
Background: gray;
Border-radius: 8px;
Padding: 5px;
Font-size: 14px;
.icon {
width: 85px;
height: 85px;
background-size: 81px 81px;
background-image: url("https://pokefarm.com/upload/Grym/Art_made_for_me/Dr_Devorak/1561779349544.png");
border: rgba(255,255,255,0.8) 3px solid;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 8px;
top: 10px;
position: absolute;
left: 10px
}
Ul {
background: transparent;
}
Li {
Padding: 1px;
Border: 2px solid #0ef0c7;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-width: 1px 1px 1px 2px;
background: teal;
background: linear-gradient(top, #0ef0c7 50%, teal 100%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 gray;
text-shadow: 0 1px Black;
color: White;
Text-align: center;
Padding: 5px;
}
.tab {
padding: 10px;
Border: 1px solid teal;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-width: 1px 0px 0px 1px;
box-shadow: 0 1px 3px rgba(4, 4, 4, 4.4), inset 0 1px 0 Teal;
background: #0ef0c7;
color: black;
}
.tabbed_interface {
display: flex;
align-items: start;
&>ul {
flex-flow: column nowrap;
}
&>div {
margin: 0;
flex: 1 1 auto;
}
}
.party>div{
.name{
height:9px;
position:absolute;
width:100%;
top:-7px;
}
border:none;
background:none;
width:50px;
box-shadow:none;
height:105px;
margin:7px;
padding:7px;
left:85px;
>.extra,.taste,.expbar{display:none;}
>.pkmn:before{background:lavender;border-color:indigo;}
.action{
position:absolute;
left:85px;
top:65px;
width: 35px !important;
.berrybuttons[data-up="bitter"]>a[data-berry="rawst"], .berrybuttons[data-up="sweet"]>a[data-berry="pecha"], .berrybuttons[data-up="dry"]>a[data-berry="chesto"], .berrybuttons[data-up="spicy"]>a[data-berry="cheri"], .berrybuttons[data-up="sour"]>a[data-berry="aspear"], .berrybuttons[data-up="any"]>a[data-berry="aspear"] {
display: inline-block;
height: 40px;
}
.berrybuttons>a {display:none;}
.berrybuttons>a>img { margin-top: -20px; }
}
}
[/style][/sc]
0 
I’d say that’s cuz of vertical tabs, but it looks just fine on mobile so I’m a bit confused tbh
/22
/0
/1,650 
Apr/30/21 - Current
*Regulars are free.
27%
27%
27%
Pokemon panel code by Yeah in BBCode guide posts
- 🔳
- 🔳
- 🔳
- 🔳
- 🔳
Hi. I'm 5 hours behind server time. I usually am online from 11:30 - 17:00 server time pretty reliably except Sundays. Otherwise it's just when I can get online.
Journal: Lazy Acres
Favorite type: 
Rus count: 43
Rus count: 43
Current Hunt:
17/22/0/1,650 Apr/30/21 - Current
*Regulars are free.
UFT:
434Fire gem
25boxes
S/A Munna (ask)
Favorites:
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Adamant nature
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
27%Sassy nature
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Naughty nature
Icon made by Dr.Devorak here Art thread
- It's also my avatar
- about me
- collecting
- secrets
Yeah / He
Type race: 0209/500 
till mew hunt (buying at 100k credits each)
NEW ABOUT ME!!!! till mew hunt (buying at 100k credits each)SECRET TEXT MWAHHAHA
Ima edit this eventually, but for now es blank
wawwwww a fancy thingy!!!!
credits
Code @Colorful
Background from Pokemon Mystery Dungeon: Rescue Team DX
Profile picture by Cryst
Signature Picture by @crazyMissdream
Running Mew by @KitKatKutie2 | Shop
Ah. I'm on a tablet and for some reason switching to mobile view shows it very oddly. I'll screenshot....
scr shot
Desktop view:
Mobile view
Mobile view
Switch vertical to horizontal in tabbed_inteface. See if that fixes it
I think it's just my tablet then cause that made it 100x worse. It scrunched up to like 1/8th of an inch wide and showed two letters per line >.>
My tablet must not use mobile the same way as a phone. Will it be considered against the rules if it shows up fine on an actual phone or does the messed up view on mobile settings on my tablet mean I can't use it?
- 🔳
- 🔳
- 🔳
- 🔳
- 🔳
Hi. I'm 5 hours behind server time. I usually am online from 11:30 - 17:00 server time pretty reliably except Sundays. Otherwise it's just when I can get online.
Journal: Lazy Acres
Favorite type:
Rus count: 43
Rus count: 43
Current Hunt:
17/22/0/1,650 Apr/30/21 - Current
*Regulars are free.
UFT:
434Fire gem
25boxes
S/A Munna (ask)
Favorites:
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Adamant nature
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
27%Sassy nature
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Naughty nature
Icon made by Dr.Devorak here Art thread
- It's also my avatar
The code you added at the end
width:310px;
position:relative;
}
That completely fixed the problem on both views. Idk if I am just a bit dumb but I'm guessing that tells the rest of the code the size parameters for the about me box?
And i can try to screenshot the last issue with the horizontal but it's basically the same just the tabs are not as wide, meaning it's harder to see what's in them.
And i can try to screenshot the last issue with the horizontal but it's basically the same just the tabs are not as wide, meaning it's harder to see what's in them.
So you are saying this code below doesn’t work on tablets? That’s really odd.
Code
[styleclass=icon][/styleclass]
[centre][img]https://see.fontimg.com/api/renderfont4/519DV/eyJyIjoiZnMiLCJoIjo2NSwidyI6MTAwMCwiZnMiOjY1LCJmZ2MiOiIjMDhERkJFIiwiYmdjIjoiI0ZGRkZGRiIsInQiOjF9/R3J5bQ/better-grade.png[/img][/centre]
[Sc=peanuts][sc=tabbed_interface horizontal][ul]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[li][size=9]🔳[/size][/li]
[/ul][
][sc=tab]Hi. I'm 5 hours behind server time. I usually am online from 11:30 - 17:00 server time pretty reliably except Sundays. Otherwise it's just when I can get online.
Journal: [url=https://pokefarm.com/forum/thread/309336/Lazy-Acres]Lazy Acres[/url]
Favorite type: [type=fire/V=17][type=electric/V=17]
Rus count: 43
[/sc][
][sc=tab][Centre][b][u]Current Hunt:[/u][/b][/centre]
17[img]https://pfq-static.com/img/pkmn/shiny.png/t=1400179603[/img]/22[img]https://pfq-static.com/img/pkmn/albino.png/t=1414662094[/img]/0[img]https://pfq-static.com/img/pkmn/melanistic.png/t=1435353274[/img]/1,650 [pkmn=Munna(S)][pkmn=Munna(A)][pkmn=Munna(M)][pkmn=Munna] Apr/30/21 - Current
*Regulars are free.
[/sc][
][sc=tab][Centre][b][u]UFT:[/u][/b][/centre]
[Inventory=fire gem][tip=Fire gem][item=fire gem][/tip]
[math][inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box][/math][tip=boxes][item=sinister box][/tip]
S/A Munna (ask)
[/sc][
][sc=tab][Centre][b][u]Favorites:[/u][/b][/centre]
[pkmnpanel=GtS2j][Pkmnpanel=GhPXb][pkmnpanel=zbtcY]
Pokemon panel code by [url=https://pokefarm.com/user/Yeah]Yeah[/url] in BBCode guide posts
[/sc][
][sc=tab]
Icon made by [url=https://pokefarm.com/user/Dr.Devorak]Dr.Devorak[/url] here [url=https://pokefarm.com/forum/thread/224420/Lf-Avatars-Cute-art/post/4666606]Art thread[/url]
- It's also my avatar
[/sc][
][/sc]
[style]
Background: gray;
Border-radius: 8px;
Padding: 5px;
Font-size: 14px;
.icon {
width: 85px;
height: 85px;
background-size: 81px 81px;
background-image: url("https://pokefarm.com/upload/Grym/Art_made_for_me/Dr_Devorak/1561779349544.png");
border: rgba(255,255,255,0.8) 3px solid;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
border-radius: 8px;
top: 10px;
position: absolute;
left: 10px
}
Ul {
background: transparent;
}
Li {
Padding: 1px;
Border: 2px solid #0ef0c7;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-width: 1px 1px 1px 2px;
background: teal;
background: linear-gradient(top, #0ef0c7 50%, teal 100%);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 gray;
text-shadow: 0 1px Black;
color: White;
Text-align: center;
Padding: 5px;
}
.tab {
padding: 10px;
Border: 1px solid teal;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-width: 1px 0px 0px 1px;
box-shadow: 0 1px 3px rgba(4, 4, 4, 4.4), inset 0 1px 0 Teal;
background: #0ef0c7;
color: black;
}
.tabbed_interface {
display: flex;
align-items: start;
&>ul {
flex-flow: column nowrap;
}
&>div {
margin: 0;
flex: 1 1 auto;
}
}
.party{width:120px!important;}
.party>div{
.name{
height:9px;
position:absolute;
width:100%;
top:-7px;
}
border:none;
background:none;
width:50px;
box-shadow:none;
height:105px;
margin:7px;
padding:7px;
>.extra,.taste,.expbar{display:none;}
>.pkmn:before{background:lavender;border-color:indigo;}
.action{
position:absolute;
left:85px;
top:65px;
width: 35px !important;
.berrybuttons[data-up="bitter"]>a[data-berry="rawst"], .berrybuttons[data-up="sweet"]>a[data-berry="pecha"], .berrybuttons[data-up="dry"]>a[data-berry="chesto"], .berrybuttons[data-up="spicy"]>a[data-berry="cheri"], .berrybuttons[data-up="sour"]>a[data-berry="aspear"], .berrybuttons[data-up="any"]>a[data-berry="aspear"] {
display: inline-block;
height: 40px;
}
.berrybuttons>a {display:none;}
.berrybuttons>a>img { margin-top: -20px; }
}
}
[/style][/sc]
O.o that worked too. I have no idea what's going on but that code worked this time.
Hello! Can y'all help with a few things?
1. When I'm on the first tab, everything's kinda bunched in one line. How do I fox it so it's like how it is when you have any other tab highlighted?
2. if you look at the far right side to the thing, you see the image ends before the border does. How do I fix this?
3. The way the background works is that it starts at the top, and when the text goes down far enough it repeats the image, starting at the top again. Is it possible to make sure the bottom is at the bottom, and it repeats form the top? I hope that makes sense.
I would be really thankful for any help you can give me!
As it is now
Put a small greeting here!
- Tab 1
- Tab 2
- Tab 3
- Credits
Title 1
Put your contents here!Title 2
Put your contents here! So to show how the image repeats for one of my problems I'm going to make this tab really long so you can kinda see what I'm saying.Title 3
Put your contents here!Credits!!!
Template and images made by AllyCATisFuN.Code!
[style]
@white: white;
@black: black;
@blue: #0c385d;
h1 {
text-align: center;
font-size: 14px;
color: @white
}
.about {
color: @white;
background:url('https://i.ibb.co/JdzsyVP/Screenshot-2021-05-19-9-39-48-AM.png');
background-repeat:repeat-y;
background-size:100%;
border: 6px solid @blue;
border-radius: 16px;
padding: 30px;
text-align: center;}
.tabbed_interface{
display:inline-flex;
>ul{background: transparent;}
>ul>li{
background-color: @white;
color: @blue;
padding: 10px 5px;
margin: 10px 2px;
text-align: center;
border-radius: 10px;
font-size: 12px;
border: 2px solid @black;
box-shadow: none;}
>.tab{
background-color: @blue;
color: @white;
padding: 10px;
border: 2px solid @black;
width: 250%;}
.tab-active{
background-color: @blue;
color: @white;
padding: 10px;
border-radius: 10px;
font-size: 12px;
border: 2px solid @black;
box-shadow: none;}}
[/style]
[styleclass=about][center]Put a small greeting here![/center]
[sc=tabbed_interface horizontal]
[ul]
[li]Tab 1[/li]
[li]Tab 2[/li]
[li]Tab 3[/li]
[li]Credits[/li]
[/ul][sc=tab-active][
][h1]Title 1[/h1][
]Put your contents here![
][/sc][sc=tab][
][h1]Title 2[/h1][
]Put your contents here!
So to show how the image repeats for one of my problems I'm going to make this tab really long so you can kinda see what I'm saying.
[
][/sc][sc=tab][
][h1]Title 3[/h1][
]Put your contents here![
][/sc][sc=tab][
][h1]Credits!!![/h1]Template and images made by AllyCATisFuN.[/sc][/sc][/styleclass]
Hey! My name is Ally!
0 / 1,500Template made by me!
- Type Race
- Hypermode!
- About
- x
0 / 1,500I am trying to trade my way to a year's worth of Hypermode!
× 110 / 5,000
× 110 / 5,000Hello! I go by Ally, though I also respond to Cat.
I'm really excited to play with y'all, and I am more then ready to talk to people whenever! I also send gift baskets.
Cannot post: Please log in to post