[How To] Simple border around forum - Part I

[Semi_Deus]

The making of borders around your forum is a thing that can be done in many different ways.
in this tutorial i will try to explain it to you for Prosilver.
This tutorial will explain how you can add a sharp cornered border around your forum. it only needs a few adjustements in the CSS.

First you need to change the width of you forum?
Here again the explenaition for Prosilver on how to change the width at first.

Go to: adminpanel > styles > theme's > prosilver > edit

FIND:

Code: Select all

    #wrap { 
       padding: 0 20px; 
       min-width: 650px; 
    } 

REPLACE WITH:

Code: Select all

    #wrap { 
       padding: 0 20px; 
       min-width: 650px; 
       width: 1000px; 
       margin: 0 auto; 
    } 

FIND & REMOVE:

Code: Select all

    * html #search-box { 
       margin-right: 35px; 
    } 
     
    * html .rtl #search-box { 
       margin-right: 0; 
       margin-left: 35px; 
    }

If done correctly, your forum is now 1000 pixels wide, this can be altered to your own wishes.


No we still want that border around our forum, to do that, try this.

Go to: adminpanel > styles > theme's > prosilver > edit

FIND #wrap. (CTRL+F comes in handy)

ADD to #wrap:

Code: Select all

        border-left: 2px solid #777777;
        border-top: 2px solid #777777;
        border-bottom: 2px solid #777777;
        border-right: 2px solid #777777;
        background-color: #FFFFFF;

Now im changing the background of the body so i can get a nice contrast.

FIND: html, body.

REPLACE with:

Code: Select all

html, body {
   color: #536482;
   background-color: #B9B9B9;
}

If done correctly your forum will look like this now:


Im not responsible for ruined forums/styles
I Hope that the plan comes together.




When you scaled the width of your forum down, you may be getting trouble with the words: Topics, Posts, Last post,.
They wil overwrite each other, and it makes a nasty look.
But this is only when you made your forum really tight, or when you have for example a Dutch translation on it, in Dutch the words are: Onderwerpen, Berichten, Laatste bericht, so thats alot longer. here's the thing you should do when encountering this problem:

Go to: adminpanel > styles > theme's > prosilver > edit
FIND:

Code: Select all

ul.topiclist dt {
   display: block;
   float: left;
   width: 50%;
   font-size: 1.1em;
   padding-left: 5px;
   padding-right: 5px;
}


REPLACE with:

Code: Select all

ul.topiclist dt {
   display: block;
   float: left;
   width: 40%;
   font-size: 1.1em;
   padding-left: 5px;
   padding-right: 5px;
}


FIND:

Code: Select all

dd.posts, dd.topics, dd.views {
   width: 8%;
   text-align: center;
   line-height: 2.2em;
   font-size: 1.2em;
}

REPLACE WITH:

Code: Select all

dd.posts, dd.topics, dd.views {
   width: 10%;
   text-align: center;
   line-height: 2.2em;
   font-size: 1.2em;
}

[Petester]

Sorry, but do you have a sample site or pic?

[Semi_Deus]

ah, there was a sample pic, i dont know where it is now, wait ill have a look.

[Semi_Deus]

ok i got a site that has used mine.
Its not my site, but you can just have a look.
I only hasent used the padding at the top, but you can alter that yourself:
http://realityx.nl/

[Sniper_E]

Nope, I don't like the looks of that style. The corners have to be rounded or I don't want it.

[Semi_Deus]

Me neither, haha, but i thought if anybody DOES like it, then this tutorial would come in handy.
no if you want rounded corners then you should take SemiOutline indeed

[Petester]

Thanks man! Thats exactly what I was looking for! Man you saved my life!


However, can i make the top boreder deleted, so that its like a whole white column?

[Petester]

I think I found a way to do a round border. however it is a LOT more complicated

What i did is in common.css, I found.panel, and above it i added .whitepanel, and change the color to #FFFFFF.

Then in all other themes css files, I searched for .panel, then copy whatever and add .whitepanel after wherever it is. There are tonnes of them, so needs a lot of edits

Then finally after you did them, go in to overall_header, right below <body>, add

Code: Select all

<div class="whitepanel"><div class="inner"><span class="corners-top"><span></span></span>

Then go into overall_footer, right above </body>, add

Code: Select all

      </div>
   <span class="corners-bottom"><span></span></span></div>

Then, go to colour.css, find .panel, delete font-size

Done!

[Semi_Deus]

nice, but there are various ways, you can also add backgrounds with rounded corners, or a header and a footer with rounded corners.
But this is a template for NOT rounded corners, not a tutorial for those who dont know how to make rounded corners.

[harmlessgoat22]

If you are looking for rounded corners, my friend Shoot has an excellent tutorial on his website. Be warned. He's got lots of attachments, so if you are running on a slow internet connection, I would not recommend attempting to view that page.

http://phpbbfan.com/fans/viewtopic.php?f=10&t=79