Frustrated, why is is so hard to customise?

[logicalstep]

Hi All,

Firstly it's my first time posting here, I've been searching the forums for best part of a week trying to customise a template and I've just had so many setback it's unreal.

I know this is going to sound like a rant, but I'm so frustrated with Zen Cart I'm considering paying someone to do it for me!

Can someone explain why it's so hard to add a background image to the top categories title then a backgoround image to the left categories links and then why once I do it's so hard to set the height and then once that's done why it's so hard to set the text colour.

Nothing seems to be laid out in a logical way at all...I must be missing something.

Why isn't is as simple as having a whole section called

Sideboxes Left, sideboxes Right, Centerboxes. Each with thier own Classes for Links, Backgrounds, Fonts.

I've literally spent hours trying to find what Classes do what only to find them spread over different parts of the css file.


So I tried Categories dressing and guess what that doesn;t exclusively deal with the sidebox or the categories CSS, so again I'm switching and changing things in two CSS files to try and find a combo I'm happy with.

Please help before I start pulling my hair out.

I understand that having many few classes doing many different things may seem like a effecient way to customise, but it sure makes it difficult to find what controls what, even with a developers extension.

again sorry if this sounds like I'm having a dig, it's probably my own lack of understanding of the setup in Zen Cart.

Hope someone can shed some light.

Logicalstep

[afo]

Have you checked the Tutorials/FAQ and the Wiki? (links at top of page)

I vaguely remember that someone did a write up on the stylesheet. Let me see if I can find it.

Edit : take a peek at http://www.zen-cart.com/forum/showthread.php?t=135954

[gjh42]

I agree that many of the rules in the standard stylesheet are spread out in unintuitive fashion. The sideboxes are relatively straightforward, though. Most of the time, left and right sideboxes will be styled the same, so it's easier to have selectors combined in one rule.

"that doesn;t exclusively deal with the sidebox or the categories CSS"... Do you mean by this that it doesn't completely nullify the stock stylesheet.css categories rules? There's really no way it can do that - it can't delete what is in another stylesheet. You can add all of your custom categories sidebox styling in the Cat Dressing stylesheet if you want to. There is very little in the stock stylesheet that applies to Cat Dressing categories or the categories sidebox specifically.

There are so many possible specific selector combinations just for sidebox elements that to include "blanks" for them all in the stylesheet would bloat it immensely. You can add rules for any particular situation you want using classes/ids that exist in the HTML output ready to be put to work.

[richphitzwell]

The first one I did was hell. After awhile though you learn the logic behind this cart and it is very easy to customize at that point. The great thing about Zen is it is based on standards and has a strong community.

All I can say is learn and take advantage of the community with specific questions but add back what you learned

[logicalstep]

Thanks for the advice, they link posted above is essentially what I've had to do in my own css file to make sense of it all.

I've got to say if it's hell on your first one, that means it's only slightly easier on the next. To me that not easy customisation.

This is more than hell for me, I seem to make a change and think great thats what I want, then two changes on and it look wrong again.

Can someone explain what categories dressing controls. it seem it controls the sidebox, but if you want to change the heading of the sidebox you have to go back into the Stylesheet css, or am I wrong?

I also had tyo go back into it to change the visited link colour for the categories....I means why isn;t that in the Categories dressing?

Also I've been nosing at some other sites CSS files and they seem to be structured differently again, with a stylesheet_boxes.css file?

Oh how I'd love to just have a CSs section for each component on the page, yes you might get some replication, but it would stand out like a sore thumb what you had to change to get the desired effect.

Logicalstep

[richphitzwell]

in my case significantly easier on second. Its all about learning a new system, like riding a bike.

[dw08gm]

I spent a day or so deconstructing/reconstructing all of my css's by copying to a spreadsheet. This resolved a lot of problems I was having at the outset and has put me in good stead ever since.

[logicalstep]

It does seem people are having to do a lot of digging or find a technique of their own to learn how to customise it.

I kind of wish I had one of you gurus to sit down with me and talk me through it!

Once thing that seem to be leading me the wrong way, is that the Class ID's that show up on the developer extension for Chrome, don;t always seem to relate to the CSS in the Stylsheet file.

What would be great is an image showing all the components on a page and and what classes are used to control them, with BIG arrows to there is no confusion.


Logiclastep

[stevesh]

Not all class and id names have rules in the default stylesheet, so if you need to style one of those elements, you need to add a rule in the stylesheet for that class or id name.

Personally, I wouldn't bother trying to figure out mods like Categories Dressing until you have the basics figured out.

I find the Web Developer plugin for Firefox to be more useful and easier to use than the tools built in to Chrome or Internet Explorer.

Mostly it's just a matter of trying stuff. Most of what I know about Zencart styling I learned trying to help other Zenners with their CSS problems here in the forums. You might try that.

[logicalstep]

I see where you are coming from.

I have been tryign to use the web developers extension in Chrome and now firefox (chrome was acting funny)


Anyway I have an example which I'm sure will help shed light on my confusion.

This is probably down to my basic fundamental understanding of css.

Why when I want to change the categories visited links colour do I have to change:

a:visited {
color: #000000;
text-decoration: none;
}

instead of:

A.category-top, A.category-top:visited {
color: #000000;
text-decoration: none;


When on the Web Developer extension there is no mention of a:visited anywhere.

This is a prime example of where I'm loosing my way with this.

Help very much appreciated.

Logicalstep