View Single Post
  #4    
Old June 20th, 2012, 01:44 PM
Squirrel's Avatar
Squirrel
This'll be a blast!
Community Supporter
 
Join Date: Sep 2011
Location: England
Age: 20
Gender: Male
Nature: Quirky
Clubs CSS Guide
Here's how to make a basic page layout using CSS. Anything in capital letters within the coding is stuff that you have to put in yourself and I'll explain what they mean further down the page. :D

First off, you need to know the tags you can use! There are two types of CSS tags available to use; [cd="CSS goes here!"]Thread contents here![/cd] and [css-div="CSS goes here!"]Thread contents here![/css-div]. Fundamentally they perform the same function, so it's up to you which you'd like to use. All of your CSS criteria is placed between the two " signs in the code where the text 'CSS goes here!' is. For this guide I'll be using [cd] tags throughout. c:

Code:
[cd="background-color:COLOUR; background-image:url('IMAGE URL'); width: WIDTHpx; height: HEIGHTpx; border: BORDERWIDTHpx BORDERSTYLE BORDERCOLOUR; padding: PADDINGpx;"]Content[/cd]
COLOUR: The colour you want for your background. Either type the name of the colour (eg background-color:red) or use a HEX code (eg background-color:#FFFF00). You can find HEX codes for the majority of colours on Google :D You don't need to include this if you're using an image as your background since the image covered it anyway.

IMAGE URL: If you're using an image as your background then this is where you need to place it. Just place the image's URL in the brackets and it'll automatically tile throughout the whole CSS box. If you're not using an image as your background then don't include this field.

WIDTH: How wide you want the CSS box to be. Put a number here and that's how wide the CSS box will be, measured in pixels. At standard I use 850px, but you'll soon get to grips with the different sizes available when you play around with the numbers.

HEIGHT: Similar to the width; just put in a number of pixels for how high you want the CSS box to be. However, if you leave it as "height: px" without placing a number, the box will automatically stretch to accommodate all the contents inside. I use this in all my threads since it's perfect when the thread is constantly increasing (eg by adding members to the list).

BORDERWIDTH: How thick you want the border to be. Once again measured in pixels and you'll get the hang of it after playing around with numbers.

BODERSTYLE: This determines how the border appears. For example "solid" will make the border a continuous rectangle, "dashed" will make the lines dashed, etc. Here's some examples of border combinations:

Spoiler:
Examples:
  • border-style:dotted solid double dashed;
    top border is dotted
    right border is solid
    bottom border is double
    left border is dashed
  • border-style:dotted solid double;
    top border is dotted
    right and left borders are solid
    bottom border is double
  • border-style:dotted solid;
    top and bottom borders are dotted
    right and left borders are solid
  • border-style:dotted;
    all four borders are dotted
Examples from w3schools.com.

BORDERCOLOUR: What colour you want the borders to be. Once again, use a colour name or a HEX code.

PADDING: How far in from the borders the text/content starts. Also measured in pixels, a high number for the padding will make your text start further into the page. I tend to use around 15 to 25px, but you'll find what numbers suit you as you play around with it.

So for example using the code from my Electric type club, this code:

Code:
[cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height: 300px; border:10px solid #000000; padding: 25px;"]Content[/cd]
Will become:

Spoiler:
Content!

Now if you're using a coloured background or an image background, it's unlikely that your text is going to show up clearly so you'll want to use text boxes to make up for this. To make a text box, just adapt the code above to make a smaller box that you can place the text in. It's standard not to use an image as the background to a text box since you'll have the same problem with the text. For example, a standard purple/black textbox could use this code:

Code:
[cd="background-color: purple; width: 650px; height: 200px; padding: 5px; border:5px solid black;"]Hi I'm a text box.[/cd]
Becoming:

Spoiler:
Hi I'm a text box.

Then you can put the text box code inside of the background's code and you'll end up with something looking like this:

Spoiler:
Hi I'm text box 1.


Hi I'm text box 2. I'm cooler.


Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll.


Having the code:

Code:
[cd="background-color:brown; background-image:url('http://www.my-iguru.com/ipad/assets/images/ipad-wallpapers/abstract/ipad-wallpaper-electric-blue.png'); width: 850px; height:px; border:10px solid #000000; padding: 25px;"][cd="background-color: purple; width: 650px; height:px; padding: 5px; border:5px solid white;"]Hi I'm text box 1.[/cd]

[cd="background-color: purple; width: 650px; height: 200px; padding: 5px; border:5px double black;"]Hi I'm text box 2. I'm cooler.[/cd]

[cd="background-color: purple; width: 650px; height: 200px; padding: 5px; border:5px solid #463745; overflow:auto"]Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll. Hi I'm text box 3 and I scroll.[/cd][/cd]
As you can see, the third text box introduced scrolling text. To do this, all you have to do is add the code "overflow: auto;" to your CSS, and your text box will now scroll when the text overflows.

It's also standard to center the CSS using [center][/center] tags since it looks a lot neater, so simply placing these tags around the whole post will align every text box and element of CSS to the center of the page.

I'm not sure what else you'd need to make a club with decent CSS, but if you can think of anything else then I'd be happy to help c: Just send me a PM with what you'd like help with or if you're still struggling to use CSS after reading this and I'll help you out best I can, plus I'll update the guide with the new info! Thanks in advanced :D
__________________

Last edited by Squirrel; December 9th, 2012 at 09:13 AM.