Frustrated, why is is so hard to customise?

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

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

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.

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

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

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

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.

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. :P

Logiclastep

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.

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

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

This controls how ALL anchor tags on the site are displayed
a:visited {
color: #000000;
text-decoration: none;
}

if you want to change only the categories

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

It has to be formatted correctly

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

}

Actually, a.category-top:visited {} is the right selector for the stock template visited category links (the links are named .category-top). Categories Dressing has a different naming structure, so .category-top will not affect its links at all (that's why you had to use a:visited {} to get results, though as Clyde noted, that is the wrong rule to affect just the categories sidebox). The stock stylesheet has no rules applying specifically to the categories sidebox container/heading; if you want to style it separately, you can just as well put the rules in stylesheet_categories_dressing.css as in stylesheet.css.

"an image showing all the components on a page and and what classes are used to control them"
That could be useful as a basic guide for the stock template, though it would quickly get confusing if you tried to get detailed with all the nested elements. It would not necessarily be accurate for templates other than stock, as some of them have very different layouts and even names for the same elements.

Well I have disabled catergories dressing as suggested, to try and get my head around default mods without any confusion.

I think my examples is a classic of why it's confusing to new template modders.

I mean if a.category-top:visited {} is the default ID to change the categories visited links, why isn't it used exclusively?

Ok thats over simplifying things in terms of being able to manage complex sites.

So right now I have categories Dressing un-installed and I want to change the height of the menu boxes on the left, not the text but the menu boxes, this is so I can put in a background image behind the text.
Now these two things I assume should be easy, but can I find the classes?....no.

Any chance someone could give me a hint and point me in the right direction?

Many thanks again for all the help so far.

Logicalstep

logicalstep:

I want to change the height of the menu boxes on the left, not the text but the menu boxes, this is so I can put in a background image behind the text.

The rule you are looking for is:

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

line 499 in the default stylesheet (v1.3.9.h)

Each box has then its own id.

I am not an expert zenner, nor coder, and I think everyone has basically his own approach in problem solving; I might agree with you that as a non expert, I would have liked an easier way based on my logics, but I guess there are many reasons behind the design of zen cart. So choose a method and go step by step, even asking 100 questions ...

"I mean if a.category-top:visited {} is the default ID to change the categories visited links, why isn't it used exclusively?"

What do you mean by "exclusively"? If you mean that that should always be the selector that affects those links, that would be nice, but if the output structure needs to be changed extensively to get more flexibility in display (which it does), then some of the original names can no longer apply. It is a matter of approach whether to keep some existing selector names or create a new set that is logical for the expanded display, and I chose to make a new set. Part of this is so that original rules that would cause unwanted results in the new structure don't have to be explicitly nullified, and control can be centralized in the new mod stylesheet (which can just as well be merged with the original stylesheet if someone wants it all in one file). Ideally, people would delete obsolete rules from the stylesheet to trim filesize, but that seldom happens and it can't be done by the mod.

Ok I understood probably half of that! Yes by exclusively I do mean using that one selector to control those links.

Are you saying that there are multiple classes controlling different elements in the template, so that if the styles are broken or don't conform to the layout, there is a fall-back system?

Or am I on the wrong path with this?

This would make sense as to why I don't seem to have control over some elements.

I mean I understand that you can have multiple elements controlled by a single class, but I wasn't aware you could have multiple classed assigned to the same element.

So in this case we have:

a.category-top:visited {} and a:visited {} controlling the categories link colours?

So which one wins, and is this repeated over the template and does this make it harder to track down what changes what?

for instance Keneso's suggestion to change .sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

To get the desired height in the category links just doesn;t work for me.

And trying to add a background images requires a custom Sidebox php file which re-assigns the classes to different selectors?

If so doesn't this make it extremely hard to track down the actual class that's controlling the element?

Logicalstep

a.category-top:visited {} and a:visited {}

a:visited {} applies to all visited links including a.category-top.
a.category-top:visited {} is more specific and applies only to .category-top links, and since its priority is higher by the rules of CSS, it will override a:visited {} if they differ.

There are cases like this throughout Zen Cart (and most if not all dynamic systems): a generic rule that applies sitewide to elements of a type like links or images or paragraphs, and specific rules that create exceptions to the generic rule.
If you are not familiar with how CSS works in this regard, it would be good to study the subject (https://www.w3schools.com is a good resource).

In the case of keneso's suggestion, the stock categories links are inline elements and padding will not increase their height. You can use line-height: x.xem; for that. (Work from 1.5em to start.)

Background images do not require a custom sidebox file in general, depending on what exactly you are trying to apply the images to. They may require stylesheet rule changes to make the desired elements display as block instead of inline. The categories sidebox required a custom PHP file for other structural changes in the output.

Gi hit it pretty square and many CSS resources are available. One note css3 only mostly works on the beta version of ie while pretty much all browsers are fully compatible solo stick with css2 if you care about ie.

With that said as you work on issues and get stuck and can't find the answer then ask specific questions in the title and someone will probably help you out but broad questions rarely work out.

Ok really appreciate the help so far.

I understand about site wide CSS Classes and that they cover certain things like links in general and I guess ultimately you would want these features to be consistent across a site. I guess being totally focused on the categories I was really trying to be able to mod one thing at a time, when in practicality it's just not possible and I should take a wider approach.

One thing that would be great, is that seeing as how the categories is one of the most fundamental things you can do to customise the look
of your site, would be some kind of in depth tutorial for explaining in detail What you need to be able to do these simple things like:

Change text Colour, Change Text height, Change separator image, Change background image of header, change Mouse out and over images of categories.

As the rest of the site seems easier to customise, I'm sure this would help so many new people in their first customisation of Zen Cart and prevent the many questions I have read on this particular mod.

I would volunteer myself, but alas I am still a noob.

Logicalstep

Change text Colour, - #categoriesContent {color: #112233;} for all text except links; #categoriesContent a {color: #112233;} for links.

Change Text height, - #categoriesContent {font-size: 1.2em;}

Change separator image, - Admin > Configuration > Layout Settings > various lines for different separators.

Change background image of header, - Not a categories-specific item but a general sidebox technique. #categoriesHeading {background: #aabbcc url(../images/yourheadingbg.gif) repeat-x;}

change Mouse out and over images of categories. - Not possible with stock categories sidebox (you can change font properties on hover, and background color/image if you set the links to block display). Categories Dressing provides full image replacement/swapping capabilities.