How do I change the appearance of one sidebox only?

I want to begin customizing the columns and the sideboxes but I don't want a header and footer and the same appearance for all sideboxes. Initially I want to customize the categories sidebox.
What do I edit to change one box in particular and not all sideboxes?

You can achieve this in the css.

Whichever box you are working with (you say Categories so I'll use it), you will add the defines to your css to tell it to over ride the default when it displays the box. The elements you will want to define are :

#categoriesHeading
#categoriesContent
(and maybe this - I added it on mine) if you are using a custom "bottom"
#categoriesBottom

Basically, what you want is totally achieveable in the Stylesheet.

NOTE: on the View Source you will see the class and id ...

This helps in customizing a given sidebox ... example for the Featured Sidebox to touch its class you see:

class="leftBoxContainer" id="featured"

That class leftBoxContainer is used by all sideboxes ... the id featured is only used by the Featured sidebox ...

Yes but you are talking about defining CSS to apply to something. I need to know where I am applying the CSS. What file?

Your stylesheets are in your:
/includes/templates/your_templates_dir/css

You would be editing or adding to that to make changes ...

Usually for an id you are adding as the code is there for you ... but it is not defined separately unless you need to make changes for your personal site ...

OK yes I know where the stylesheet is and how to edit it, I thought that I had to define in CSS and then apply to another file. I did not realize that defining as you said would make changes based on CSS assignments in the tpl files.

I defined #categoriesContent and this working fine and I changed the border of the left sideboxes to '0' but there is still some padding between the edge of the categories content and the actual sidebox it is in. How do I get rid of that padding?

Robert - border, padding, and margin all define different things. Changing the border to 0 simply removes the color border - padding:0 will remove any padding (which I believe is what you are referring to) and Margin:0 will move the text/contents all the way to the "padded" edge.

Hope that makes sense.

Thanks Tina,

I do understand these things. I should really provide links so you can see what I am talkinag about as I try to figure these things out. I determined that what I was seeing could be controlled from within the Layout Settings. I had a 10px difference between the Left Box width and the left column width.

I have defined the #categoriesContent and was able to change the background color and padding. I tried to define the #categoriesHeading but it did not change anything. If I change the .leftboxheading it changes all the headings but for some reason I can't take control of just the Categories heading.

Robert ... have you an URL we can peek at vs guessing here what your stylesheets are doing perhaps? :smile:

This is the link to my work-in-progress shop.

http://tmrdesign.com/knotshop

It changes constantly but as of right now it is as I described with the categories heading not changing and still under the control of the textboxheading class.

Robert, I just took a peek at your link and it looks like it's on it's way to great :) Did you find the things you were looking for? If you still need help feel free to email/message me - or you can post here and I will catch it eventually - but then again so will many others who will be able to help you out :)

Thanks for the compliment Tina but no, I have not been able to figure out this current problem with the category header. I want to be able to control just that header and not the header for all sideboxes or leftsideboxes.

Can you possible help me figure that one out? When I change the CSS for #categoriesHeading it does not work.

Thanks,
Robert

Let's say you were changing the More Information box as this is a simple example ...

Add to the bottom of your stylesheet.css file:

#moreinformation-heading-td {
background-color: red;
}

Does the heading of the More Information box turn red?

Tina - I have a quick question for you. I tried your instructions here for my Categories box:

TinaS:

Whichever box you are working with (you say Categories so I'll use it), you will add the defines to your css to tell it to over ride the default when it displays the box. The elements you will want to define are :

#categoriesHeading
#categoriesContent
(and maybe this - I added it on mine) if you are using a custom "bottom"
#categoriesBottom

Basically, what you want is totally achieveable in the Stylesheet.

However, my stylesheet only wants to use

#categoriesHeading &
#categoriesContent.

When I define #categoriesBottom in my stylesheet, it simply overlaps the same area as #categoriesContent.

I need it to have a seperate #categoriesBottom for my Categories sidebox as well as seperate bottoms for the rest of my sideboxes.

How do you achieve this? How does one add a custom bottom?

Sincere Thanks for your kind assistance!

You need to also add the code that I posted in the sidebox templates (at least that appears to be the problem)

Make the edits to the files I described as well as the CSS and see if that helps :)

EDIT - GRRR This is the wrong post where I posted the entire code. I'll have to find that and give you the URL - gimme a few :)

EDIT # 2 - Here is the post where I defined the entire process :)
http://www.zen-cart.com/forum/showthread.php?p=233618#post233618

I am trying to keep up with you all here.....

I have Firefox and the Editor that goes with it.. I want to Try to Change the color boxes.. see here they are BLUE https://www.kandiesforyou.com/shop ? I Want to make them that dark blue. I have the Color Charge #003366
But I don't know were to find it in the original_stylesheet. Can someone help me ?

Also.. Can you tell me a better and VERY easy way to make changes and check BEFORE I make the Changes on my style_sheet so I can play around a bit and learn better?

Thank you
Kirsten

Kirsten did you get the Developers Toolbar for your firefox ?

If so - you will see on the tool bar a "puzzle piece" looking icon that's labeld CSS - that is a drop down button that you can click and while you are on your store pages click on EDIT CSS - it will then show your css files in the left column of your browser/ your store pages on the right. Use the editor on the left to make changes and they appear as you have edited them on the right.

Remember though when you do this that you will have to save that css file (to your hard drive) and actually upload it before the changes you make will take effect for real.

I hope that helps a little more :)

ok I dont have the puzzle piece.. I guess I need to download it.

But were Do I change the color's on the boxes? Also were do I get rid of the Blue box ( part of the zen-cart logo ) and center my logo

SEE ? http://www.kandiesforyou.com/shop

This is all I need to know to get it up again then I will play around mroe with everything and learn. LOL Thank you for your support in all this

Hi Tina -

Thanks so much for your quick reply.

I did read over that post a few times, and I want to just paste the code into my
tpl_box_default_left.php
tpl_box_default_right.php
tpl_box_default_single.php

But...my curiousity is getting the best of me.

Exactly how is this code modifying the page to look for a new bottom div/class?

I ask so that I will learn the php and be able to fix future problems. Therefore, next time I won't have to post here. : D

Thanks again. Your posts are invaluably awesome.

Here you go Kirsten :

Change the color on .leftboxheading (in your stylesheet) to change the blue box header.

The background in the header is weird because I don't find it in the css any place. It confuses me because I have never used the classic template as a basis for templates I write, I have always used template_default.

As far as centering the logo - again I am not finding a #logo style in your stylesheet to position it with - nor is that class called in that header file for that template.

I guess because I don't use the Classic Template and never have I am beginning to be of little help. On template_default I know where and what classes control things just off the top of my head :)

Hope that helps you a little more:)