The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Creating div tag layout

View previous topic View next topic Go down

Creating div tag layout

Post by LilJur on August 6th 2009, 1:00 am

Creating div tag layout


Creating div tag layout (Templates only!)
Requirements
-PunBB or PhpBB2 forum
-Basic knowledge of CSS and HTML

When you want to get the max out of your forum you need to use PunBB or PhpBB2.

Why?
PunBB and PhpBB2 allowe us to edit templates. This allowes you to edit pretty much every single part.

But to make things easier you can also put div tags all over the place.

Div tags are probably one of the most used tags in html. It allowes you to give a certain part a background, align things and many more.

Today i will teach how to make a div tag for a layout, a background.

As you might have noticed in your templates you see alot things like
Code:
<div class="main">
When you delete all these div class tags you will get a forum with just some text, a background color and maybe some images

You can do this if you want to make your own layout, like Jalokim and me.
But there for you will need to know how to make your own div class tags.

First of all, you will need to create it
Second of all you will need to add it

To create it go to the CSS style page of your forum.
There might be some CSS in it already.

The CSS code we are gona add looks like this. You might put some extra stuff on it but thats not nessencary. This is the basic code you need.
Code:
.(Put a name here, doesnt matter what one)  {
   background:(Type in the background color, in hex (#rrbbgg);
   color:(Type in the font color you want);
   width:(Type in the width you want);
   height:(Type in the height you want);
   font-size:(Type in the font size you want);
}
Now you can add things like
Code:
   -moz-border-radius:
(CSS3 code is this one, not just CSS)
and stuff like that

But im gona go with the basic one for now

So you fill it in
Example:
Code:
.lol  {
   background:#FF2A00;
   color:#C5C5C5;
   width: 50%;
   height:30px;
   font-size:13px;
}

Oh my god, did you just made your own div layout?!
Yes you did.
Easy right?


What we are gona do now is adding it in your HTML
Thats really simple
This is the code we need
Code:
<div class="(name of your div tag in the CSS)>(content)</div>
Now go to the template or html page that you want it to have.
Like this in example
Code:
<div class="lol">This is a div layout ^^<br />
Olé!</div>

The result would be:
http://i608.photobucket.com/albums/tt169/Lil-Jur/divtag.png

some other things you can add in your CSS for the div tag:
Code:

   -moz-border-radius: 10px; (Round corners instead of sharp)
   -webkit-border-radius: 10px; (Round corners instead of sharp)
   border: 2px solid #000; (a border)
   padding: 10px 10px 10px 10px; (padding is the position of your div layout in the website: top-left-bottom-right)
   margin: 50px 70px 10px 10px (margin is the position of your content in the tag it self)
          box-shadow: 10px 10px 5px #888; (Shadow undernead the div tag, to give it a position it also needs padding)
And to make a background with opacity, dont use the normal background thing but use
          background: rgb(255, 0, 0) ; opacity: 0.2;




LilJur
Forumember

Male Posts : 212
Reputation : 8
Language : xml, css, html, hex, english and dutch

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum