Bottom Sideboxes.

[kristofvanmol]

Hey,


I would like to use a gif image at the bottom of all the sideboxes, and not a regular thin colored line.

How do i change that?


Greetz.

[rush_woman]

Hmm, I believe that would be in the stylesheet. I changed the width and color on mine. In the sideboxes

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #330099;
margin-top: 1.5em;
}

Specify the image url in place of the 5px solid #330099;

Now I will provide the code I used to change the background image. HOWEVER please note, I do not know if the format of it will work for what you want to do.

You might want to check the wording with someone who is technically savvy -- I am not. I only know what I've done and I'm piecing together to see if it will work for what you want.

Here's the code I used to change the background to an image:
background-image: url(../images/web_background1.gif);

For what you want, I would try it like this:
border-bottom: image: url(../images/YOUR_IMAGE_NAME.gif);
---OR---
background-image: url(../images/YOUR_IMAGE_NAME.gif); (this way may not work as it does not specify the bottom)

The best way to do this is download the Web Developer tool for FireFox browser (at the Firefox web site). Then you can type this in to the CSS editor and see on the screen if it is the correct syntax -- without messing with your real stylesheet.

Remember to upload your image to the Images directory.

Also, keep in mind the bottom of the boxes are lines so I do not know if an image will work on a 1px edge.

You might have to widen the edge, then use the image over the top. That's how I have the my blue stripe bars here: http://208.109.193.212/index.php?main_page=

This was a template though that was already like this; I just changed the gif file to what I wanted.

Good luck. Sorry I can not be more definitive but this gives you a place to start. Someone else will eventually come by who has more information and make a post to fill in the holes of my info.

[kristofvanmol]

Hey Thanks for the info.


I will give you some more info about my exact problem.

I have to images.

This one, i would like to use in all the sideboxes as background.
http://ccmoore.be/store/includes/tem...background.gif

This image i would like to use in all the sideboxes as border, instead of the thin colored line.
http://ccmoore.be/store/includes/tem...ile_bottom.gif


I don't know what i do wrong, but i cant get it fixed. Can you please help me.


This is the code in the stylesheet.



#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}
.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_top.gif);
padding: 0.5em 0.2em;
}

.centerBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #FFFFFF;
background-image: url(../images/tile_boxes_background.gif);
border-bottom: url(../images/tile_bottom.gif);
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}




Thanks

Kristof

[rush_woman]

Hey Thanks for the info.


I will give you some more info about my exact problem.

I have to images.

This one, i would like to use in all the sideboxes as background.
http://ccmoore.be/store/includes/tem...background.gif

This image i would like to use in all the sideboxes as border, instead of the thin colored line.
http://ccmoore.be/store/includes/tem...ile_bottom.gif

I don't know what i do wrong, but i cant get it fixed. Can you please help me.

This is the code in the stylesheet.

#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #ffffff;
}
.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_top.gif);
padding: 0.5em 0.2em;
}

.centerBoxHeading {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
}
.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #FFFFFF;
background-image: url(../images/tile_boxes_background.gif);
border-bottom: url(../images/tile_bottom.gif);
margin-top: 1.5em;
}
.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}


Thanks

Kristof

Thanks for more info.

There is a template called Future Zen in the downloads section and it has curved edges on the sideboxes -- not sure if it has the bottom, or just the top. Download it and see how the sideboxes are coded in the stylesheet in that template. This may be the best place to start and compare codes. That was my only idea to play with it.

As for the side lines, instead of using an image file, I would increase the pixels and change the color.

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #FFFFFF;
background-image: url(../images/tile_boxes_background.gif);
border-bottom: url(../images/tile_bottom.gif);
margin-top: 1.5em;

I would change that stuff in red. Try changing to 3px, and whatever color you want, say #660033, just as a test.

Also, to play with your cart without having to change the stylesheet,
use the Firefox Browser, download the Web Developer's tool. In that tool is a CSS editor. This will bring up the stylesheet code on the left and you can try different things in the code and see it on your web page sitting to the right. Very helpful. Then go change your actual stylesheet when you have what you want.

I also downloaded Color Zilla which will give you the Hex codes (those 6 digit numbers) for whatever color you want. Then you can test that, too, using the Web Developers tool.

I'm new to this stuff so this pretty much covers my experience. I hope it helps. Let me know how it goes. Download the Future Zen template (i'm gonna because I want to see the round box corners myself) and see how the author did the curves. Then download the Firefox helper tools. Post here how it goes.

If it still isn't coming out, eventually someone will wander in here who has more experience than I changing these pieces and we'll both get the info.

Good luck,

[creativewarrior]

did anyone get this to work??
i want a rounded edge using an image at the bottom of the side box but cant seem to get it to work

[Happyworker]

Depending on how big your image is, you will have to off-set the height. For example, the bottom image I use is 20px in height...so adjust your bottom padding to allow for 20px.

.leftBoxContainer {padding:0 0 20px 0px; background: url(../images/catbottom.png) bottom center no-repeat;}