[How To] Simple border around forum - Part I

Styles, Theme, Cosmetic and Appearance related tips, tricks, tweaks, and Graphics

Moderator: STG Styles Team

Forum rules
NOTE: Post full styles only in the Styles Forum

[How To] Simple border around forum - Part I

Postby Semi_Deus » 13 Jul 2007, 05:45

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:
Image

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




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;
}
Former Moderator & Styles team member
Image
User avatar
Semi_Deus
Admiral
Admiral
 
Posts: 2479
Joined: 13 Feb 2007, 13:53
Location: Netherlands
Favorite Team: Ajax
Gender: Male
phpBB Knowledge: 8


Re: [Tutorial] Simple border around forum

Postby Petester » 20 Aug 2007, 08:01

Sorry, but do you have a sample site or pic?
Petester
Translator
Translator
 
Posts: 65
Joined: 28 Jun 2007, 00:38
Gender: Male

Re: [Tutorial] Simple border around forum

Postby Semi_Deus » 20 Aug 2007, 08:27

ah, there was a sample pic, i dont know where it is now, wait ill have a look.
Former Moderator & Styles team member
Image
User avatar
Semi_Deus
Admiral
Admiral
 
Posts: 2479
Joined: 13 Feb 2007, 13:53
Location: Netherlands
Favorite Team: Ajax
Gender: Male
phpBB Knowledge: 8

Re: [Tutorial] Simple border around forum

Postby Semi_Deus » 20 Aug 2007, 08:30

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/
Former Moderator & Styles team member
Image
User avatar
Semi_Deus
Admiral
Admiral
 
Posts: 2479
Joined: 13 Feb 2007, 13:53
Location: Netherlands
Favorite Team: Ajax
Gender: Male
phpBB Knowledge: 8

Re: [Tutorial] Simple border around forum

Postby Sniper_E » 20 Aug 2007, 09:05

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

:amen:
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 7003
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: [Tutorial] Simple border around forum

Postby Semi_Deus » 20 Aug 2007, 09:14

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 :grin:
Former Moderator & Styles team member
Image
User avatar
Semi_Deus
Admiral
Admiral
 
Posts: 2479
Joined: 13 Feb 2007, 13:53
Location: Netherlands
Favorite Team: Ajax
Gender: Male
phpBB Knowledge: 8

Re: [Tutorial] Simple border around forum

Postby Petester » 04 Sep 2007, 05:46

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
Translator
Translator
 
Posts: 65
Joined: 28 Jun 2007, 00:38
Gender: Male

Re: [Tutorial] Simple border around forum

Postby Petester » 14 Sep 2007, 18:53

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!
Petester
Translator
Translator
 
Posts: 65
Joined: 28 Jun 2007, 00:38
Gender: Male

Re: [Tutorial] Simple border around forum

Postby Semi_Deus » 15 Sep 2007, 17:01

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. ;)
Former Moderator & Styles team member
Image
User avatar
Semi_Deus
Admiral
Admiral
 
Posts: 2479
Joined: 13 Feb 2007, 13:53
Location: Netherlands
Favorite Team: Ajax
Gender: Male
phpBB Knowledge: 8

Re: [Tutorial] Simple border around forum

Postby harmlessgoat22 » 15 Sep 2007, 17:47

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
User avatar
harmlessgoat22    
STG Support Team
STG Support Team
 
Posts: 2886
Joined: 13 Jul 2006, 17:38
Gender: Male
phpBB Knowledge: 8

Next

Return to Styles Tweaks, Tips and Graphics

Who is online

Users browsing this forum: No registered users and 3 guests