Topic: Rounded Corners

well i've been messing about with some of the extra CSS that mozilla has and i've come up with a bit of css that rounds almost every corner on the standard punbb styles, and although it doesn't work in IE it doesn't affect IEs view at all
http://mypunbb.com/files/curvy.png

theres a few "problems":
* the bottom of the post review cannot be curved
* the profile view for users viewing other users isn't all curved
* the same applys to all admin options
* if you search by posts the curves at the bottom are slightly dodgy (this can probably be fixed)

Anyway i dunno what it will do to other styles but if you only run the standard styles then just add this to the end of base.css

DIV.box, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost, DIV.postfootleft, DIV.postfootright, FIELDSET, TEXTAREA {
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
}

.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost, #brdheader DIV.box, #brdstats DIV.box, #brdfooter DIV.box, H2, FIELDSET, TEXTAREA {
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
}

DIV.icon , INPUT{ -moz-border-radius: 3px; }

#postreview DIV.box {
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
}

DIV.postfootleft { -moz-border-radius-bottomright: 0px; }

DIV.postfootleft, DIV.postfootright { -moz-background-clip: padding; }

Re: Rounded Corners

kool to bad i dont use mozilla but its a kool effect.

Re: Rounded Corners

you can also do effects such as top-left and bottom-right only rounded looks kinda neat

Re: Rounded Corners

That's pretty cool smile

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Re: Rounded Corners

btw, you can also create a file called userContent.css and put

.pun DIV.box, .pun BLOCKQUOTE, .pun DIV.codebox, .pun DIV.forminfo, .pun DIV.blockpost, .pun DIV.postfootleft, .pun DIV.postfootright, .pun FIELDSET, .pun TEXTAREA {
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
}

.pun BLOCKQUOTE, .pun DIV.codebox, .pun DIV.forminfo, .pun DIV.blockpost, .pun #brdheader DIV.box, .pun #brdstats DIV.box, .pun #brdfooter DIV.box, .pun H2, .pun FIELDSET, .pun TEXTAREA {
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
}

DIV.icon , .pun INPUT{ -moz-border-radius: 3px; }

.pun #postreview DIV.box {
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
}

.pun DIV.postfootleft { -moz-border-radius-bottomright: 0px; }

.pun DIV.postfootleft, .pun DIV.postfootright { -moz-background-clip: padding; }

in it then save it in <user file>/application data/mozilla/firefox/chrome/ in windows and it will apply it to all punbb forum you browse (although it can mess up customised styles)

6 (edited by buzzkill 2005-03-31 18:39)

Re: Rounded Corners

I did something like that to get the fieldset to have rounded corners so moz would look like IE defaults.  Again though it was commented here that it breaks the XHMTL 1.1 strict rules  Just wondering, do you have to change the DOCTYPE to Transitional when you apply these moz only rules? Or is there a way to seperate the two so IE browsers look at the deault style sheets.  I know that IE will just ignore these rule but will it go into quirks mode?

See here for fieldset post. http://punbb.org/forums/viewtopic.php?id=6365

BTW, it does look cool.  I just hope that these will someday make their way into the standards...

Re: Rounded Corners

afaik it won't go into quirks mode unless you remove the doctype, it doesn't actually validate the css/html does it?

8 (edited by buzzkill 2005-03-31 19:14)

Re: Rounded Corners

Connorhd wrote:

afaik it won't go into quirks mode unless you remove the doctype, it doesn't actually validate the css/html does it?

Help me out here.  afaik?  Sorry to be such a p.i.t.a.  Just trying to learn.

Re: Rounded Corners

as far as i know wink

http://www.google.com/search?q=define%3A+afaik

Re: Rounded Corners

TY wink

11

Re: Rounded Corners

wcykspelnp

12

Re: Rounded Corners

As I said before ... S7u.co.uk is the best experimentator of CSS ...

http://www.stunicholls.myby.co.uk/boxes/snazzy.html


Perfect, with 0 pics ... incredible man.

13

Re: Rounded Corners

Better, in fact ...

http://pro.html.it/esempio/nifty/nifty8js.html (only choose what it rounded in javascript : great)

14

Re: Rounded Corners

Rod wrote:

As I said before ... S7u.co.uk is the best experimentator of CSS ...

http://www.stunicholls.myby.co.uk/boxes/snazzy.html


Perfect, with 0 pics ... incredible man.

Yes but that requires 8 additional tags. Connor's technique showed how to do it with only the existing markup. Alessandro Fulciniti's technique is great for a normal website though.

15

Re: Rounded Corners

As I said before ... S7u.co.uk is the best experimentator of CSS ...

http://www.stunicholls.myby.co.uk/boxes/snazzy.html

This is perfect : works on IE, Gecko and you can customize on ID ... or CLASSES.

Impressive and light.

Re: Rounded Corners

well actually as Paul said i couldn't add either of them without editing the code, http://pro.html.it/esempio/nifty/nifty8js.html doesn't allow for a border only a rounded background colour and http://www.stunicholls.myby.co.uk/boxes/snazzy.html doesn't use the javascript one although i dunno if it works with the js version of nifty, anyway that looked like way too much effort to me tongue

17 (edited by Romuald 2005-04-02 09:33)

Re: Rounded Corners

I've tried to do it on my style but there's too much bug, the table tag seems to be not my freind again.
So, for the moment it's give : http://ckkoshi.free.fr/punbb/


The left scroll bar is an original idee. bookmarks

Sorry for my french english.
GT4 Club driver France & Forum - Lingerie.