Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides >
I don't know if this is a template or something, but I have a question. I've scanned your guide and...well...let's just say it is really complicated.
I still don't see how to change fonts.
I know there are many types of fonts, but I still don't know how to change my fonts...and...well...could you maybe help me with that?
(Sorry, my English's been a little rusty lately and things might come out weird)
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
Sells a variety of things!
Like this
[font=times new roman] Like this [/font]
Most of the basic fonts should work like this, I'm not 100% sure which ones that includes but you can find a list of basic fonts online and try them one by one until you like one :D
Unless someone knows and can explain it here XD
avatar creditsavatar is official Blizzard art
~PokemonGO:4154 0011 0852
216/460
216/460
I have a guide on how to import Google Fonts for use here.
If you are making a post template, I recommend that you don't change your main font. It can be hard to read a whole paragraph in certain fonts, and even if it is readable for you, it might be hard for someone else.
It's better to use fonts for things like section headers, where it's just a few words in the different font.
https://pokefarm.com/forum/post/6068992
Thank you for the help! I'm back again with another question...
I'm trying to make a template, and I have two images with text between the images. For some reason, the text leans towards the bottom image even though I didn't tell it to.
Image
Code
[sc=template]
[sc=topimage][img]https://pokefarm.com/upload/:JZR8/Screenshot_2023-05-14_8.11.15_AM.png[/img][/sc]
Testing...
[sc=bottomimage][img]https://pokefarm.com/upload/:JZR8/Screenshot_2023-05-14_10.48.58_AM.png[/img][/sc]
[/sc]
[style]
.template {
background-color: black;
}
.topimage {
width: 680px;
height: 300px;
margin-top: 0px;
float: left;
}
.bottomimage {
float: right;
}
[/style]
You're getting that because your top image is only 83px tall, but you've set it to be 300px tall. That's your biggest issue, but also I'm not sure float is the best approach for something like this. (If you have to fix an image's alignment, try using text-align first, it works a little different and won't have the negative effects of float)
Don't worry too much about the image sizing, if you leave them in the main flow they'll get auto-resized based on whether the user is on mobile or not. The trickiest thing is doing vertical text align without using a whole bunch of empty lines, but with flex even that's not a big deal :)
This template starts at a minimum of 300px tall + the height of the images, but stretches if you add enough content.
Also, I added in text color, and a link color just in case. You should always preview your template on both a light and dark skin, to make sure you didn't forget to set something, and your template is readable.
Code
[sc=template]
[sc=topimage][img]https://pokefarm.com/upload/:JZR8/Screenshot_2023-05-14_8.11.15_AM.png[/img][/sc]
[sc=content]Testing...[/sc]
[sc=bottomimage][img]https://pokefarm.com/upload/:JZR8/Screenshot_2023-05-14_10.48.58_AM.png[/img][/sc]
[/sc]
[style]
.template {
background-color: black;
color: #f7ed9c;
/* nudge text & images away from edge */
padding: 0 1em;
}
.template a {
/* link color */
color: white;
}
.content {
min-height: 300px;
display: flex;
align-items: center;
}
[/style]
Template demo
Testing...
Extra-long template demo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus purus, condimentum nec massa ac, consequat finibus urna. Fusce non ipsum dolor. Nam convallis commodo ipsum a molestie. Curabitur dictum mattis urna in varius. Curabitur tincidunt pharetra consectetur. Phasellus interdum libero eu lectus tempor, eu consequat mi elementum. Quisque sollicitudin eleifend enim a condimentum. Nam laoreet ligula in porta dapibus. Vestibulum in nulla sed felis tristique dictum sit amet sit amet felis. Aenean ac leo sit amet quam maximus imperdiet et a libero. Nunc quis accumsan libero. Aliquam ultricies velit eu lacus viverra, non auctor nisi dignissim. Sed blandit sem a erat ornare volutpat. Nullam elementum metus quis convallis blandit. Sed aliquam leo ut sagittis consequat.
Nam volutpat quam eu pretium imperdiet. Nunc lobortis odio nibh, eget vehicula urna mattis et. Nunc id nisl eget odio efficitur blandit vel ac eros. Curabitur mattis imperdiet magna in suscipit. Duis euismod orci in posuere convallis. Pellentesque ac libero eu urna mollis varius. Suspendisse quis ante magna.
Cras efficitur, odio eget faucibus rhoncus, metus magna dignissim elit, ut hendrerit massa ante ut arcu. Sed efficitur risus nunc, quis ornare tellus scelerisque volutpat. Nullam vulputate ut lacus non cursus. Nulla metus ex, fermentum et arcu sodales, tincidunt rutrum arcu. Morbi malesuada dui dolor, ut bibendum nulla malesuada vel. In aliquam feugiat mi, vitae porttitor urna laoreet sit amet. Duis finibus lectus quis lectus porta faucibus.
Maecenas dapibus enim nibh, eget rhoncus magna scelerisque non. Curabitur nisi lectus, mattis sit amet interdum eget, efficitur vitae mi. Quisque id sapien a lectus dictum mollis. Sed eu est id lectus tincidunt rhoncus. Donec lacinia et magna nec placerat. Nulla facilisi. Nunc vestibulum justo sed leo convallis, ac suscipit ipsum consectetur. In in velit dui.
Fusce ex velit, fringilla nec dui non, varius auctor libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas augue nulla, venenatis id libero nec, egestas lacinia lorem. Morbi vel consequat sapien. Phasellus non dictum felis. Fusce venenatis eu tortor a gravida. In ut sem lobortis, accumsan turpis sit amet, mollis metus. Duis venenatis lectus quam, quis pretium tellus suscipit in. Curabitur quis commodo libero. Aliquam condimentum ac orci in imperdiet. Phasellus eu eros quis orci vulputate aliquam. Donec vitae leo quis purus commodo commodo nec vitae elit. Aliquam eget nibh lectus. Duis in malesuada massa. Sed venenatis purus sed finibus condimentum.
I'm trying to change the color of the fill bar in a progress bar(you know, the filled, colored part of a bar) but it won't change. Help?
Code
.expbar {
background: none;
color: black;
border: 1px solid;
border-radius: 1px;
border-color: #FFEC50;
width: 70%;
box-shadow: none;
}
&>div {
color: #FFEC50;
}
QUOTE originally posted by ShootingStarRain
I'm trying to change the color of the fill bar in a progress bar(you know, the filled, colored part of a bar) but it won't change. Help?
Code
.expbar {
background: none;
color: black;
border: 1px solid;
border-radius: 1px;
border-color: #FFEC50;
width: 70%;
box-shadow: none;
}
&>div {
color: #FFEC50;
}
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis
| Avatar credits | ©
signature by emberlynn; official 1D fragrance commercial gifs
I tried making the lil' arrow things that appear that the end of the accordion stackboxes and the background inside my dropdown box turned back to default color when added the arrows.
Code
.template {
background-color: black;
}
a {
color: #FFFFFF
}
.topimage {
margin-top: 0px;
}
.bottomimage {
float: right;
}
.maintext {
color: #FFEC50;
font-family: 'Arvo', serif;
}
.panel h3>a>svg { color: #FFEC50; }
.panel {&>h3 {
background: black;border: 1px solid #FFEC50;color: black; border-radius: 1px;
> h3
{
> a
{
color: black;
}
border: 2px solid #FFEC50;
background: black;
color: black;
}
}
&> div
{
color: black;
a:link, a:visited
{
color: #FFFFFF;
}
}
}
Is there a spcific place in the Style code for hideboxes and similar for the glow around them? I have the border defined but the glow is still there. Here's an example of the code I'm using, you can see the glow on the outside of the box.
Style Code
@MainText= #470644;
@HideHeadBG=#831a90;
@HideHeadText=#9c64c5;
@HideHeadBlur= #7d6292;
@HideHeadSolid=#4e1156;
@HideBG=#e156d4;
@HideBlur=#c753bc;
@HideSolid=#903d88;
@Borders=#130416;
.panel {
&>h3 {
&>a {
color: @HideHeadText;
//text-shadow: 1px 5px @HideHeadBlur, 1px 2px 1px @HideHeadSolid;
}
background: @HideHeadBG;
border: solid 1px @Borders;
}
&>div {
color:@MainText;
background: @HideBG;
border: solid 1px @Borders;
// text-shadow: 1px 1px 5px @HideBlur, 1px 2px 1px @HideSolid
}
}
Wanted Shinies
Yamask
Galarian Yamask
Ferroseed
Rufflet
Bunnelby
Swirlix
Cutiefly
Passimian
Dhelmise
Indeedee M
Indeedee F
Meltan
Nidoran F
Burmy F(3)
Pumpkaboo (Small, Average, Large)
Quibbit(Magma)
Quibbit(Charged)
Salandit F
Illumise
Wanted Albinos
Pumpkaboo (Small)
Illumise
Galarian Yamask
QUOTE originally posted by LavenderTGhost
Is there a spcific place in the Style code for hideboxes and similar for the glow around them? I have the border defined but the glow is still there. Here's an example of the code I'm using, you can see the glow on the outside of the box.
code
box-shadow:none;
code implemented into your code
[style]@MainText= #470644;
@HideHeadBG=#831a90;
@HideHeadText=#9c64c5;
@HideHeadBlur= #7d6292;
@HideHeadSolid=#4e1156;
@HideBG=#e156d4;
@HideBlur=#c753bc;
@HideSolid=#903d88;
@Borders=#130416;
.panel { box-shadow:none;
&>h3 {
&>a {
color: @HideHeadText;
//text-shadow: 1px 5px @HideHeadBlur, 1px 2px 1px @HideHeadSolid;
}
background: @HideHeadBG;
border: solid 1px @Borders;
}
&>div {
color:@MainText;
background: @HideBG;
border: solid 1px @Borders;
// text-shadow: 1px 1px 5px @HideBlur, 1px 2px 1px @HideSolid
}
}[/style]
hide
yippee
- 🪪
- 📋
- 🔗
sapphire/they/23
Tournament Token (Ruby)
Event Item
(
: 0)
[LEGACY] A token earned from Weekly Tournaments Season 10 but it is too old to be valid.
Legacy items are old items that no longer serve a purpose and are only good for collecting.
Sells for 
10,000
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
MAXQuiet nature
290 eggs
Score: 2154
credits
credits
- Code @Neonyan
- Pkmnpanel @Mirzam+modified by @Neonyan
- Background+Tab Icons @Pokemon
- Pagedoll @pkspsapphire
- TR code LycanKai+Hakano Riku
Cannot post: Please log in to post