MyBB Central

Full Version: [TUTORIAL] CSS Tips - Tabbed Menu - TBorder etc
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.



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
Awesome tutorial man,thumbs up Big Grin

But typo error there Tongue
Yer I had to rush xD

Ill go over it later

Spelling & Grammar Check - Complete Big Grin
(Mar 23, 2011, 03:55 AM)CyberTechForums Wrote: [ -> ]Yer I had to rush xD

Ill go over it later

Spelling & Grammar Check - Complete Big Grin
nice.


(Mar 22, 2011, 03:00 PM)CyberTechForums Wrote: [ -> ]Thanks to Elite Silver for opening my eyes to this. every thought your forums had sharp corners when and it didn’t go with the topic or theme of your forums?
Ever* (Grammer Nazi Big Grin)

Lol ty, something the Spell Checker didnt pick up
Thanks for this!

I could use some help with this
(Apr 20, 2014, 05:35 PM)PropGamer Wrote: [ -> ]Thanks for this!

I could use some help with this

You will be denied. Due to pirating the plugin..