WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Rounding corners and glowing boarders in PhpBB

View previous topic View next topic Go down  Message [Page 1 of 1]

Josh

Josh
Registered Member
Registered Member
Hi, would it be possible to

a), round the corners of the post body, main body, and top "box"

and b), put a glowing black boarder around the main body? (WebArtz has something similar to this.)

... in PhpBB?

I made a diagram to clarify:
https://i.servimg.com/u/f26/13/66/98/43/roundc10.jpg

Thanks! Smile
-Josh

Nera

Nera
Technician
Technician
To add the round corners to your post, find your rules and replace them with mine:

1. for posts rounding
Code:
.post {
    background-position: 100% 0;
    background-repeat: no-repeat;
    border-radius: 20px 20px 20px 20px;
    margin-bottom: 4px;
    padding: 0 10px;
}

2. For widgets
Code:
.module {
    background-color: #F0DB81;
    border-radius: 20px 20px 20px 20px;
    color: #25838F;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0 10px;
}

3. For the navbar box
Code:
.navbar {
    background-color: #F0DB81;
    border-radius: 20px 20px 20px 20px;
    clear: both;
    padding: 0 10px;
}

To add the shadow replace your rule with mine
Code:
#wrap {
    background-color: #FFF8B9;
    border: 1px solid #000000;
    box-shadow: 0 0 10px #000000;
    margin: 330px auto 0;
    min-width: 954px;
    padding: 23px;
    width: 75%;
}

Resault =>
Rounding corners and glowing boarders in PhpBB 4VL0

Josh

Josh
Registered Member
Registered Member
Hi, everything worked great except the shadow; it doesn't seem to be appearing. Do you know why?

Nera

Nera
Technician
Technician
I see it. Here's a screen shot.
Rounding corners and glowing boarders in PhpBB 4VOp

Gangstar15

Gangstar15
Registered Member
Registered Member
Code:

box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
-moz-box-shadow: 0 0 10px #000000;

Josh

Josh
Registered Member
Registered Member
Awesome, thanks Gangstar and Until_Forever!

Last question regarding this - Can I round the corners main body (#wrap)?

Nera

Nera
Technician
Technician
Jep, add this to CSS.

Code:
#wrap {
    border-radius: 20px 20px 20px 20px;
}

Josh

Josh
Registered Member
Registered Member
Thanks for all your help, this is solved now.

Nera

Nera
Technician
Technician
No problem, by Angel

Jophy

Jophy
Registered Member
Registered Member
Solved => Locked

http://www.socialtechforum.com/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » CSS (Cascading Style Sheets) » Rounding corners and glowing boarders in PhpBB

Permissions in this forum:
You cannot reply to topics in this forum