Page 1 of 3 123 LastLast
Results 1 to 10 of 23
  1. #1
    Join Date
    Sep 2011
    Location
    UK
    Posts
    72
    Plugin Contributions
    0

    help question Rounding off the top corners of my layout boxes

    Hi,

    I have been looking into this for a while now and im not sure where to start i was just wondering how to go about rounding off the top corners of my layout boxes etc... I have read a few threads but not sure what to do exactly.

  2. #2
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,692
    Plugin Contributions
    3

    Default Re: Rounding off the top corners of my layout boxes

    You will need to create a new image for use on your sideboxes. The image being used is called tile_back.gif. It is also being used for your EZ-Pages header. So, you will need to create an image of a different name and edit your stylesheet to reflect that name:

    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #FFA3A2;
    background-image: url (../images/tile_back.gif);
    padding: 0.5em 0.2em;
    background-repeat: repeat-x;
    }

    You would make the image 150px wide and upload it to your template images folder. You would also need to remove background-repeat: repeat-x;

    To make rounded corners on images, I use this site:

    http://www.roundpic.com
    The best way to learn is to try stuff. But, back it up first.

  3. #3
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,692
    Plugin Contributions
    3

    Default Re: Rounding off the top corners of my layout boxes

    You can see rounded images I created at that site here:

    http://www.oozix.com/store3
    The best way to learn is to try stuff. But, back it up first.

  4. #4
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,061
    Plugin Contributions
    25

    Default Re: Rounding off the top corners of my layout boxes

    Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers (even IE9:). (Older browsers will just show square corners.)


    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #FFA3A2;
    background-image: url (../images/tile_back.gif);
    padding: 0.5em 0.2em;
    background-repeat: repeat-x;
    border-radius: 7px 7px 0 0;
    }

    This will round the top left and top right corners with a 7px radius. Adjust to taste.
    Last edited by gjh42; 13 Jan 2012 at 08:03 PM.

  5. #5
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,692
    Plugin Contributions
    3

    Default Re: Rounding off the top corners of my layout boxes

    Quote Originally Posted by gjh42 View Post
    Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers. (Older browsers will just show square corners.)


    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #FFA3A2;
    background-image: url (../images/tile_back.gif);
    padding: 0.5em 0.2em;
    background-repeat: repeat-x;
    border-radius: 7px 7px 0 0;
    }

    This will round the top left and top right corners with a 7px radius. Adjust to taste.
    That won't work in IE8. Needs a little help from a small script. There are a couple different ones out there. I use PIE.htc. Would look like this:

    behavior: url (PIE.htc);

    PS: I learned something new, though. I didn't know border radius worked on images. Would have saved me a lot of time!
    The best way to learn is to try stuff. But, back it up first.

  6. #6
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,061
    Plugin Contributions
    25

    Default Re: Rounding off the top corners of my layout boxes

    It works on background images - not sure about foreground images. It might depend on whether the image is the element being rounded, or is contained inside a wrapper that is rounded. In the latter case it doesn't really work right.

    I did say all "modern" browsers:) If IE8 or earlier support for this appearance feature is important, then you do need special treatment for IE.

  7. #7
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,692
    Plugin Contributions
    3

    Default Re: Rounding off the top corners of my layout boxes

    Yeah, I'm not sure if any version of IE can ever be considered "modern".
    The best way to learn is to try stuff. But, back it up first.

  8. #8
    Join Date
    Sep 2011
    Location
    UK
    Posts
    72
    Plugin Contributions
    0

    Default Re: Rounding off the top corners of my layout boxes

    Hi,

    have tried it and its close to being right. the 150px is not quite wide enough and i keep getting a repeat pattern in the main center boxes . Also my search box is a seperate image as it got edited so will have to do that seperately. Any more advice would be great. Have reset to its original for now though.

  9. #9
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,061
    Plugin Contributions
    25

    Default Re: Rounding off the top corners of my layout boxes

    If you're going to use a rounded image, you need to make it the same width as your sideboxes display, and separate the stylesheet rules to have different backgrounds for sideboxes and centerboxes.

    Did you try the border-radius declaration?

  10. #10
    Join Date
    May 2010
    Location
    WA State
    Posts
    1,692
    Plugin Contributions
    3

    Default Re: Rounding off the top corners of my layout boxes

    Okay, I just tested it in IE8. It doesn't work. It does work when using PIE.htc, but it needs position relative added. Like this:

    .leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
    margin: 0em;
    background-color: #xxxxxx;
    background-image: url(../images/tile_back.gif);
    padding: 0.5em 0.2em;
    border-radius: 7px 7px 0 0;
    behavior: url (PIE.htc);
    position: relative;
    }

    You also need to edit this and remove the top border:

    .leftBoxContainer, .rightBoxContainer {
    margin: 0em;
    border: 1px solid #xxxxxx;
    border-bottom: 5px solid #xxxxx;
    margin-top: 1.5em;
    }
    The best way to learn is to try stuff. But, back it up first.

 

 
Page 1 of 3 123 LastLast

Similar Threads

  1. adding an image to the top corners of the center column
    By ilsita in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 10 Oct 2009, 11:47 PM
  2. rounding off the bottom corners of sideboxes
    By davowave in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 16 Jul 2009, 01:29 PM
  3. Rounding the edges in sideboxes & banner boxes
    By annav in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 9 Aug 2008, 04:09 PM
  4. changing height of top menu bar throws layout off
    By lupine73 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 4 Oct 2007, 09:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR