Results 1 to 5 of 5
  1. #1
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default need help with custom sideboxes header graphics

    Okay, I am working on building a custom template from scratch and I am trying to add graphics to the headers of the side boxes:

    i.e.:
    sidebox_header_left_bg.gif
    sidebox_header_right_bg.gif
    sidebox_header_bg.gif

    for some reason I can't seem to get it to work when I call for those images in the css file (I started from scratch with the default template css file)

    I can get the right or left one to show but not all 3 at the same time...???????????

    oh and yes the gif's are in the correct place /images/

    I have looked on several css tutorial sites and can't seem to find the solution as well as have looked in this forum

    What I am trying to accomplish is the same look of the sideboxes as in the pure blue template
    John

  2. #2
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Advanced CSS - need help with custom sideboxes header graphics

    You can't have more than one background image for an element unless you are using CSS3 syntax and have a modern browser.

    You need to either add wrapper divs to the sidebox headers in the sidebox handling file, or decide on the sidebox width and combine the images to make one fixed-width bg image. This would generally be easier unless you have a very odd situation of changing sidebox widths.

  3. #3
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Advanced CSS - need help with custom sideboxes header graphics

    Thanks for the quick response!

    Does the pure blue template use css3 syntax? I looked through the css of it and was much different than the default template css...but it used the 3 files like I was attempting to do.

    I liked this idea because it fits well with any element width, meaning I was going to do the same thing with my header nav bar...
    John

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

    Default Re: Advanced CSS - need help with custom sideboxes header graphics

    The Pure templates use extra coded wrapper elements to hold the two background images (you don't need three - one is left and one is center+right). This was an advanced technique ten years ago ("sliding door" technique). As this particular rounded corner effect only has the curve without "shiny" highlighting, you can do the same with one tiny image and one stylesheet rule (this will work for all modern browsers; IE8 or older will get square corners).

    .leftBoxHeading, .rightBoxHeading {
    background: url(../images/sidebox_header_bg.gif);
    border-radius: 5px 5px 0 0;
    }

  5. #5
    Join Date
    Dec 2006
    Location
    near Atlanta Georgia
    Posts
    194
    Plugin Contributions
    0

    Default Re: Advanced CSS - need help with custom sideboxes header graphics

    OK great thanks for the detailed explanation I will give it a try...
    John

 

 

Similar Threads

  1. Need help with header image/header area-Apple Zen
    By Samuz in forum Addon Templates
    Replies: 2
    Last Post: 9 Jul 2010, 12:37 AM
  2. Need help With Categories and Sideboxes
    By boogily in forum Basic Configuration
    Replies: 3
    Last Post: 19 Oct 2009, 02:04 AM
  3. Desperately need help with CSS to get header graphics to work
    By koenvandamme in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 5 Jun 2009, 02:19 PM
  4. Need some help with sideboxes and such
    By knight74 in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 10 Dec 2007, 08:28 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