Hey guys, as Ive been on the forums, Ive seen a lot of forums that havent really done much in the terms of editing the standard default CSS.
Here is a quick guide on how to change the CSS to give your forum an edge.
[hide=10]Curved / Border Radius
Thanks to Elite Silver for opening my eyes to this. Ever thought your forums had sharp corners when and it didn't go with the topic or theme of your forums? For example if you have a bubble theme which was based on GFX, you would want your theme to resemble the theme, so because bubbles are round you'd want to round the edges of your forum. With CSS we can curve the edges of our TBorder / THead / Tabbed Menu and more.
Here is a screenshot of my forum which shows the effects of this CSS.
Due to their being multiple browsers out there, some of their codes that read the CSS are different. We have WebKit, Gecko and CSS3.
To remember each variety can get kind of hard so some genius created this website for us http://border-radius.com/. This website generates the CSS code required to have multi-browser CSS on our forum. Just enter the amount of pixels you want each corner to have and copy the code in the box. We then need to paste this code into the "Extra CSS Attributes" on the right of any CSS class.
Here is an image to demonstrate this.
After pressing save, make sure you preview your results to make sure you have the desired effect.
As mentioned before you can do this with almost everything. I personally think its a must with Labrocca's Tabbed Menu plugin as it makes the tabs look more like tabs. And with a little Photoshop knowledge you can have some really professional looking tabs.
Glow / Drop Shadow
A lot of people dont realise but both are exactly the same, just the glow generally has 0 distance so it sites on top of the object you set it to. Drop Shadow has a distance so it looks like its floating off the page.
If you read the previous section, you will be familiar with the following code
The Hex (6) Code is the Colour of the shadow we are creating. This code can be generated using Photoshop or my googling hex colour code generator.
The 10px and 20x is the distance from the object in the x and y direction. If youre after a glow change it to 0. If youre after a drop shadow customise it to what you want, which will be around 5-15px.
The 15px is the spread of the shadow. If you want the code for a glow keep it around 5-15px too but if you want a sharp drop shadow take out the 15px completely. The higher the px count the less spread your shadow will have.
Here is a good website to demonstrate what happens with different properties and how to get negative drop shadows. http://www.css3.info/preview/box-shadow/
[/hide]
That concludes the tutorial for now, Im sure ill add more stuff soon.
Thanks
Here is a quick guide on how to change the CSS to give your forum an edge.
[hide=10]Curved / Border Radius
Thanks to Elite Silver for opening my eyes to this. Ever thought your forums had sharp corners when and it didn't go with the topic or theme of your forums? For example if you have a bubble theme which was based on GFX, you would want your theme to resemble the theme, so because bubbles are round you'd want to round the edges of your forum. With CSS we can curve the edges of our TBorder / THead / Tabbed Menu and more.
Here is a screenshot of my forum which shows the effects of this CSS.
Due to their being multiple browsers out there, some of their codes that read the CSS are different. We have WebKit, Gecko and CSS3.
To remember each variety can get kind of hard so some genius created this website for us http://border-radius.com/. This website generates the CSS code required to have multi-browser CSS on our forum. Just enter the amount of pixels you want each corner to have and copy the code in the box. We then need to paste this code into the "Extra CSS Attributes" on the right of any CSS class.
Here is an image to demonstrate this.
After pressing save, make sure you preview your results to make sure you have the desired effect.
As mentioned before you can do this with almost everything. I personally think its a must with Labrocca's Tabbed Menu plugin as it makes the tabs look more like tabs. And with a little Photoshop knowledge you can have some really professional looking tabs.
Glow / Drop Shadow
A lot of people dont realise but both are exactly the same, just the glow generally has 0 distance so it sites on top of the object you set it to. Drop Shadow has a distance so it looks like its floating off the page.
If you read the previous section, you will be familiar with the following code
Code:
-moz-box-shadow: 10px 20px 15px #5895c9;
-webkit-box-shadow: 10x 20x 15px #5895c9;The Hex (6) Code is the Colour of the shadow we are creating. This code can be generated using Photoshop or my googling hex colour code generator.
The 10px and 20x is the distance from the object in the x and y direction. If youre after a glow change it to 0. If youre after a drop shadow customise it to what you want, which will be around 5-15px.
The 15px is the spread of the shadow. If you want the code for a glow keep it around 5-15px too but if you want a sharp drop shadow take out the 15px completely. The higher the px count the less spread your shadow will have.
Code:
-moz-box-shadow: 10px 10px #5895c9;
-webkit-box-shadow: 10px 10px #5895c9;Here is a good website to demonstrate what happens with different properties and how to get negative drop shadows. http://www.css3.info/preview/box-shadow/
That concludes the tutorial for now, Im sure ill add more stuff soon.
Thanks
