Page layout question

Sounds great. Where can I get this web developer extension? I'm already running Firefox.

Ian

Look in Mozilla/Firefox home page for extensions, or the author's site, https://www.chrispederick.com.

Okay, so I've installed this web developer package but after playing with it for a while I'm blown away. I have no idea what words like ancestors and children mean to a computer??? Suppose I want to edit the colors of the information tab links regular and mouse over colors, how might I proceed to use this package to find where these color codes are? In the past I've found changing colors easy and the aggravating part is that when you change the font color on one thing, yet another changes that you were already happy with. The same can be said for my link colors in the footer.

Ian

The best thing for you to do is look at https://www.w3schools.com for their beginning CSS tutorials.

The fundamental thing about controlling a particular item's appearance/position is to address it with enough specificity. If you say
a {color: #00ff00;}
you are making all links sitewide green.
If you say
#categories a {color: #00ff00;}
you are making links inside the #categories box green.
(If you say
a #categories {color: #00ff00;}
you are making elements named #categories that are inside links green, and if you say
a#categories {color: #00ff00;}
you are making links named #categories green.)
So you see that exact spelling, capitalization and spacing matter.

An ancestor is any element above the current element in the list in the Web Developer box, or a page element that encloses the current element. A child of the current element can be ignored for basic CSS.

Hi Ian, try to understand and memorize Zen Cart's stylesheet.css when you have time. Once you get the hang of it, it's not that hard at all :) One element within a CSS file may control more than a few parts of your zen cart shop. You'll need to know what controls what. I learnt it by trial and error, and making some comments within the CSS for my own reference.

Glenn, this computer is really beginning to upset me. I'm making changes in my stylesheet but when I reload the page I can not see any changes. I've made several changes and sometimes I have to wait 10 minutes and upload a page 5 times before the change is actually visual. It even constantly keeps reverting back to my old logo image instead of using my new logo image. It's like my pc just picks something to go with and to hell if it's the same thing it picks on the next page load. I also want to change the color of the fonts for my "information" sidebox and the footer but I can't seem to find which color in my style sheet to change. Please help.I use eyedropper tool in graphical editors such as photoshop to identify the exact colors I'm looking for in the website so I can edit/find the correct section of the CSS. I know this is not the best way but it works.

Also, check on your connection. Your computer may be loosing a lot of packets. I'm not sure what it is but it smells like something to do with your connection as well.

Your computer may be loosing a lot of packets? I'm going through the css tutorial at w3schools right now so hopefully my next zencart css attempt will be more successful.

Ian

Ok, so I've made the mistake of using the edit css feature in the web developer program and now my entire stylesheet is on one stinkin line. When I open it in notepad ++ it's still on one line. How do I get to go back? This is really silly, I edited the ez pages color links and when I refresh in Firefox it only changed about half my links but I check it in IE and they all changed like they were supposed to. Any idea why?

Ian

Hmm, I've never used the "save" feature in Edit CSS, so I didn't know it would do that. (Actually, I don't know if it is supposed to do that.) I generally copy the successful edits into the stylesheet that I have open in Notepad++.

As to why the difference between FF and IE, that may be because you have some subtle error that IE detects and tries to compensate for (the "make it easy for dummies" approach), while FF throws out the error lines as it is supposed to per CSS standards.

Man this stinks Glenn, this program has screwed up my style sheet and I can not find a command that fixes it. It's a nightmare.

Ian

I can imagine. I don't suppose you have a recent copy saved somewhere else?

Glenn, funny you mentioned that because I backed up my files yesterday. I went to them and looked and even when I open my backed up css file it still does the same crap. I've found that I can use the "wrap" feature to make it list everything down the page instead of across but then it's all jumbled together like like a paragraph and nothing is aligned to the left anymore. I gotta be honest, this web developer package is not very impressive so far.

Ian

Well, aside from this unfortunate occurrence, it has a lot of very powerful and useful tools. I use it many times every day, and couldn't do some of the diagnostics I do without it (and occasionally the Firebug extension too).

Was the backup from before you started using the Edit CSS?

r1formetoo:

I gotta be honest, this web developer package is not very impressive so far.
Ian
You may be able to reformat your stylesheet by pasting it in to the CSS Formatter and Optimiser at the following address...don't blame me if it doesn't work though..:cool:
http://www.cleancss.com/

As a matter of interest - what (TEXT) editing tools are you using to do your editing ?
The web developer tools are very useful - I tend to use similar tools - only on Opera instead - my personal preference for browser.
The thing with any of these tools though - is that is all they are "Tools" - and as with any other type of tool - you need to know how it is used to get the desired result - kinda like using a wrench to hammer a nail in - it will work sometimes - but better to use a hammer ?
Unfortunately - when you first start with CSS (and zen) you will probably find you have a very steep learning curve - it does get easier (honest) but very often the only way to learn about this stuff is to "learn by your mistakes"
My own experience has been that I first started "messing" with zen cart probably more than 2 years ago - gave up on several occasions (or to be more accurate - took a rest) and came back to it with a fresh mind - each time it has become a bit easier - during those rest periods - I messed about with CSS quite a bit - but there is a lot to learn...
Any issues you have with Internet Explorer - are just that - IT is a (in my opinion) sorry excuse for a browser - something you will find will cause you many headaches trying to find why it fails to render a page correctly - which renders perfectly well in most other browsers....
Might be a good idea to try to keep some clean backup copies of what you are editing too...

Good Luck - happy new year..:smile:

r1formetoo:

Your computer may be loosing a lot of packets? I'm going through the css tutorial at w3schools right now so hopefully my next zencart css attempt will be more successful.

Ian

I can see that Ian. Keep going! I enjoy reading this thread as I am very interested myself. CSS for zen cart takes patience, I hate it but also love the CSS?

Happy New Year anyway, and to vynyl! Keep up the great work! Sorry this post is not constructive but I'll toss in from time to time if I can be a help.

Hey Glenn, I'm still trying to figure out how to change colors of my links so that the Information links and the Categories links are the same color green, yet all the while not changing my nice yellow ez pages links in the grass. It's easy to find the code for the yellow but I don't understand how the code

a:link,#navEZPagesTOC ul li a
{ color:#F7C808;
text-decoration:none; }

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

a:hover,#navEZPagesTOC ul li a:hover,#navMain ul li a:hover,#navSupp ul li a:hover,#navCatTabs ul li a:hover
{ color:#000; }

wants to change all the links. I can only gather that somehow the computer considers all these links to be ez pages links and that I somehow need to break up these into different classes? If that's right I'm not really sure how to break it all up since I can't seem to find it in my stylesheet all jumbled together. Perhaps I don't know what they are calling the Information links....

Ian

Im new to this community, i bought a zen cart templete and have been having trouble changing the templete logo to my custome logo.

https://www.quickerprinter.net currently i have no logo banner please some one help me (please view my site before responding)

Thanks:blink:

lucid3602003:

Im new to this community, i bought a zen cart templete and have been having trouble changing the templete logo to my custome logo.

www.quickerprinter.net currently i have no logo banner please some one help me (please view my site before responding)

Thanks:blink:

You, unfortunately, purchased a TemplateMonster template.
There should have been an image in the area to left of the languages/shopping cart box. Did you delete it?

Tina

lucid3602003:

Im new to this community, i bought a zen cart templete and have been having trouble changing the templete logo to my custome logo.

https://www.quickerprinter.net currently i have no logo banner please some one help me (please view my site before responding)

Thanks:blink:

Lucid, try reading the tutorial below. That will likely help shed some light for you. I'd like to ask you to please start another thread concerning this if you need help. What little I know I'll be glad to share but I'd like to keep this thread on it's topic please.

Ian
https://www.zen-cart.com/tutorials/index.php?article=125

a:link,#navEZPagesTOC ul li a

This refers to all links sitewide, and to specifically links inside a list in the #navEZPagesTOC.

a:visited

This refers to all links that have been clicked recently.

a:hover,#navEZPagesTOC ul li a:hover,#navMain ul li a:hover,#navSupp ul li a:hover, #navCatTabs ul li a:hover

This refers to all links, and to a string of specific links, that are being hovered over by the mouse.

Any time you have a group of selectors getting one treatment, and you want one of those selectors to be different, remove that one from the list and give it its own rule.
In this case, you want the information and categories links to be different. Currently they presumably fall under the "all links" heading; If you address them by name you can control them individually. Each sidebox has a unique id which is the sidebox's name, in this case #information and #categories. Add to your stylesheet

#information a, #categories a {color: #00ff00;}

This will refer to links inside the information and categories boxes, and nowhere else.

That I understand. Now we're cookin with gas. Thanks.

Ian