Jump to content


Photo
- - - - -

Rounded Corners


  • Please log in to reply
7 replies to this topic

#1 vaughanmoore

vaughanmoore

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 09 March 2011 - 10:08 PM

Hello, I'm really new. I've searched for posts on this topic and found one that I want to duplicate. It's below:

Please Login or Register to see this Hidden Content

I grabbed Philip's background image just for testing purposes and will change it after I've gotten the right look. Kate posted her CSS changes, but of course they were specific to Philip's site. They are below: #primary-nav{background:#ffffff;-moz-border-radius-topleft:10px;-moz-border-radius-topright:10px;border-top-right:10px;border-top-left-radius:10px;padding-top:10px;} #branding{background:transparent !important;} #header{background:transparent !important;} #page-main{background:#ffffff;} #page-main{background:transparent !important;} #primary-nav .texture {background-color:transparent !important;} My site is:

Please Login or Register to see this Hidden Content

Any help would be much appreciated. I'm looking into how to use Firebug, but as I said, I'm new. Vaughan

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 09 March 2011 - 11:31 PM

You need these selectors for the corners; `.fixed_width #page, .fixed_width #footer, .canvas #page-canvas {}`

#3 vaughanmoore

vaughanmoore

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 10 March 2011 - 03:00 AM

I had some success. This rounds the corners of my page: #page{ -moz-border-radius-topleft:50px; -moz-border-radius-topright:50px; border-top-right:150px; border-top-left-radius:50px; padding-top:10px;} The other selectors, or adding .fixed-page, didn't work. I'm not able to make the header transparent and round the corners of the nav. Any additional help would be appreciated.

#4 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 10 March 2011 - 03:55 AM

Apologies, I don't understand what you still need help with if you can guide me... Thanks, Bryan

#5 vaughanmoore

vaughanmoore

    Newbie

  • Members
  • Pip
  • 3 posts

Posted 10 March 2011 - 02:30 PM

Thanks Bryan, I want my site to look like this one:

Please Login or Register to see this Hidden Content

Do you see how the rounded corners are at the edge of the primary nav area rather than at the top of the header? I'd like my rounded edges there and the header area to to transparent so my logo is on top of the background image rather than the white page area. My site is:

Please Login or Register to see this Hidden Content

Any further help would be greatly appreciated. Vaughan

#6 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts
  • Country: Country Flag

Posted 10 March 2011 - 08:50 PM

If a selector isn't working try adding `body` to the front it to make it stick. Not sure why only one of your corners are rounded now, but the selectors I originally provided should work assuming you get them to take precedence.

#7 kristjan72

kristjan72

    Member

  • Members
  • 26 posts
  • LocationAmsterdam
  • Framework Version:2.3
  • Country: Country Flag

Posted 17 March 2011 - 10:43 PM

I've been playing around with this code too, and even though I'm very much at the copy-paste-see-what-happens level of CSS, I think I see where your going wrong, Vaughan border-top-right:150px; border-top-left-radius:50px; this should be border-top-right-radius:50px; border-top-left-radius:50px; hope that fixes it for you!

#8 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 18 March 2011 - 03:45 AM

Thanks Kristjan, first karma point just for helping out. Thanks, Bryan