Knowledge Base

CSS3 Rounded corners for prosilver
Article ID: 965
Written By: Semi_Deus
Written On: Mon Mar 08, 2010 11:40 pm
Description: Simple use of CSS3 to add rounded corners in prosilver for modern browsers.
link to this article on phpbb.com: Select All
[kb=css3-rounded-corners-for-prosilver]CSS3 Rounded corners for prosilver[/kb]
link to this article on your own board: Select All
[url=http://www.phpbb.com/kb/article/css3-rounded-corners-for-prosilver/]Knowledge Base - CSS3 Rounded corners for prosilver[/url]

An introduction
Rounded Corners are a big hit on phpBB3 styles, pretty much since the beginning of phpBB3 when the prosilver style was released and phpBB.com introduced its new website. Unfortunately they are very difficult to add with the former available CSS & HTML for common users.
With the new CSS3 its easy to accomplish a nice looking rounded border, with the following pro's:
  • No use of images
  • Same HTML, only different CSS
  • No Javascript
  • Fast loading in modern (CSS3 aware) browsers

The cons are that it adds some empty divs to your markup in IE, & IE7(+) still needs images, but hey, didn't you guess that when you saw the title? Don't even get started about IE6, be happy if your corners are squared ;)

First things first
Where are we going to work? well, ONLY in:
Code: Select all
root/styles/prosilver/theme/common.css
&
root/styles/prosilver/theme/colours.css

How crazy is that huh?

the HTML
Open up the overall_header.html file.

FIND:
nothing, thats right, no HTML.

So moving on..
the CSS
Open common.css

FIND:
Code: Select all
#wrap {
    padding: 0 20px;
    min-width: 650px;
}


REPLACE WITH:
Code: Select all
#wrap {
    padding: 12px 20px;
    min-width: 650px;
    width: 80%;                    /* This changes the width of your style to a fluid 80%. */
    margin: 0 auto;                /* This center aligns your wrap width on the browser page */
    background-color: #FFFFFF;     /* Gives the wrap a white background */
    border-radius: 6px;    /* The Rounded corners for all modern browsers */
}


SAVE & CLOSE

Now open colours.css

FIND:
Code: Select all
html, body {
    color: #536482;
    background-color: #FFFFFF;
}


REPLACE WITH:
Code: Select all
html, body {
    color: #536482;
    background-color: #747474;
}


SAVE & CLOSE

Refresh your theme by going to the Administrator control panel* > Styles > Theme > Prosilver > Refresh
If necessary, purge you cache on the first page of the ACP*.

If done correctly, this is what it now should look like:
Image


Variations
By altering some of the values you can get different looks which could suit everyones needs. Here are some examples.

Both radiusses: 20px - html, body background-color: #009dee;
Image

Add a coloured border
If you want to add a coloured border, you add this line to the #wrap property:
Code: Select all
    border: 6px solid #b7e6ff;        


This would give a look like the following picture, and ofcourse you can vary in the different sizes and colours by altering 6px, solid or the color. (note, I didn't use the 20px border-radius for this one but 10px)
Image

I hope you enjoyed this tutorial, and I am sure I will see some lively borders around the web soon.

Thanks at Bill Lipa of BestInClass.com for the standard version
Coded & Tutorialized for phpBB3's prosilver by Semi_Deus of phpBBmodders.net

Edited 30/3/2012 - replaced -webkit-border-radius with border-radius and removed -moz- counterpart - Arty