Page 1 of 2 12 LastLast
Results 1 to 10 of 14
  1. #1
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Adding images to additional side bars

    Evening All! I've added two "extra" side bars and named then navColumnThree and Four (copying the existing 1 and 2 code in a custom stylesheet. What i want to do is set a background image for these two blank side bars.

    Www.jambaroo.co.uk

    I then want the header to sit between the two new sidebars (so they go all the way from the top to the bottom of the screen.)

    This is an example - i want something like the two green cloud sidebars:- http://www.fabulouskids.co.uk/

    I've tried adding {background-image:'logo.gif'} to the #navcolumnthree and #navcolumnthreewrapper as well as .rightcontent (although that would background image both the right hand bars??) but I can't get an image to appear at all? I've also tried adding the full URL for the image.

    Any ideas?

    Thanks!

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Adding images to additional side bars

    I've tried adding {background-image:'logo.gif'}
    Wrong form- - should be like
    Code:
    background-image: url(../images/header_bg.jpg);
    Zen-Venom Get Bitten

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

    Default Re: Adding images to additional side bars

    You're working way too hard for this - all you need is to put the image as a background for the body {} rule. Let it repeat and it will cover all space outside the #mainWrapper area.
    There could be a few ways of detailing it depending on exactly how you want the side images to work.

  4. #4
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Re: Adding images to additional side bars

    I tried adding the background image to the whole body tag in the CSS but that didn't work either. It seems to flash behind the body when I load it though. I remove the side bar background colours but still don't see it?

    Thanks

  5. #5
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Adding images to additional side bars

    I remove the side bar background colours but still don't see it?
    Make the color "transparent"
    Zen-Venom Get Bitten

  6. #6
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Re: Adding images to additional side bars

    Added background-color:transparent to the body and to the individual #NavColumns. Still doesn't work.

    I'll have a better look at it tonight and i'll copy the code I have but if anyone else has any more ideas in the mean time?!

  7. #7
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Adding images to additional side bars

    Added background-color:transparent to the body and to the individual #NavColumns. Still doesn't work.
    Has to work....
    It is like layers, so maybe you still have elements with color
    Zen-Venom Get Bitten

  8. #8
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Re: Adding images to additional side bars

    Hmm - i thought i would try replacing all the colours with transparent. Then adding the colours back in. I've managed to get what I want, except that i can't get a background colour to show in the central content except if i amend the mainWrapper... in which case i lose the background image on the extra side bars too.

    Any idea how I split the new second side bars i've created from the middle content?!

    Thanks for all your help!

  9. #9
    Join Date
    Oct 2010
    Posts
    46
    Plugin Contributions
    0

    Default Re: Adding images to additional side bars

    Actually - i presume i need to do something to take the the third and fourth sidebars i've created outside of the MainWrapper in tpl_main_page? This might help with my problem whereby the content which should be in the nav sidebar on the right, appears in the one far right which i want as an image background....

    All i did to create the additional sidebars was to copy the existing sidebar code... i.e.
    <td id="navColumnOne" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">
    <td id="navColumnThree" class="columnLeft" style="width: <?php echo COLUMN_WIDTH_LEFT; ?>">

    and the same with the right! If i define them outside of the MainWrapper i presume I'm going to need to define some other wrapper to contain them?

    Sorry - all new to this one :)

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

    Default Re: Adding images to additional side bars

    Get rid of the extra sidebars - you don't need them and they just complicate things.

    Instead, find this in your stylesheet
    Code:
    #contentMainWrapper {background-color: transparent;}
    and change to this
    Code:
    #contentMainWrapper {background: white; width: auto; margin: 0 150px;}
    There may be another element or so to change after this is done, but it should take care of most of the background.

 

 
Page 1 of 2 12 LastLast

Similar Threads

  1. Additional Product images to the side of main image
    By kezan98 in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 8 Oct 2012, 01:48 AM
  2. Additional images side by side
    By jvanree in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 4 Jul 2008, 10:55 AM
  3. Adding Scroll Bars to Pop Up Images
    By estrange in forum General Questions
    Replies: 1
    Last Post: 30 Mar 2007, 07:41 AM
  4. Additional images display side by side
    By motech in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 10 Feb 2007, 03:18 AM

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