Please Help - A few layout customization questions

[tbradley]

Hello All,

I recently started using zencart to design a site and have been having difficulty figuring out how to do a few things.

My store is currently viewable at http://nxltech.com/zencart if you need to take a look at where I'm at so far. Going to list off a few things I'm having trouble with below.

1. How can I change the background color of my left and right sidebars? (behind the sideboxes)

2. How can I change the size of the search field and change the button used to click search?

3. Is it possible to have a category move to the top of the category list when clicked on? Currently the category expands but stays where it is so users have to go down through the list to view the subcategories if they prefer to use those links on the left sidebar.

4. Is it possible to have the Log in/Register and account settings buttons appear on the left sidebar above the categories?

5. How can I set it to always display the shopping cart on the top of the right sidebar?

6. How can I change the background color and link color of categories below the category header?

I think that's about all for now, I just want to get the basic layout coded and finished before I start adding graphics to it. Thank you guys for taking the time to read/help.

[stevesh]

1 and 6: see below.

3: Anything is possible with open source software, but that would require custom coding.

4 and 5: You would have to move the proper sections of code to different template files. More trouble than the result would be worth, IMO. Someone else may have more specific suggestions. There is a Login Sidebox mod that might work for 4 in the Free Software Add Ons section.



Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-8, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

[tbradley]

Thanks for the reply,

Regarding the questions that ask "how can I" I'm moreso looking for the appropriate template file or where in the stylesheet the settings can be found. I'm an experienced programmer and have been able to find things for the most part but I can't seem to figure out where I can edit those particular variables. Also, do you know of any good category display related add-ons that you could recommend?

[usernamenone]

Install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-8, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Above tells you how to find in you style sheet
It is helpful if you download a color picker.

The search box would be located in your template side boxes.

Add ons are in the download section above called Free Download Add Ons

You say you are a programmer? Of what?

[tbradley]

Above tells you how to find in you style sheet
It is helpful if you download a color picker.

The search box would be located in your template side boxes.

Add ons are in the download section above called Free Download Add Ons

You say you are a programmer? Of what?

Looking through other posts I saw specific file paths and given that this is a support forum I figured people would give me the same as I've been having difficulty finding those specific sections even with Firebug.

I found the appropriate file to edit my search, I created my template from scratch and had to copy it over from the default template. Thanks for the hint, it's all I needed.

I know where the add-ons are, I was looking for recommendations should he have any for the category display in particular.

As far as my coding experience goes I've done quite a bit of web development for clients using xhtml, css and php. I've also created several applications with c++. This is my first time ever working with shopping cart software however and it's a lot to wrap your head around, everybody has to start somewhere.