PDA

View Full Version : Mini Mods - Simple CSS rounded corners for your forum [no images]


SEOvB
31 Jan 2008, 08:04
With this simple CSS you can give your forum that look you always wanted. Sick and tired of the old bland square design every where in vBulletin? Well fear no more, because here's your rounded edges.

In your style of choice, go to add the following into the Additional CSS:

.rc{display:block}
.rc *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#000000}
.rc1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #919191;
border-right:1px solid #919191;
background:#3f3f3f}
.rc2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #e5e5e5;
border-right:1px solid #e5e5e5;
background:#303030}
.rc3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #303030;
border-right:1px solid #303030;}
.rc4{
border-left:1px solid #919191;
border-right:1px solid #919191}
.rc5{
border-left:1px solid #3f3f3f;
border-right:1px solid #3f3f3f}
.rcfg{
background:#000000}


Then in your header, at the very top enter:

<div>
<b class="rc">
<b class="rc1"><b></b></b>
<b class="rc2"><b></b></b>
<b class="rc3"></b>
<b class="rc4"></b>
<b class="rc5"></b></b>

<div class="rcfg">


Then in footer at the very bottom put:

</div>

<b class="rc">
<b class="rc5"></b>
<b class="rc4"></b>
<b class="rc3"></b>
<b class="rc2"><b></b></b>
<b class="rc1"><b></b></b></b>
</div>


That will make a black box, with white background, just change the colors in the CSS to match your forum, and you're set!

saman
31 Jan 2008, 12:15
very nice thanks

at which css and line exatcly should we add the code?

Boofo
31 Jan 2008, 12:16
Does this work with all browsers?

SEOvB
31 Jan 2008, 14:24
I've only tested on IE7 and 6, and Firefox as thats all i have access to, if anyone has another browser and could test it, that'd be great

Boofo
31 Jan 2008, 14:37
You should attach a text file with the instructions in case someone wants to redo this on their site sometime. ;)

tschai
02 Feb 2008, 11:45
Works like a charm...

Tefra
02 Feb 2008, 16:52
spiffy corners (http://www.spiffycorners.com/)

cassis2k
06 Feb 2008, 14:47
spiffy corners (http://www.spiffycorners.com/)

Thank you for this link

iyihost
19 Mar 2008, 13:59
thanks

queueposition
22 Mar 2008, 21:11
Very nice ! Thanks Heaps, could this be applied to other boxes ?

Astroholic
25 Apr 2008, 00:20
Which file do I add the top coding to?

elmati
25 Apr 2008, 01:32
yeah! im using spiffy corners on my site :)
it's works in every browser

but, as i see the best way tu make rounded corners is:
http://www.editsite.net/blog/rounded_corners.html

dont worry about js, cause vbulletin require js to work property :)

Lizard King
25 Apr 2008, 03:01
Why there is no credit to the original creator within the first post ?

Playa82
25 Apr 2008, 06:11
live demo ?

kj_202
18 May 2008, 22:22
sounds nice :)

Preech
20 May 2008, 10:51
KJ, I'm no genius, designer or coder. But try playing the css box in your style editor. radius and some number. I'm not to sure. But I'll see if I can make something happen for you. I know most people use images.

eternal_
04 Apr 2009, 00:58
my site has a determined width - not 100% dependent on screen size. How can I add to the css a width of this css centered on the page to follow the rest of the table widths?

Alexey™
07 Apr 2009, 17:24
This is nice.
Tnx

MaRµ
22 Apr 2009, 05:13
Not workin on defoult style v3.8.2

Simon Lloyd
27 Jul 2009, 18:40
Not workin on defoult style v3.8.2

Works fine!, i'm using 3.8.3 and it worked when i tried it, i have removed it now as its not for me, maybe you didnt put the code in the correct places.