Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Guide to CSS (Beginner & Intermediate) [In Progress]

Forum Index > PokéFarm > Guides >

Pages: 123··· 6667686970··· 828384

StarWarsGirl's AvatarStarWarsGirl
StarWarsGirl's Avatar

QUOTE originally posted by Emily Jones

QUOTE originally posted by StarWarsGirl

Is it possible to use fonts from Google with styleclass? For example, let’s say I want to use Amatic SC. I tried this: [style] .font { font-family: amatic sc; } [/style] But it comes out like this:
The quick brown fox jumps over the lazy dog.
That is NOT what Amatic SC looks like. Help?
You have to download the font and open its file folders in order to use it. Make sure you can download the font you want for free and that you credit the source when you use it. ;)
How do I do that? I’m on my school iPad and probably can’t download anything, but I can do it on my computer later... I just don’t know how ;w;
Score: 0
× 5 / 150
Star's Stuff (Shop)
Mirzam's AvatarMirzam
Mirzam's Avatar
Downloading a font will make it work only on your device, not on other people's devices. I personally do not recommend using Google/etc fonts (stick to the default or the web safe set when possible), but if you must, then I talk about how to do it here. It is not really beginner-friendly and I'm not currently able to explain it further. Please keep in mind legibility guidelines when changing fonts.
DrWho's AvatarDrWho
DrWho's Avatar
@Tarashia I was writing up some steps with screenshots because I didn't know you had a post about it already :) If you want to include the screenies in your post feel free to.
@StarWarsGirl If you follow Tarashia's post you can use any font, but here's the code to copy and paste anyway:
Almost before we knew it, we had left the ground.

Code

[style] .font { font-family: 'Amatic SC', cursive; font-size: 30px; } /* latin */ @font-face { font-family: 'Amatic SC'; font-style: normal; font-weight: 400; font-display: swap; src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(https://fonts.gstatic.com/s/amaticsc/v15/TUZyzwprpvBS1izr_vOECuSf.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]
How to get any font you want: 0. Open the font you want in Google FOnts 1. Click 'Select this style' 2. Open the sidebar 3. Click 'Embed' 4. Copy the link (highlighted in the screenshot) and open it in a new tab 5. In the page that pops up, copy the section /*latin*/ @font-face { .... } 6. Use it in your CSS like this (the bold names must match) [sc]Hello![/sc] [style] div { font-family: 'Amatic SC', sans } /* latin */ @font-face { font-family: 'Amatic SC'; font-style: normal; /* skipped for brevity */ } [/style]
Avatar by Kaelwolfur. Sent from my PokéNav
Emily Jones's AvatarEmily Jones
Emily Jones's Avatar
I made this table a couple of days ago. Is there any way to to make it so that the credits at the bottom always stay in line with the right-most edge of the table, even if I change it? I've tried messing with the positioning of both the table and css, and I still can't figure out how to do it.

DP Price Chart Unchanged

1 DP = 10,000 CR = 10 GP = 2 ZC
EHP Shiny Albino Melan
1,280 10,000 CR/10 GP/2 ZC 20,000 CR/20 GP/4 ZC 200,000 CR/2,000 GP/400 ZC
2,560 20,000 CR/20 GP/4 ZC 40,000 CR/40 GP/8 ZC 400,000 CR/4,000 GP/800 ZC
3,840 30,000 CR/30 GP/6 ZC 60,000 CR/60 GP/ 12 ZC 600,000 CR/6,000 GP/ 1,200 ZC
5,120 40,000 CR/40 GP/8 ZC 80,000 CR/ 80 GP/ 16 ZC 800,000 CR/ 8,000 GP/ 1,600 ZC
6,400 50,000 CR/50 GP/ 10 ZC 100,000 CR/100 GP/20 ZC 1,000,000 CR/ 10,000 GP/2,000 ZC
7,680 60,000 CR/60 GP/ 12 ZC 120,000 CR/120 GP/24 ZC 1,200,000 CR /12,000 GP/2,400 ZC
8,960 70,000 CR/70 GP/ 14 ZC 140,000 CR/140 GP/28 ZC 1,400,000 CR/ 14,000 GP/2,800 ZC
10,240 80,000 CR/80 GP/ 16 ZC 160,000 CR/160 GP/32 ZC 1,600,600,000 CR/ 16,000 GP/3,200 ZC
20,480 160,000 CR/160 GP/32 ZC 320,000 CR/320 GP/ 64 ZC 3,200,000 CR/ 32,000 GP/6,400 ZC
30,720 240,000 CR/ 240 GP/48 ZC 480,000 CR/480 GP/96 ZC 4,800,000 CR/ 4,800 GP/9,600 ZC
Table made by Emily Jones

Chart Code

[centre][h2]DP Price Chart[/h2] 1 DP = 10,000 CR = 10 GP = 2 ZC[/centre] [table] [tr] [th]EHP[/th] [Th]Shiny[/th] [Th]Albino[/th] [Th]Melan[/th] [/tr] [tr] [td]1,280[/td] [td]10,000 CR/10 GP/ 2 ZC[/td] [Td]20,000 CR/20 GP/4 ZC[/td] [Td]200,000 CR/2,000 GP/400 ZC[/td] [/tr] [tr] [td]2,560[/td] [td]20,000 CR/20 GP/4 ZC[/td] [Td]40,000 CR/40 GP/8 ZC[/td] [Td]400,000 CR/4,000 GP/800 ZC[/td] [/tr] [tr] [td]3,840[/td] [td]30,000 CR/30 GP/6 ZC[/td] [Td]60,000 CR/60 GP/ 12 ZC[/td] [Td]600,000 CR/6,000 GP/ 1,200 ZC[/td] [/tr] [tr] [td]5,120[/td] [td]40,000 CR/40 GP/8 ZC[/td] [Td]80,000 CR/ 80 GP/ 16 ZC[/td] [Td]800,000 CR/ 8,000 GP/ 1,600 ZC[/td] [/tr] [tr] [td]6,400[/td] [td]50,000 CR/50 GP/ 10 ZC[/td] [Td]100,000 CR/100 GP/20 ZC[/td] [Td]1,000,000 CR/ 10,000 GP/2,000 ZC[/td] [/tr] [tr] [td]7,680[/td] [td]60,000 CR/60 GP/ 12 ZC[/td] [Td]120,000 CR/120 GP/24 ZC[/td] [Td]1,200,000 CR /12,000 GP/2,400 ZC[/td] [/tr] [tr] [td]8,960[/td] [td]70,000 CR/70 GP/ 14 ZC[/td] [Td]140,000 CR/140 GP/28 ZC[/td] [Td]1,400,000 CR/ 14,000 GP/2,800 ZC[/td] [/tr] [tr] [td]10,240[/td] [td]80,000 CR/80 GP/ 16 ZC[/td] [Td]160,000 CR/160 GP/32 ZC[/td] [Td]1,600,600,000 CR/ 16,000 GP/3,200 ZC[/td] [/tr] [tr] [td]20,480[/td] [td]160,000 CR/160 GP/32 ZC[/td] [Td]320,000 CR/320 GP/ 64 ZC[/td] [Td]3,200,000 CR/ 32,000 GP/6,400 ZC[/td] [/tr] [tr] [td]30,720[/td] [td]240,000 CR/ 240 GP/48 ZC[/td] [Td]480,000 CR/480 GP/96 ZC[/td] [Td]4,800,000 CR/ 4,800 GP/9,600 ZC[/td] [/tr] [/table] [css=margin-left: 435px; position:relative;bottom:20px;] [size=8]Table made by [url=https://pokefarm.com/user/Emily_Jones]Emily Jones[/url][/size][/css] [style] table { margin: 0px auto; border: 0px; position: static; top: 50%; left: 50%; } [/style]
This is what happens when I take a row off of it:

DP Price Chart-Changed

1 DP = 10,000 CR = 10 GP = 2 ZC
EHP Shiny Albino
1,280 10,000 CR/10 GP/2 ZC 20,000 CR/20 GP/4 ZC
2,560 20,000 CR/20 GP/4 ZC 40,000 CR/40 GP/8 ZC
3,840 30,000 CR/30 GP/6 ZC 60,000 CR/60 GP/ 12 ZC
5,120 40,000 CR/40 GP/8 ZC 80,000 CR/ 80 GP/ 16 ZC
6,400 50,000 CR/50 GP/ 10 ZC 100,000 CR/100 GP/20 ZC
7,680 60,000 CR/60 GP/ 12 ZC 120,000 CR/120 GP/24 ZC
8,960 70,000 CR/70 GP/ 14 ZC 140,000 CR/140 GP/28 ZC
10,240 80,000 CR/80 GP/ 16 ZC 160,000 CR/160 GP/32 ZC
20,480 160,000 CR/160 GP/32 ZC 320,000 CR/320 GP/ 64 ZC
30,720 240,000 CR/ 240 GP/48 ZC 480,000 CR/480 GP/96 ZC
Table made by Emily Jones
made by Suría
made by Chary
made by MochaFox
Credits!
Signature credits can be found in my About Me!
King Vesper's AvatarKing Vesper
King Vesper's Avatar
Hi, I created a new class inside your style code for your credit. As you can see, even when the table's width is reduced, the credit stays in place.

DP Price Chart

1 DP = 10,000 CR = 10 GP = 2 ZC
EHP Shiny Albino Melan
1,280 10,000 CR/10 GP/ 2 ZC 20,000 CR/20 GP/4 ZC 200,000 CR/2,000 GP/400 ZC
2,560 20,000 CR/20 GP/4 ZC 40,000 CR/40 GP/8 ZC 400,000 CR/4,000 GP/800 ZC
3,840 30,000 CR/30 GP/6 ZC 60,000 CR/60 GP/ 12 ZC 600,000 CR/6,000 GP/ 1,200 ZC
5,120 40,000 CR/40 GP/8 ZC 80,000 CR/ 80 GP/ 16 ZC 800,000 CR/ 8,000 GP/ 1,600 ZC
6,400 50,000 CR/50 GP/ 10 ZC 100,000 CR/100 GP/20 ZC 1,000,000 CR/ 10,000 GP/2,000 ZC
7,680 60,000 CR/60 GP/ 12 ZC 120,000 CR/120 GP/24 ZC 1,200,000 CR /12,000 GP/2,400 ZC
8,960 70,000 CR/70 GP/ 14 ZC 140,000 CR/140 GP/28 ZC 1,400,000 CR/ 14,000 GP/2,800 ZC
10,240 80,000 CR/80 GP/ 16 ZC 160,000 CR/160 GP/32 ZC 1,600,600,000 CR/ 16,000 GP/3,200 ZC
20,480 160,000 CR/160 GP/32 ZC 320,000 CR/320 GP/ 64 ZC 3,200,000 CR/ 32,000 GP/6,400 ZC
30,720 240,000 CR/ 240 GP/48 ZC 480,000 CR/480 GP/96 ZC 4,800,000 CR/ 4,800 GP/9,600 ZC
Table by Emily Jones
Click once to select all the code. (: Edit: If the container which holds the table (like a template/about me) has a width that is smaller than the table's width, the credit code will fail won't be aligned properly. So, essentially, make sure your table's width isn't larger whatever is holding it.
CODES:
[centre][h2]DP Price Chart[/h2] 1 DP = 10,000 CR = 10 GP = 2 ZC[/centre] [table] [tr] [th]EHP[/th] [Th]Shiny[/th] [Th]Albino[/th] [Th]Melan[/th] [/tr] [tr] [td]1,280[/td] [td]10,000 CR/10 GP/ 2 ZC[/td] [Td]20,000 CR/20 GP/4 ZC[/td] [Td]200,000 CR/2,000 GP/400 ZC[/td] [/tr] [tr] [td]2,560[/td] [td]20,000 CR/20 GP/4 ZC[/td] [Td]40,000 CR/40 GP/8 ZC[/td] [Td]400,000 CR/4,000 GP/800 ZC[/td] [/tr] [tr] [td]3,840[/td] [td]30,000 CR/30 GP/6 ZC[/td] [Td]60,000 CR/60 GP/ 12 ZC[/td] [Td]600,000 CR/6,000 GP/ 1,200 ZC[/td] [/tr] [tr] [td]5,120[/td] [td]40,000 CR/40 GP/8 ZC[/td] [Td]80,000 CR/ 80 GP/ 16 ZC[/td] [Td]800,000 CR/ 8,000 GP/ 1,600 ZC[/td] [/tr] [tr] [td]6,400[/td] [td]50,000 CR/50 GP/ 10 ZC[/td] [Td]100,000 CR/100 GP/20 ZC[/td] [Td]1,000,000 CR/ 10,000 GP/2,000 ZC[/td] [/tr] [tr] [td]7,680[/td] [td]60,000 CR/60 GP/ 12 ZC[/td] [Td]120,000 CR/120 GP/24 ZC[/td] [Td]1,200,000 CR /12,000 GP/2,400 ZC[/td] [/tr] [tr] [td]8,960[/td] [td]70,000 CR/70 GP/ 14 ZC[/td] [Td]140,000 CR/140 GP/28 ZC[/td] [Td]1,400,000 CR/ 14,000 GP/2,800 ZC[/td] [/tr] [tr] [td]10,240[/td] [td]80,000 CR/80 GP/ 16 ZC[/td] [Td]160,000 CR/160 GP/32 ZC[/td] [Td]1,600,600,000 CR/ 16,000 GP/3,200 ZC[/td] [/tr] [tr] [td]20,480[/td] [td]160,000 CR/160 GP/32 ZC[/td] [Td]320,000 CR/320 GP/ 64 ZC[/td] [Td]3,200,000 CR/ 32,000 GP/6,400 ZC[/td] [/tr] [tr] [td]30,720[/td] [td]240,000 CR/ 240 GP/48 ZC[/td] [Td]480,000 CR/480 GP/96 ZC[/td] [Td]4,800,000 CR/ 4,800 GP/9,600 ZC[/td] [/tr] [/table][sc=credit]Table by [url=https://pokefarm.com/user/Emily_Jones]Emily Jones[/url][/sc][style] table { margin: 0px auto; border: 0px; position: static; top: 50%; left: 50%; } .credit { width: 100%; display: inline-block; text-align: right; font-size: 8px; padding-top: .9vw; } [/style]
Emily Jones's AvatarEmily Jones
Emily Jones's Avatar
Thank you! I'll make note of that for the future ;)
Terabbit's AvatarTerabbit
Terabbit's Avatar
Hey so i have this css here used to hide all eggs i need it to hide season 7eggs (except minibbit) but now its hiding season 8. How can i adjust it? #tourneyshop #tournyinfo div:nth-of-type(12) { .shoplist>li { display: none; } .shoplist>li:nth-of-type(3) { display: table-row; } }
credit
Background drawn by AdimivA on twitter Gif created by JUSTICEBEETLE F2U & Icon code by Gumshoe
King Vesper's AvatarKing Vesper
King Vesper's Avatar

QUOTE originally posted by Terabbit

Hey so i have this css here used to hide all eggs i need it to hide season 7eggs (except minibbit) but now its hiding season 8. How can i adjust it? #tourneyshop #tournyinfo div:nth-of-type(12) .shoplist>li { display: none; } .shoplist>li:nth-of-type(3) { display: table-row; } }
Change the "12" to a "13" and the code should work.
StarWarsGirl's AvatarStarWarsGirl
StarWarsGirl's Avatar
I’m trying to set the background of my tabs to an image or a gradient. I’d prefer an image, but a gradient works fine, too. I can’t figure it out. Help?
veliona's Avatarveliona
veliona's Avatar

QUOTE originally posted by StarWarsGirl

I’m trying to set the background of my tabs to an image or a gradient. I’d prefer an image, but a gradient works fine, too. I can’t figure it out. Help?
li, li.tab-active { background: url('image here'); }
or
li, li.tab-active { background: linear-gradient(degrees [optional],color, color); }
Übercharm

Übercharm

Account Upgrade

(: 0)

An overpowered charm that, when activated, massively increases your chances of hatching Melanistic Pokémon for 28 days.

Sells for 2,000

Lv. 100 — Locked
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry
Cheri Berry (SPICY)
Chesto BerryChesto Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Dry food
SteelPsychic
Happiness 27%
Rash nature
avatar

Pages: 123··· 6667686970··· 828384

Cannot post: Please log in to post

© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page