CSS3 Rounded corners for prosilver
Description: Simple use of CSS3 to add rounded corners in prosilver for modern browsers.
In Categories: Styles
- Link to this article: Select All
[url=https://www.phpbb.com/support/docs/en/3.0/kb/article/css3-rounded-corners-for-prosilver/]Knowledge Base - CSS3 Rounded corners for prosilver[/url]
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:
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;
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)
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