HomeLearning the basic CSS
Page 1 of 1
Learning the basic CSS
by Splytte April 19th 2009, 8:19 pm
| Learning the basic CSS |
Hello and welcome to this tutorial. The purpose of this tutorial is to learn you how to create and/or modify yourself the CSS of your forum. It's created for a phpBB2 version, but when you will have learned the basic points, you will be able to modify even another board. But let's begin immediatly ! Here is the organization of this tutorial : 1. CSS? What is it? 2. OK. But where is it? 3. How is the CSS organized? 3.1. Modifying an attribute 4. Basic values of CSS 5. Basic values of your forum 6. OK I've understood, but now I want to change something... 7. Recapitulative pictures 1. CSS? What is it? A CSS stylesheet is a file written at the same time than your site. In fact, it is very useful, because it enables you to write all the styles you want to put in your board in the same file. By modifying your unique CSS stylesheet, you can modify your whole site very quickly. Wihout CSS, you would have to modify each file from your template manually to get the same result. Programmers are very often lazy. And that's good ! 2. OK, but where is it? To access your CSS stylesheet, Forumotion made you the way simple. In fact you just need to go to your admin panel, and go to display-> colors. If needed, choose "yes" to the question "Deactivate the basic CSS", and click on the "save" button. Then when the page has reloaded, click on "See your forum basic CSS" and paste it into the white box called "CSS". Here is your basic forum CSS. Now, let's try to modify it ! 3. How is the CSS organized? The organization of CSS is very easy to understand. In fact, just imagine it as some boxes, with things in it. Every box represents a piece of your board, and every thing in the box represents an attribute of this piece. For example, the box "img" represent all the images of your board. In this box, you can find an attribute "border". By modifying it, you can choose to add a border to each image on your forum. Well of course, this example is useless, but it's for you to understand. Here is an example. To make a link to my example, the box here is ".bodyline", and the attributes are "background-color" and "border". A box can contain loads of attributes.
The attributes ALWAYS finish by a ";" so that the browser knos where the attribute stops. To illustrate my example, here is what the box "bodyline" represents. https://i.servimg.com/u/f86/13/66/78/75/sans-t37.jpg 3.1. Modifying an attribute. Let's at first modify the background-color. As the name means it, the background-color is the background-color of the bodyline. It's not interesting here. Let's modify the border. Here is the basic CSS code : border: 2px #6F0019 solid; 2px : The width of the border. #6F0019 : the hexadecimal code for the colour. solid : a solid line. But for your design, you prefer to have a black border of 5px, and dashed. Well it's easy, try this code : border: 5px black dashed; (click on the submit button to validate your changes). (you can use the real name of the color for basic colours like : blue, red, cyan, black, white, etc.). Here is the result : https://i.servimg.com/u/f86/13/66/78/75/sans-t38.jpg Awful, but that's not the point. Have you seen the change?  4. Basic values of CSS You will see in your stylesheet, there are some attributes that occur nearly for every box. That's because every box has it's own color, size, border, etc. Here are the most useful attributes you can use : 4.1. background-color: #FFA443; This represents the background color of the box. 4.2. background-image: url("https://i.servimg.com/u/f86/13/66/78/75/sans-t35.jpg"); This represents the background image of the box. You can add this to the code : background-repeat: repeat-x; This means the background will repeat horizontally. You can also use : repeat-y, no-repeat. If you don't put this attribute, the background will repeat horizontally and vertically. 4.3. border: solid #FF9F3B 0px; This modifies the border of the box. The explanation has already been discussed before. * you can modify only one side of the border bu using for example : border-top: solid #FF9F3B 0px; border-left: solid #FF9F3B 0px; This way, the bottom and right border won't be modified ! 4.4. width:80%; This is the width of the box. * "height" is the height of the box. 4.5. color: #ffffff; This is the font color used in the box. 4.6. padding: 2px; This represents the space between the border and the content of the box. * "margin" represents the space between the box and the rest of the page. 4.7. font attributes font-weight: bold; -> the font will be bold in the box. font-size : 12px; -> the font size will be 12px in the box. text-decoration: underline; -> the text will be underlined in the box. font-family: Verdana; -> the text in the box will be in "Verdana". These were the basic attributes. You can find on google for example more attributes to give more style to your boxes, but with only these, you can give a good look to your design. 5. Basic values of your forum The basic values of your CSS are in the "boxy" box. You can modify it to modify all your forum. Here is the body box of my board :
As you can see, my body box only enables me to modify my forum background-image, and the background color of the page. As you can see, I use this picture : https://i.servimg.com/u/f86/13/66/78/75/sans-t35.jpg for the background, that repeats only horizontally. Then I choose the background-color, that continues the page. This gives a nice effect of shade from the top of the board to the bottom. My body box is not very complete, but here is a body box more complete :
As you can see, you can modify what you want, and when you want it ! 6. OK I've understood, but now I want to change something... This is the biggest chapter of this tutorial. Indeed, to modify your board, you need to know what corresponds to what. You could learn by yourself by modifying something and see what is the result, but it takes long, and is not really easy. In this chapter, I will provide you pictures of the boxes, and their names, so that modifying them will be much more easy ! To have an example on how to modify an attribute, check point 3.1 ! Let's start slowly. I will at first show you which part of the CSS is really useful to modify. If you want more, just check google to get more infos !
The "a" box represents the links on your forum. a:active and a:visited represent the links already clicked by the user, and a:hover represent a link while the user's mouse is on it.
Already seen before, just re-read it !
Check the picture to see what is what : https://i.servimg.com/u/f86/13/66/78/75/sans-t39.jpg
The categories title, and the link in it (the "a" represent a link, as seen before).
The link you click to open a forum and begin to discuss.
Here is the picture that corresponds to this code : https://i.servimg.com/u/f86/13/66/78/75/sans-t40.jpg
This is to modify the code and quote boxes, in the post.
This is to modify the page copyright.
The mod and admin colors. The rest is just about the input buttons, forms etc. I don't advise you to modify them, because very often this make the forum unreadable because of contrasts problems. Just by modifying these boxes, you will give a good look to your board ! * If you need a precise CSS code modification, ask it to me by PM, and I will add it to the tutorial ! 7. Recapitulative pictures Here are some screenshots that show you which box modifies what. If you need more pictures, just ask by pm ! Index page : https://i.servimg.com/u/f86/13/66/78/75/sans-t42.jpg Forum Page : https://i.servimg.com/u/f86/13/66/78/75/sans-t43.jpg Post Page : https://i.servimg.com/u/f86/13/66/78/75/sans-t44.jpg I hope this tutorial will help you to understand how your CSS works. If you need more precisions on a point, or more CSS code to help you, don't hesitate to ask it by PM, and I will add it to the tutorial. |
| This tutorial was written by ~Splytte~. |
Splytte- Forumember
-
Posts : 753
Reputation : 18
Language : French, English, Dutch, Spanish, German, Japanese, Chinese (Beginner).
Location : Belgium
Similar topics» So you want to code ? - Learning Resources
» Some basic definitions (Legend)
» Basic Post Layout
» Basic Icon
» the basic structur
» Some basic definitions (Legend)
» Basic Post Layout
» Basic Icon
» the basic structur
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
Facebook
Twitter
Pinterest
Youtube
