Rounded corners on header/navbar?

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
mikey84
Registered User
Posts: 38
Joined: Wed Mar 07, 2012 3:23 pm

Rounded corners on header/navbar?

Post by mikey84 »

Can someone please help me get rounded corners on these 4 points?

Image

Forum link: http://polishsoccer.com/

Thanks for any help!
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Rounded corners on header/navbar?

Post by PlanetStyles.net »

Easiest done using CSS3.

Place the following code at the bottom of your colours.css file :) :

Code: Select all

.headerbar {
    border-radius: 10px 10px 0px 0px; 
    -moz-border-radius: 10px 10px 0px 0px; 
    -webkit-border-radius: 10px 10px 0px 0px; 
}

#page-header .navbar {
    border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    -webkit-border-radius: 0px 0px 10px 10px; 
}
mikey84
Registered User
Posts: 38
Joined: Wed Mar 07, 2012 3:23 pm

Re: Rounded corners on header/navbar?

Post by mikey84 »

Christian 2.0 wrote:Easiest done using CSS3.

Place the following code at the bottom of your colours.css file :) :

Code: Select all

.headerbar {
    border-radius: 10px 10px 0px 0px; 
    -moz-border-radius: 10px 10px 0px 0px; 
    -webkit-border-radius: 10px 10px 0px 0px; 
}

#page-header .navbar {
    border-radius: 0px 0px 10px 10px; 
    -moz-border-radius: 0px 0px 10px 10px; 
    -webkit-border-radius: 0px 0px 10px 10px; 
}
WOW! What an easy way to do it. Thanks a bunch! :D

Is there a easy way to do the same for the black bar on the bottom of the page? And the black bar on the top in my sportsbook?
User avatar
PlanetStyles.net
Former Team Member
Posts: 4700
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Rounded corners on header/navbar?

Post by PlanetStyles.net »

Sure :)

Above the code you just added, add this:

Code: Select all

.navbar {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
}
mikey84
Registered User
Posts: 38
Joined: Wed Mar 07, 2012 3:23 pm

Re: Rounded corners on header/navbar?

Post by mikey84 »

Christian 2.0 wrote:Sure :)

Above the code you just added, add this:

Code: Select all

.navbar {
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
}
That worked great. Thank you! :D
Zavier15
Registered User
Posts: 6
Joined: Tue Dec 11, 2012 5:51 pm

Re: Rounded corners on header/navbar?

Post by Zavier15 »

Sorry for the bump...

This really helped me but how do I do the thread areas? This does the header/nav bar. I couldn't find the forum category method... or its just too late.

-Z
User avatar
Neculai Anisor
Registered User
Posts: 172
Joined: Tue Jan 08, 2013 9:36 pm
Location: Renfrew, Renfrewshire, Scotland
Name: Neculai Anișor
Contact:

Re: Rounded corners on header/navbar?

Post by Neculai Anisor »

Wow thats work ! thanks
Image | Romanian Support Team | Animo @ phpBB.ro - Administrator
Locked

Return to “[3.0.x] Styles Support & Discussion”