Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides >
QUOTE originally posted by KatKoin
I need help with an about code. I can find the image code to change the Clefairy. I'd like to change to:
https://pokefarm.com/upload/KatKoin/Sprites_Pok_mon_of_course/IMG_0406.GIF
Id like to put the image in the place of Clefairy here:
https://pokefarm.com/upload/KatKoin/Sprites_Pok_mon_of_course/IMG_0406.GIFNo. 004a Floric
Fire Cat/Dog Pokémon
HT 2' 3"
WT 6.5 lb
- Dex
- Links
- Tab 4
Dex images unavailable
Dex entry unavailable
Click the Pokémon over the desired shop to go there!
The Koin Market
KatKoin's About Templates
Sprites With Katitude
Power Random!
The Koin Market
KatKoin's About Templates
Sprites With Katitude
Friend's shops
Power Random!Hover the 'monz to see their names and dex entries!
Alolan Charmander {WATER}
Unlike Charmander from any other region, this one can spray water up to ten yards!
Dex page empty
Code: Plz edit
[styleclass=wall][styleclass=banner][/styleclass][styleclass=main][styleclass=inner_left][styleclass=icon][/styleclass][/styleclass][
][styleclass=inner_right][styleclass=dexinfo]No. 004a Floric
Fire Cat/Dog Pokémon
HT 2' 3"
WT 6.5 lb
[/styleclass][styleclass=foot][sc=print] [/sc][/styleclass][/styleclass][/styleclass][
][styleclass=tabbed_interface horizontal][ul]
[li]Dex[/li]
[li]Links[/li]
[li][img]https://pokefarm.com/upload/KatKoin/Sprites_Pok_mon_of_course/IMG_1089.PNG[/img][/li]
[li]Tab 4[/li][/ul][
][sc=tab-active][i]Dex images unavailable
Dex entry unavailable[/i][/sc][
][sc=tab]Click the Pokémon over the desired shop to go there!
[url=http://pfq.link/~pJ3v][pkmn=keldeo][/url]
The Koin Market
[url=https://pokefarm.com/forum/thread/48702/KatKoin-s-About-Templates][pkmn=Phione][/URL]
KatKoin's About Templates
[url=https://pokefarm.com/forum/thread/55029/Sprites-With-Katitude][pkmn=mew][/url]
Sprites With Katitude
[display=Friend's shops][url=https://pokefarm.com/forum/thread/62212/Gabbigger-s-awesome-shop][pkmn=dragonite][/url]
Power Random![/display][hr][display=Comix!][url=https://pokefarm.com/comics/strip/417]The KatKoin Chronicals (Bronze Season) #1[/url][/display][display=BEST FRIENDS EVAH!]Gabbigger: [[url=https://pokefarm.com/user/Gabbigger]X[/url]]
Carsonthesmithy: [[url=https://pokefarm/user/Carsonthesmithy]X[/url]][/display][/sc][
][sc=tab]Hover the 'monz to see their names and dex entries!
[tip=Alolan Charmander {WATER}
Unlike Charmander from any other region, this one can spray water up to ten yards!][img]https://pokefarm.com/upload/KatKoin/IMG_0492.GIF[/img][/tip]
[/sc][
][sc=tab][i]Dex page empty[/i][/sc][
][/styleclass][styleclass=footer]Made by [url=http://pfq.link/Niall]Niall[/url], based on the Gen III Dex. [url=https://pokefarm.com/forum/thread/56995/niall-s-musical-freebie-thread]Free to use[/url].[/styleclass][/styleclass][style]
// ==================================
// What you can edit ;)
// ==================================
@GRA1col = #779d6f; // Line Color #1
@GRA2col = #497041; // Line Color #2
@BORDcol = #283840; // Global Border
@HEADcol = #a0a0a0; // Button Base Background
@BTTNcol = #4890b0; // Button Color
@BTACcol = #b0c8f0; // Button Color (clicked)
@BTXTcol = #000000; // Button Text color
@BSHAcol = rgba(0, 0, 0, 0.3); // Text Shadow
@BACKcol = #f8f8f8; // Card & Tab Background color
@TEXTcol = #000000; // Card & Tab Text color
@INNEcol = #d8d8d8; // Card Accent color
@DACCcol = #f8b800; // Tab Accent color
@LINKcol = #f8b800; // Links color
@url_background = "https://pldh.net/media/pokemon/gen3/rusa_action/035.gif";
@foot_ackground = "https://veekun.com/dex/media/pokemon/footprints/35.png";
@font_family = Arial, Helvetica Neue, Helvetica, sans-serif;
// ==================================
// Do not edit below here
// ==================================
.wall {
position: relative;
background: linear-gradient( to bottom, @GRA1col, @GRA1col 50%, @GRA2col, @GRA2col 50%);
background-size: 100% 8px;
font-size: 12px;
font-family: @font_family;
padding-bottom: 2px;
a { color: @LINKcol; }
.footer { font-size: 12px; text-align: center; background: @BACKcol; padding: 2px; margin: 4px; border: 2px solid @BORDcol; color: @TEXTcol; }
.banner { background: @HEADcol; height: 35px; width: 310px; margin-bottom: -35px; }
.icon { float: left; background: url(@url_background) no-repeat; min-height: 90px; max-height: 90px; width: 100%; overflow-y: hidden; background-position: center; text-align: center; padding-top: 0px; color: transparent; position: relative; z-index: 3; }
.inner_left { min-height: 94px; max-width: 40%; background: @INNEcol; margin: 3px 3px -90px 3px; border-radius: 5px; }
.inner_right { background: @INNEcol; width: 180px; height: 50px; border-radius: 5px; padding: 0px; margin: -4px 10px 0px 93px; position: absolute; }
.dexinfo { float: right; display: inline-block; text-align: left; height: 80px; margin-top: 10px; margin-left: 20px; min-width: 150px; overflow-y: hidden; display: inline-block; line-height: 20px; }
.foot { float: right; position: absolute; top: 57px; right: 0px; background-color: @INNEcol; padding: 5px; height: 24px; width: 24px; overflow: hidden; text-align: center; line-height: 24px; color: @INNEcol; border-radius: 100%; }
.print { background: url(@foot_ackground) no-repeat; background-position: top center; margin-top: 4px; }
.main { min-height: 90px; height: 90px; max-height: 90px; overflow-y: hidden; padding-bottom: 10px; color: @TEXTcol; font-size: 13px; background: @BACKcol; border: 2px solid @BORDcol; border-radius: 5px; border-bottom-right-radius: 25px; margin: 40px 10px 4px 10px; }
ul>li, li.tab-active { position: absolute; float: left; top: 0 !important; margin: 2%; width: 18%; overflow: hidden; max-height: 30px; padding: 1%; background: @BTTNcol; color: @BTXTcol; border: 2px solid @BORDcol; border-radius: 5px; text-align: center; font-size: 12px; text-transform: uppercase; font-weight: 700; text-shadow: 1px 1px 0 @BSHAcol; }
li.tab-active { background: @BTACcol; color: @BTXTcol; }
.tab, .tab-active { background: repeating-linear-gradient( to right, @DACCcol, @DACCcol 5%, @BACKcol 5%, @BACKcol 95.05%); border: 2px solid @BORDcol; border-radius: 5px; color: @TEXTcol; padding: 2% 8%; min-height: 5px; text-align: left; }
li:nth-of-type(1) { top: 0%; left: 2%; }
li:nth-of-type(2) { top: 0%; left: 26%; }
li:nth-of-type(3) { top: 0%; left: 50%; }
li:nth-of-type(4) { top: 0%; left: 74%; } }[/style]
Just as I read through this, I'll keep adding to this post. Probably won't need to much, though. Lol.
So far:
Under Text and Text Alignment, you can also justify your text, not only left, right, and center. Text-indent: if you want indented paragraphs. I use it occasionally, depending on how "professional" I want the text to look. Text-overflow: if the text is too long, cuts it off or even shows certan text or ellipsis (W3Schools Documentation. Vertical-align (W3Schools Documentation). White-space (W3Schools Documentation), some people might need white space preserved. Word-wrap (W3Schools Documentation), I use this always, with the exception of one template (wouldn't follow its design's inspiration correctly then) because it allows for a shorter post on occasion (but who really cares about that extra line it gives back except for me? :p).
Still under Text, maybe an explanation of the numbers for the text shadows? I know I was always confused of which is which. Font family can be a list of fonts in order first to last of which should be used in case a certain font is not installed on a computer. Font-size-adjust for editing the size no matter the font (W3Schools Documentation).
For your notes for later, text-transform can also have a value of small-caps.
Under Backgrounds, actually add in background-origin? Edit;; move background-clip near background-origin for less confusion and searching? Or else mention where to find it?
Background-size definition is inside of background-images and the background-size hide box below it.
Background-repeat for vertically should be repeat-y not repeat-6
Background-Blend-Mode: mention not supported by IE or Edge at all, each value gives a different effect to the background Play with background-blend-mode on W3Schools
Borders, border-image-slice messes with images as a border and how it's lined up.
There's also border-image-source to directly specify the url image for the border. W3Schools Documentation. All of it is basically useless, I believe.
Position was empty...
Cursors: default value which is the regular pointer was forgotten.
Selectors was empty...
- nth-child, nth-of-type(), first-child, last-child
^ Don't forget those when filling it out. Also, for things like nth-child(), you can put things like (3n + 2), where n is a counter, starts at two and every third is selected in this case.
Images: don't forget the clip property. Can be useful when you only want a portion of the picture displayed. Add float, clear. Filter property (that one is actually really neat for grey scale o.o).
Accordions: empty
EXP Bar: I'll actually be using this now so I can modify the colours in my templates, lol. I couldn't figure it out in two minutes, so I didn't deal with it. Oops. Explanation would help people who don't grasp things almost immediately like I do (heh, I'm just realllllly quick at picking up concepts. Annoys a lot of people).
Tables: Is the .bbcode_table actually ever necessary? Never used it and it never messed with how my tables have turned out. Mention float can be used to move it to a side and allow text to wrap around it?
Rest: empty
Lists: list-style, list-style-image, list-style-position, list-style-type;; For those who don't like the default circle for lists...
Don't recall seeing max/min height/width. At least min-width and min-height should be mentioned so that people can set a template to be at least x tall.
z-index would be important to mention. Helps with layering issues and tabs (maybe it should just go under tabs?).
Visibility: hidden vs display: none (v: block where it was still there, d: completely gone, with no trace of where it was)
Continue later. Going to bed, haha.
Edit;; Now done!
Buying Prisms @ 70ZC and BSDs @ 30ZC
Avatar by xaandiir for my use only
Were you talking to me? I don't really want that... I like the template as is
@LightBlood A lot of sections are empty, just means I haven't gotten to them yet ;P Thanks for the feedback though, feel free to edit your post if you want and I'll consider everything when I get around to adding/editing ^^
Avatar by aryuma772 Used with permission.
The ones that were empty were pretty much a selfnote for myself, so I know I didn't skip a tab, lol. And alright! I'll let you know when I'm finished looking through! If you want any help for any sections that are incomplete, just let me know. I'll be more than willing to assist. (I've played around with CSS for quite some time simply out of boredom, lol.)
KatKoin, I was not speaking to you within that post! Sorry if I confused you!
Edit;; ChimericalRequem, now completed going through it ^~^
Edit2;; Actually not done, heh. Hang on.
Edit3;; Now I'm definitely done. Lol. Added some other properties that might be good to mention, and I actually still forgot a few, but I'll add it here because I don't wanna go and edit that one again. Oops. Just read through. Keep in mind I'm only suggesting, not trying to force anything. Feel free to pick and choose what to actually add in! I won't be offended. (:
Last thing: @name{property: value;}
For example:
@width{width:100%;}
...
.table{width:@width;}
...
.entireCode{width:@width;}
This allows for a reference to be created so that everywhere you need the same value, you can have it reference @width instead. This way, if a value needs to be changed, it can be modified at one place and not everywhere it is used. It can be used to save colour values (@bodycolor{color:#333;}, @tablecolor{color:#000;}), widths, heights, font-families, etc.
Also, @media? Know if it works? Would help make templates more mobile-friendly too. (Especially with those backgrounds I always see. I fixed it on mine simply from using background-size: 100% auto; [made sure it can be seen on all skins] where I specify my background, but I've not seen many templates that are mobile friendly, honestly. The background stretches the page, or the thing is too wide, when you can easily just use width: 100%; to fix that one.) (W3Schools Documentation)
And, just learned this, but you can modify the Pokewalker. Just gonna quote this one because Raca's idea first, not mine :p
QUOTE originally posted by Duckbug
Well, Stylish works with the Walker, but then again so does just the regular ol' skin CSS, so it'd probably just make more sense to use that.
For example, one could make a Premier Ball Pokéwalker.
Now, I could totally use a user script extension to add more elements and make more types of Pokéwalkers by actually adding elements, butttt… the Pokéwalker is meant to be used on mobile devices, which don't take extensions. So anything that can't be done through skin CSS is essentially pointless…
But hey, if you want your Pokéwalker to look like a Premier Ball then slap this into you custom CSS and tada. :P
#background > rect:nth-child(2) {
fill: #ddd;
}
#background > line,
#background > rect:nth-child(4) {
stroke: #800000;
}
See it in action!
I go into LESS variables, I'm not sure what you're getting at?
@media does work, I've used it before :) I forgot to include that, I'll have to add that. Personally I don't really use it, since just doing my width in % works OK usually... But for some templates it's better to use @media.
As far as the Pokewalker... I don't think I'll go into that specifically, but I will go into how to edit skins. That section's going to be a massive pain.
Is that what they're called? Lol.
Yes, I got confirmation from Niet it works, however he mentioned using something in place of @media *goes in search of post* Okay, using a quote so I don't mess it up. Because someone there was slightly confused me especially, you use & for the reference of it. ^~^
Okay, maybe just add in how you can specifically edit it, perhaps?
And again, let me know if you would like help with some sections!
I didn't see a notif for the reply or I would have posted sooner. Sorry!
QUOTE originally posted by Niet
PFQ provides classes in place of media queries.
Use .mq4 &
Or .mq3 &
And so on down to mq1. These indicate thresholds measured in 320px "blocks".
Hi- You may have answered this before, and I'm not seeing it, but-
I've been trying to add a link to my 'About Me', but I want to change the text in the link. When clicked, it would take you to a multiprofile page with all of my VIPs (I have the link itself worked out), but I want it to say 'Click these folks too' instead of what it would say automatically. Google hasn't given an answer that actually worked, and I can't quite figure it out myself.
QUOTE originally posted by Ampenah
Hi- You may have answered this before, and I'm not seeing it, but-
I've been trying to add a link to my 'About Me', but I want to change the text in the link. When clicked, it would take you to a multiprofile page with all of my VIPs (I have the link itself worked out), but I want it to say 'Click these folks too' instead of what it would say automatically. Google hasn't given an answer that actually worked, and I can't quite figure it out myself.
・ • team ghost (may 2023) | score: 0 • ・
・ • generally looking for | avatar and signature code by me • ・
Cannot post: Please log in to post