Frustrated, why is is so hard to customise?

[clydejones]

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;

}

[gjh42]

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.

[logicalstep]

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

[keneso]

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

[gjh42]

"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.

[logicalstep]

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

[gjh42]

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 (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.

[richphitzwell]

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.

[logicalstep]

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

[gjh42]

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.