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··· 828384

Riliane's AvatarRiliane
Riliane's Avatar
👍 29
Posted 05/Nov/2016 17:38:45 (7 years ago)
Edited 25/Jan/2017 00:03:19 (7 years ago)
Guide To CSS
For Beginners and Experienced Coders
Welcome Pokefarmers! This is my guide to CSS coding. CSS stands for Cascading Style Sheets. In short, it's a coding language, just like BBCode, HTML, and many others. However, CSS is much more advanced than BBCode, and you can do much more with it. This guide will attempt an in-depth explanation of all the things you can do with CSS. There are many categories, which I try to keep fairly independent of each other, so you can read and learn the things you please. However, if something has a prerequisite, please read it first. Learning CSS is a semi-linear process in which you must grasp certain things before learning more advanced coding. While I consider myself fairly knowledgeable in CSS, there are, of course, things I don't know. I only know the things I've needed. Any information uses can contribute on topics I'm unfamiliar with is very much appreciated. Thank you for reading. Have fun coding, and feel free to ask for help! Template coded by Talkincamara. Free-to-use background by Gasara.
Noah's Ark
For all your breeding needs
 Avatar by Aryuma772 used with permission.
Riliane's AvatarRiliane
Riliane's Avatar
👍 15
Posted 05/Nov/2016 17:39:45 (7 years ago)
Edited 25/Jan/2017 00:03:08 (7 years ago)
Styleclass
Styleclass
Prerequisites
Introduction, CSS Basics
Styleclass is the most basic part of coding templates, but also the hardest to grasp in the beginning. Once you do, it'll become second nature to you. When you use styleclass in your posts, it will make things neater, easier, and shorter.

The Basics

This is an example of what a class looks like. .class1 {background: white; color: black; border: 1px solid black; height: 80px; width: 75%;} A class begins with a period, and the declaration block is enclosed in {squiggly brackets}. Inside the declaration block, you can put as many declarations as you want. A class can be named anything you wish. It is simply a label. Classes must be inside the [style]. You may only have one style per post, but you may have as many classes inside that style as you wish.

Styleclass

So, now that you have your classes, how do you use them? Well, this is what your entire post would look like if you were to make a basic template. [styleclass=base][styleclass=main]Text Here![/styleclass][/styleclass] [style].base {background: green; width: 80%; border: 3px solid black; padding: 1%;} .main {background: white; color: white; border: 2px dashed red; padding: 1%;}[/style] ...The result would look like this.
Text Here!
Remember, when typing the name of your styleclass, the case must be the same as the class! (In other words, if a letter is capital in the class, it must also be capitalized in the styleclass.)

Variables

Variables also go inside the [style]. They are used to represent a value. This is an example of a variable. @text: #204663; @text is the variable name. #204663 is the value. You can name your variable anything you want, and you can set the value to any valid value. So, we can do things like this. [styleclass=base][styleclass=main]Text Here![/styleclass][/styleclass] [style]@text: #204663; @borders: 2px solid black; .base {background: white; width: 80%; border: @borders; padding: 1%;} .main {background: white; color: @text; border: @borders; padding: 1%;}[/style]
Text Here!
The main advantage of variables is the ability to quickly and easily change an element. For example, let's say you wanted to change the borders of the template above to be dashed red instead of solid black. Well, just change the @borders: 2px solid black; to @borders: 2px dashed red. Simple right? This may not seem like much when you've only used that property in one or two places, but when you've used it in multiple places, it can make a lot of difference. For example, this template has each tab coded individually, and all of them use the same background. What if I wanted to change the background to something else? All I have to do is change the variable, and ta-da! All changed. Had I not used a variable, in order to change the background, I would have to go through the code for every single tab in order to change it!
Text
Text
Prerequisites
Styleclass

Text Color

color: red There are many 'basic' colors you can use (red, blue, green, black, gray, purple) but you can also use hex codes. These are much more specific and are very useful. I use this site for hex codes. It has a drop-down box at the top, which gives you a color picker. From there, you can copy the hex code for any color you can imagine! Hex codes are a 6-number/letter combination code preceded by a pound symbol (#). For example; #92b7ec is a shade of blue.

Text Alignment

text-align: center Text can be aligned to the left, right, and center.

Fonts (+ Web-Safe Fonts)

font-family: arial Fonts are basically styles of text. They change the look of letters and numbers. There are thousands of fonts, and many places to download them. However, I wouldn't recommend using fonts that are not web-safe. To explain what this means, everyone has fonts installed on their computer. But not everyone has the same fonts installed. If you use a font that someone else does not have, their browser will default it to something else. This can cause issues with how your template looks, as different fonts are different sizes. For a list of web-safe fonts, go here.

Bold, Italic, Underline, Etc.

Bold font-weight: bold;
Italic
font-style: italic;
Oblique
font-style: oblique;
Overline
text-decoration: overline
Underline
text-decoration: underline
Line-through
text-decoration: line-through

Text Shadow

text-shadow: 2px 2px 1px #ae514d, 1px 3px 1px #7c3835 This adds a shadow to your text that you can adjust.

URL's (Links)

There are many things you can do with links. This is the base code. a {color: red;} This is the basic one. It defines what all links will look like. a:visited {color: green} This changes the appearance of links if that the viewer has already visited. a:hover {color: blue;} If you use this, you can change the appearance of a link when it's hovered over. You can do a lot of things with this. Some ideas are text-shadow and letter-spacing.

Outlining Text

There are two methods to do this. I'll go over each one individually, and also explain how they can both be used in combination with each other to create unique effects.

Text Stroke

Example 1
-webkit-text-stroke: 3px #d0b0c8; color: white; font-size: 50pt;

Text-shadow

Example 2
color: white; font-size: 50pt text-shadow: 3px 3px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000;

Text-shadow & Text-stroke

Example 1
-webkit-text-stroke: 2px #d0b0c8; color: white; text-shadow: 3px 3px 0 #d0b0c8, -7px 5px 0 #000, 1px -1px 0 #d0b0c8, -1px 1px 0 #000, 1px 1px 0 #000; font-size: 50pt
Example 2
webkit-text-stroke: 3px #d0b0c8; color: white; font-size: 50pt; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
stuff to add (ignore this, notes for myself) overflow letter-spacing & word-spacing line-height text-indent text-transform (UC & lc) font-size
Background

Height & Width

text note to self: make sure to add info about padding and borders and outlines add max height/width info

Margins & Padding

text

Background Color

background-color: white This is very basic. It sets your background to one specific color. There are many 'basic' colors you can use (red, blue, green, black, gray, purple) but you can also use hex codes. These are much more specific and are very useful. I use this site for hex codes. It has a drop-down box at the top, which gives you a color picker. From there, you can copy the hex code for any color you can imagine! Hex codes are a 6-number/letter combination code preceded by a pound symbol (#). For example; #92b7ec is a shade of blue.
RGBA Background
background: rgba(255, 255, 255, 0.30); This is another code which uses RGBA format. The advantage of this one is you can set it to have transparency. This is good if you want part of what's behind the element to show through. For example, I've set the accordions to be white with a lot of transparency on this template. See how the background shows through it, but you can see that it's lighter? If you want to convert a hex code to RGBA, this site can help.

Gradient Backgrounds

Linear Gradients
background: linear-gradient(70deg, black, gray, black)
Linear gradients look like this.
You can change '70deg' to any number you'd like, and that will change the angle.
This is what a linear gradient set to a 50deg angle looks like.
You can also do linear gradients like this. background: linear-gradient(to right, black, gray, black) Want to make a linear gradient easily? Check out colorzilla.com and cssmatic.com.
Radial Gradients
background: radial-gradient(circle, black, gray, black)
Radial gradients look like this.
You can also change 'circle' to 'ellipse' to change the appearance.
You can use hex codes in place of basic color names. (See "Background Color" for more information.)

Background Clip

This is the same as background-origin, except background-origin is for images. background-clip: border-box This is default. This makes the background start at the top left corner of the border.
text
background-clip: padding-box The background starts at the top left corner of the padding.
text
background-clip: content-box This makes the background start at the top left corner of the content. (Basically, the padding will be around the background too.)
text

Background Images

background-image: url("http://i.imgur.com/YgSgEzt.jpg"); When using a background image and a large amount of text, make sure the image is tileable, unless you don't plan on having much text. Otherwise, it will look strange when the image repeats. For backgrounds you can use, check out the resources section.

Background Images

Background-size is for setting the size for background images. background-size: 80px 60px

Background Size

background-size: 80px 60px; Sets the size of the background. First value is width, second is height.

Background Repeat

By default, backgrounds will repeat vertically and horizontally. To change this, use the code below. background-repeat: repeat-x This will repeat the background only horizontally. background-repeat: repeat-6 This will repeat the background only vertically. background-repeat: no-repeat The background will not repeat at all.

Background Origin

This is for images only; background-clip for non-image backgrounds.
Backgrounds below were made by vitanica and are free-to-use.
background-origin: padding-box This is default. The background starts at the top left corner of the padding.
text
background-origin: border-box This makes the background start at the top left corner of the border.
text
background-origin: content box This makes the background start at the top left corner of the content.
text

Background Position

By default, background images start at the top left corner. The values are fairly self-explanitory, so I'll simply list them off. left top left center left bottom right top right center right bottom center top center center center bottom

Background Attachment

I've never used this, so I don't know much about it. background-attachment: scroll This is default. Background stays still and you can scroll up and down. background-attachment: fixed This makes the background stay on the screen in the same place, regardless of scrolling. Basically it follows you while scrolling. Fixed does weird things from my experience, so use with caution. background-attachment: local I have no idea what this does.

Background Blend Mode

background-blend-mode: normal I have no idea what this does. values are normal, multiply, screen, overlay, darken, lighten, color-dodge, saturation, color, luminosity.

Resources

Color Palettes

Colourlovers is one of the best sites for color palettes. Awwwards.com has a decent list of color palettes, with hex codes included, though you have to scroll quite a lot.

Background Images

Remember, always check the license of an image before you use it! Most of the sites I've linked below are to sites that allow you to use/edit as you wish (provided credit is given), but always make sure you're allowed to use an image before you use it! LostAndTaken is an amazing site with a variety of backgrounds. Subtlepatterns and Fbrushes have patterns you can use. Colourlovers has tons of patterns, and I would highly recommend them. Texturegen, Graphicmania, Texturepalace, Zingerbug, and Textureking have some decent textures you can use. Webgraphics is also good, but not all their textures are free. Tumblr can be a good resource. Vitanica has some nice, simple backgrounds. Deviantart's resources & stock images category can be good. However, it can be hard to find what you're looking for, and not all artists allow their work to be used off-site.
Border

Basic Borders

border: 3px solid black This is the basic way to create a border. You can change 3px to any number you'd like. You can code each border differently. border-left: 3px solid black; border-right: 3px solid white; border-top: 3px dashed red; border-bottom: 3px dashed blue; ...or each part separately. border-width: 3px; border-color: black; border-style: solid; You can even do each individual border separately! border-right-width: 3px; border-right-color: black; border-right-style: solid; border-left-width: 3px; border-left-color: black; border-left-style: solid; border-top-width: 3px; border-top-color: black; border-top-style: solid; border-bottom-width: 3px; border-bottom-color: black; border-bottom-style: solid; OR
border-width: 2px 4px 6px 8px; border-color: white red purple orange; border-style: dotted solid dashed double The values go clockwise; so top, right, bottom, left, in that order.

Border Styles

Border-style can be changed for each border. For example...
border-color: white; border-width: 3px; border-style: dashed double solid dotted;
This is a list of all the border styles and the name.
None
Hidden
A note on None and Hidden: they look the same, but with tables, you have to use hidden. If you try to use none, you'll end up with a border anyway.
Solid
Dashed
Dotted
Double
Groove
Ridge
Inset
Outset

Border Radius

border-radius: 5px;
Border-radius makes borders rounded. See? Rounded borders!
Even more rounded! The higher the border-radius, the more round the border is. However, you may need to set some extra padding. Otherwise the text will be on top of the border.
However, outlines do not comply with border-radius. Keep this in mind when adding outlines! (Note: See "Outline" section below.)
Box-shadow, however, can work for having a 'second border'. Give it a try! The code I used here is below. box-shadow: 0 0 1pt 3pt #a178b8

Gradient Border

This bit of code is rather advanced. Please do not attempt it if you are just starting to learn CSS. width: 60%; height: auto; padding: 6px 14px 2px 16px; border-top: 5px solid #d2ff52; border-bottom: 5px solid #91e842; background-position: 0 0, 100% 0; background-repeat: no-repeat; background-size: 5px 100%; background-color: white; color: #62b01b; background-image: linear-gradient(to bottom, #d2ff52 0%, #91e842 100%), linear-gradient(to bottom, #d2ff52 0%, #91e842 100%);
See how the border has a gradient?
A few things to note about this one; you will want the px number for the background-size to match the border size, as this will effect the width of the left & right borders. You will want the top border color set to the first color in the gradient. The bottom border should be set to the last color in the gradient. (See the example code above.)

Border Image

Text

Border Image Slice

border-image-slice: 20%; I've never used this.

Outline

outline: black dashed 2px; Outline is basically a border that outlines the actual border.
In this example, the border is solid brown and the outline is dashed pink.
Position
text
Cursor
While there is a way to set an image as a cursor with CSS, this is not allowed on PFQ, and therefore will not be discussed here. cursor: pointer This changes the appearance of the cursor. You can change 'pointer' to any of the following. (Mouse over the cursor names to view the cursors.)
alias
all-scroll
cell
col-resize
row-resize
copy
crosshair
n-resize
e-resize
ne-resize
nw-resize
help
none
not-allowed
progress
wait
text
vertical-text
zoom-in
zoom-out
Selectors
text
Images
to be added Image effects opacity filters
Accordions
text
Exp Bars
Progress Bar
.expbar {padding: 5px; background: #4b4c56; color: white; border: 2px solid black;} .expbar div {background: white; border-right: 2px solid black} .expbar span {color: white} {Explanation is WIP. I'll add to this later.}
Tables
Tables
Prerequisites
Introduction, CSS Basics, Styleclass
For this section, the prerequisites are important. Please master your understanding of these prerequisites before moving on to this section.
Basic Terms
■ td stands for table data. It's basically a cell. ■ th stands for table header. It's another kind of cell. ■ tr stands for table row. Each row contains one or more cells.

Tables

To explain this, I will first give you the whole code for modifying the appearance of tables. Then, I'll go through each section and explain what it affects. Please note that you must use styleclass to change the appearance of tables. You cannot do it with just regular CSS; therefore, all the codes below should be inside [style] tags.
This is a tdThis is a th
.bbcode_table {background: transparent; border: 1px solid hidden;} table {border: 4px solid black; padding: 4px; th, td {text-align: center; padding: 5px; border: 2px solid black; color: black;} th {background-color: #4b4c56;} td {background-color: white;}} .bbcode_table This section you will want to leave alone, exactly as I've set it. It ensures things will display properly if you change the borders or set border-collapse to separate. table This is the table as a whole. The border surrounding the outside of the table is affected by this. (Notice how my table has a thicker border around the outside than the border dividing the individual cells? That's because the table border is set to 4px, while the th, td border is set to 2px.) Now, one declaration I'd like to point out is margin: auto. If you use this here, it will center your tables. th, td Anything you want th and td to have in common goes here. For example, I want both to have the text centered, and a padding of 5px. I want both to have the same border of 2px solid black, and for both, I want the text color to be black. However, I want them to have different background colors, and that's where the next sections come in. th and td In these sections, you can put any changes you want unique to that cell type. For example, I set the th background to #4b4c56, and the td background to white. If you want td and th to look the same, then simply remove the th and td sections, leaving only th, td.

Border Collapse & Border Spacing

border-collapse: separate Border-collapse can be set to separate or collapse. By default, they are set to collapse, but if you change it to separate... border-collapse: collapse
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
border-collapse: separate
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
See the difference? Now, with a code from the "Tables" section from above, you can change the background if you wish. .bbcode_table {background: #d0b0c8; border: 1px solid hidden;}
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
Now, what if I want to change the spacing in between the cells? Easy! Just add this declaration to the table class. border-spacing: 10px 10px; The first number is horizontal, the second number is vertical. If you want both to be the same, you can just use one number.
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3

Hide Empty Cells

empty-cells: hide; By default, cells with nothing in them are supposed to be shown. You can hide them with the code above.

Multiple Table Styles

So you may have noticed that I have a lot of differently styled tables on one template. But how? The answer is simple: each of the tables I added has a class. Let me show you how it works. [styleclass=bluetable][table][tr][td]Row 1, Cell 1[/td][td]Row 1, Cell 2[/td][td]Row 1, Cell 3[/td][/tr] [tr][td]Row 2, Cell 1[/td][td]Row 2, Cell 2[/td][td]Row 2, Cell 3[/td][/tr][/table][/styleclass] [styleclass=purpletable][table][tr][td]Row 1, Cell 1[/td][td]Row 1, Cell 2[/td][td]Row 1, Cell 3[/td][/tr] [tr][td]Row 2, Cell 1[/td][td]Row 2, Cell 2[/td][td]Row 2, Cell 3[/td][/tr][/table][/styleclass] [style].bluetable .bbcode_table {background: #c4e0f9; border: 8px double #204663; border-radius: 15px;} .bluetable table {border: 1px hidden black; padding: 4px; border-collapse: separate; border-spacing: 10px 10px; th, td {padding: 5px; border: 2px solid #204663; text-align: center; background-color: #e9f4f4; color: black;}} .bluetable table td:nth-child(1) {border-radius: 10px;} .bluetable table td:nth-child(2) {border-radius: 10px;} .bluetable table td:nth-child(3) {border-radius: 10px;} .purpletable .bbcode_table {background: #d0b0c8; border: 1px solid hidden;} .purpletable table {border: 4px solid black; padding: 4px; border-collapse: separate; border-spacing: 5px 5px; th, td {padding: 5px; border: 2px solid black; text-align: center;} th {background-color: #4b4c56; color: black;} td {background-color: white; color: black;}}[/style]
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3

Free-To-Use Table Designs

This section will list off things I've made and the codes for them. You're free to use them, but please credit me if you all or part of my code. (Have a design you'd like to share? Let me know! I'll add it here, with credit to you, of course.)
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3

Code

.bbcode_table {background: #c4e0f9; border: 8px double #204663; border-radius: 15px;} table {border: 1px hidden black; padding: 4px; border-collapse: separate; border-spacing: 10px 10px; th, td {padding: 5px; border: 2px solid #204663; text-align: center; background-color: #e9f4f4; color: black;}} table td:nth-child(1) {border-radius: 10px;} table td:nth-child(2) {border-radius: 10px;} table td:nth-child(3) {border-radius: 10px;} */ If you plan on having more than 3 cells per row, just copy the table td:nth-child's and change the number. If you want th's to have a border-radius, too, copy and paste the table td:nth-child codes above and change the td's to th's. */
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
Background by jillbrew

Code

.bbcode_table {background-image: url("http://colourlovers.com.s3.amazonaws.com/images/patterns/634/634350.png"); border: 1px solid hidden;} table {border: 4px solid #cc635d; padding: 4px; border-collapse: separate; border-spacing: 5px 5px; th, td {padding: 5px; border: 2px dashed #cc635d; text-align: center;} th {background: rgba(255, 255, 255, 0.30); color: black;} td {background: rgba(255, 255, 255, 0.30); color: white; text-shadow: -1px 0px black, 0px 1px #9f4c47, 1px 0px black, 0px -1px #9f4c47; text-align: center; font-size: 12pt}}
Tooltips
text
Tabs
text
Animations
text
Other
text
CSS Basics
Prerequisites
Introduction
Basic CSS
To start, let's begin with this. [css=]text[/css] Inside these brackets, you will add declarations. (See "Basic Terms".} [css=background: white; color: black;]text[/css]
Here, we've made our background white, and our text color black.
Notice how each declaration ends with a semi-colon (;). This signals the end of the declaration. You must end every declaration like this.
Basic Terms
An element is anything you can see or click, such as an image, a link, text, a border, or just about anything on a webpage.
.base
class
{background
property
: white
value
; width: 100px
unit
; color: red;
declaration
}
The stuff inside the {squiggly brackets} is called the declaration block. If you're having trouble understanding this, please see the "styleclass" section of this guide.
Units
There are several units you can use in CSS. There many units, but I will only go into the two units you need. ■ px (pixels) ■ % (percent) The advantage to using px is more precision. However, to make a template mobile-friendly, you'll want to use % for some things.
To be added ---Animations animations delay transitions transformations @keyframes {does not work} ---Selectors ---Tables empty-cells: hide ---Accordions accordion back thing (radius etc issue) ---Tabs ---Cursor ---Tooltips tooltip positioning ---Other display visibility calc !important inspect element nth-child() and nth-of-type() clear clip user-select {all, none} user-modify {read-write, read-only, write-only} ----List list-style /* Commentswi */ ---Position left & right float position other things to add (decide where later) display box and inline block and etc
Template coded by Talkincamara. Free-to-use background by Gasara.
Riliane's AvatarRiliane
Riliane's Avatar
👍 0
Posted 05/Nov/2016 17:39:51 (7 years ago)
Edited 25/Jan/2017 00:03:36 (7 years ago)
Updates
13/Jan/2017 ■ Added Outlining Text (Text tab) 03/Jan/2017 ■ Added a bit on Progress Bars. 26/Nov/2016 ■ Added many things to Background tab. 25/Nov/2016 ■ Added many things to Border Tab ■ Added many things to Tables tab 24/Nov/2016 ■ Updated Basic CSS and Basic Terms. ■ Added Fonts + Web-Safe Fonts (Text tab) ■ Added Text Shadow (Text tab) ■ Added Background Color (Backgrounds tab) ■ Added Gradient Backgrounds (Backgrounds tab) ■ Completed the section on Cursors. Template coded by Talkincamara. Free-to-use background by Gasara.
Riliane's AvatarRiliane
Riliane's Avatar
👍 0
Posted 05/Nov/2016 17:39:56 (7 years ago)
Reserved
Riliane's AvatarRiliane
Riliane's Avatar
👍 0
Posted 05/Nov/2016 17:40:00 (7 years ago)
Reserved
flopsided's Avatarflopsided
flopsided's Avatar
👍 0
Posted 02/Jan/2017 19:40:48 (7 years ago)
Edited 02/Jan/2017 19:41:27 (7 years ago)
What is it called to try and put css text in a template like this? https://pokefarm.com/upload/MigJewel/okok.png Edit: was i supposed to post? oops.
i'll fix this signature up eventually <3 hi guyss
Riliane's AvatarRiliane
Riliane's Avatar
👍 0
Posted 02/Jan/2017 20:19:05 (7 years ago)
I don't understand the question, sorry ^^;
flopsided's Avatarflopsided
flopsided's Avatar
👍 0
Posted 02/Jan/2017 20:20:14 (7 years ago)

QUOTE originally posted by Talkincamara

I don't understand the question, sorry ^^;
I'm not good with css. But, here's an example:
How do you get the text in the template like this?
Energetic
Pichu breeding/hoarding, playing Transformice
Riliane's AvatarRiliane
Riliane's Avatar
👍 0
Posted 02/Jan/2017 20:24:17 (7 years ago)
Well generally when you have a template, you do it in three parts. The top, the middle, and the bottom are three seperate images.
flopsided's Avatarflopsided
flopsided's Avatar
👍 0
Posted 02/Jan/2017 20:26:38 (7 years ago)

QUOTE originally posted by Talkincamara

Well generally when you have a template, you do it in three parts. The top, the middle, and the bottom are three seperate images.
I get that, i just don't understand the coding/CSS for it. ^^'

Pages: 123··· 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