"ZenCart Zen" Template Support

[vasilics]

Hello Clyde,
sorry for the late reply, but I was missing from work for a couple of weeks.
You wanted an example of the errors, in the theme.
So here are the details, I have checked with W3C CSS Validator:

144 .date Property text-shadow doesn't exist in CSS level 2.1 but exists in : 2px 2px 2px #dfdfdf 2px 2px 2px #dfdfdf
145 .date attempt to find a semi-colon before the property name. add it
0 .date Parse Error null
145 .date attempt to find a semi-colon before the property name. add it
145 .date attempt to find a semi-colon before the property name. add it
0 .date 135 is not a direction value : 135, 135
145 .date Property strength doesn't exist : 2 2
145 .date Parse Error 2);
146 .date Parse Error }
181 #navMain a Value Error : color Lexical error at line 181, column 8. Encountered: "#" (35), after : "#" :#fff;
182 Unknown pseudo-element or pseudo-class :left
182 float Value Error : color Parse Error left;
183 Unknown pseudo-element or pseudo-class :none
183 text-decoration Value Error : color Parse Error none;
184 text-decoration Value Error : color Parse Error }
314 .leftBoxContainer, #categories Property -moz-border-radius-topright doesn't exist : 10px 10px
315 .leftBoxContainer, #categories Property -moz-border-radius-topleft doesn't exist : 10px 10px
316 .leftBoxContainer, #categories Property -webkit-border-top-right-radius doesn't exist : 10px 10px
317 .leftBoxContainer, #categories Property -webkit-border-top-left-radius doesn't exist : 10px 10px
318 .leftBoxContainer, #categories Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
319 .leftBoxContainer, #categories Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
326 .rightBoxContainer Property -moz-border-radius-topright doesn't exist : 10px 10px
327 .rightBoxContainer Property -moz-border-radius-topleft doesn't exist : 10px 10px
328 .rightBoxContainer Property -webkit-border-top-right-radius doesn't exist : 10px 10px
329 .rightBoxContainer Property -webkit-border-top-left-radius doesn't exist : 10px 10px
330 .rightBoxContainer Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
331 .rightBoxContainer Property border-top-left-radius doesn't exist in CSS level 2.1 but exists in : 10px 10px
384 Unknown pseudo-element or pseudo-class :nth-child
404 Unknown pseudo-element or pseudo-class :nth-child
413 #bannerboxHeading Value Error : background-color none is not a color value : none none
506 Unknown pseudo-element or pseudo-class :nth-child
605 Unknown pseudo-element or pseudo-class :nth-child
URI : http://www.ics-bg.com/includes/templ...riesEzInfo.css
22 Unknown pseudo-element or pseudo-class :nth-child
URI : http://www.ics-bg.com/includes/templ...index_home.css
19 #CustomSlideshow Property -webkit-transform doesn't exist : rotate(-3deg) scale(0.9) rotate(-3deg) scale(0.9)
20 #CustomSlideshow Property -moz-transform doesn't exist : rotate(-3deg) scale(0.9) rotate(-3deg) scale(0.9)
21 #CustomSlideshow Property transform doesn't exist : rotate(-3deg) scale(0.9) rotate(-3deg) scale(0.9)
35 form#news fieldset Property -moz-border-radius doesn't exist : 5px 5px
36 form#news fieldset Property -webkit-border-radius doesn't exist : 5px 5px
37 form#news fieldset Property -khtml-border-radius doesn't exist : 5px 5px
38 form#news fieldset Property border-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
40 Unknown pseudo-element or pseudo-class :last-of-type
46 form#news legend Property text-shadow doesn't exist in CSS level 2.1 but exists in : 0 1px 1px #acadb0 0 1px 1px #acadb0
69 form#news ol li Value Error : background Too many values or values are not recognized : rgba(255,255,255,0.3) rgba(255,255,255,0.3)
71 form#news ol li Value Error : border-color rgba(255,255,255,0.6) is not a border-color value : rgba(255,255,255,0.6) rgba(255,255,255,0.6)
74 form#news ol li Property -moz-border-radius doesn't exist : 5px 5px
75 form#news ol li Property -webkit-border-radius doesn't exist : 5px 5px
76 form#news ol li Property -khtml-border-radius doesn't exist : 5px 5px
77 form#news ol li Property border-radius doesn't exist in CSS level 2.1 but exists in : 5px 5px
81 Unknown pseudo-element or pseudo-class :first-of-type
91 Unknown pseudo-element or pseudo-class :first-of-type
149 Unknown pseudo-element or pseudo-class :first-of-type
205 #holder Property -moz-border-radius doesn't exist : 10px 10px
206 #holder Property -webkit-border-radius doesn't exist : 10px 10px
207 #holder Property -webkit-box-shadow doesn't exist : 0 1px 3px #666 0 1px 3px #666


Please tell me if it is possible to repair that.
Thanks in advance

[clydejones]

Hello Clyde,
sorry for the late reply, but I was missing from work for a couple of weeks.
You wanted an example of the errors, in the theme.
So here are the details, I have checked with W3C CSS Validator:

Please tell me if it is possible to repair that.
Thanks in advance

The following are all valid CSS3 properties and work in FF, Opera, Chrome and Safari.
They are ignored in IE7/8.

-moz-box-shadow
-webkit-box-shadow
box-shadow
text-shadow
rgba(255,255,255,0.6)
-moz-border-radius
-webkit-border-radius
border-radius
:last-of-type
:nth-child
filter: Shadow(Color:#DFDFDF, Direction:135, Strength:2);

The W3C CSS Validator just needs to catch up with stylesheets that contain these properties.

You can safely delete the following 2 stylesheets.
index_home.css
handheld_stylesheet.css

[vasilics]

Clyde,
thank you very much for that information. I understand now, so sorry to bother you. Great theme again :)

[notageek]

Clyde,

Regarding the CSS and HTML code in post No. 170, 2 questions:

1. For the HTML code you suggest:

<div class="mylist">
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</div>

With your pre-1.3.9 Zencart_Zen template, I had success with unordered lists without using the <div> commands. In fact, I have never actually used those in any HTML pages so far, and have had no problems with the way the lists render, at least in Firefox and Google Chrome and IE. In www.riverfrontsouth.com, I see a couple of unordered lists in my Define Pages, for example my shipping page, and my EZ Pages, for example my Search Terms page which uses both ordered and unordered lists.

What does the <div class="mylist"> and </div> do, and are they really necessary in the HTML for Define Pages and EZ Pages, and if so, just at the beginning and end of the page or around each list in the page?

2. As to the CSS Style, you provided the following code:

.mylist ul {
list-style: decimal;
}

Maybe the ".mylist ul" is the reason the <div> commands are necessary in the pages. If so, then "mylist" is the actual name of all lists in the pages requiring the <div> command, and that is what will make it work--is that correct? If correct, why did the lists work without the <div> commands in your prior template?

I am uncertain where to place the CSS style to make it applicable to both Define Pages, which are stored as regular text files, and EZ Pages, which are stored as .sql files. Also, I am not sure if it is applicable to <ol> as well as <ul>, both ordered lists and unordered lists.

Thank you for your thoughts on the above.

Notageek

[clydejones]

Clyde,

Regarding the CSS and HTML code in post No. 170, 2 questions:

1. For the HTML code you suggest:



With your pre-1.3.9 Zencart_Zen template, I had success with unordered lists without using the <div> commands. In fact, I have never actually used those in any HTML pages so far, and have had no problems with the way the lists render, at least in Firefox and Google Chrome and IE. In www.riverfrontsouth.com, I see a couple of unordered lists in my Define Pages, for example my shipping page, and my EZ Pages, for example my Search Terms page which uses both ordered and unordered lists.

What does the <div class="mylist"> and </div> do, and are they really necessary in the HTML for Define Pages and EZ Pages, and if so, just at the beginning and end of the page or around each list in the page?

2. As to the CSS Style, you provided the following code:



Maybe the ".mylist ul" is the reason the <div> commands are necessary in the pages. If so, then "mylist" is the actual name of all lists in the pages requiring the <div> command, and that is what will make it work--is that correct? If correct, why did the lists work without the <div> commands in your prior template?

I am uncertain where to place the CSS style to make it applicable to both Define Pages, which are stored as regular text files, and EZ Pages, which are stored as .sql files. Also, I am not sure if it is applicable to <ol> as well as <ul>, both ordered lists and unordered lists.

Thank you for your thoughts on the above.

Notageek

If you don't wish to use the <div></div> formatting, you can just as easily use <ol> </ol>

style the would then be as follows:
ol {
list-style:decimal;
}

you can also style the <ul></ul> as follows:
ul {
list-style:none;
}

You can add these to the bottom of the stylesheet.css

[notageek]

Clyde,

I added the following to the bottom of my includes/templates/zencart_zen/css/stylesheet.css ( under #authorizenetContent {
margin: 0 auto;
width: 90px;
}):

ol {
list-style:decimal;
}
ul {
list-style:none;
}

This caused an ordered list that had the style: <ol type="a"> to render as a list numbered with 1. 2. 3. instead of a. b. c.

The rendition of this that I expected is seen from the corresponding page in www.riverfrontsouth.com, "Conditions of Use."

Not only did the numbers 1. 2. 3. punch out into the margin on the www.gokaraokemachine.com WAMP test site, they did not use the a. b. c. format called for.

Also, none of my unordered <ul> lists are showing the bullets yet.

The bullets show correctly on the www.riverfrontsouth.com site from which the files were copied; for example, see the About Us page.

I looked at the code in the old Zencart_Zen stylesheet.css and it is very different, so I was unable to ascertain what to try next.

Thanks for your help.

I have placed my www.gokaraokemachine.com site online, but must turn my attention elsewhere before tweaking it with the stylesheet code. I will try to upload 6 test products and then will not get back to it for a while.

Notageek

[clydejones]

Clyde,

I added the following to the bottom of my includes/templates/zencart_zen/css/stylesheet.css ( under #authorizenetContent {
margin: 0 auto;
width: 90px;
}):



This caused an ordered list that had the style: <ol type="a"> to render as a list numbered with 1. 2. 3. instead of a. b. c.

The rendition of this that I expected is seen from the corresponding page in www.riverfrontsouth.com, "Conditions of Use."

Not only did the numbers 1. 2. 3. punch out into the margin on the www.gokaraokemachine.com WAMP test site, they did not use the a. b. c. format called for.

Also, none of my unordered <ul> lists are showing the bullets yet.

The bullets show correctly on the www.riverfrontsouth.com site from which the files were copied; for example, see the About Us page.

I looked at the code in the old Zencart_Zen stylesheet.css and it is very different, so I was unable to ascertain what to try next.

Thanks for your help.

I have placed my www.gokaraokemachine.com site online, but must turn my attention elsewhere before tweaking it with the stylesheet code. I will try to upload 6 test products and then will not get back to it for a while.

Notageek

Although this thread is not used as a how-to for CSS styling rules, I'll try to give you a quick overview:

ol {
list-style: decimal;
}
This will style the first level of your list as 1 2 3 etc.
If you have a multilevel list then you will need to style each level.
You could do that as follows:
ol ol {
list-style: lower-alpha;
}


----------
To get bullets for you unordered <ul> list you have the following options
none No marker
disc Default. The marker is a filled circle
circle The marker is a circle
square The marker is a square

ul {
list-style: disc; /*You can replace this with any of the above options */
}
-----------

This link may help ( css.maxdesign.com.au/listamatic/ )

[clydejones]

Clyde,

This caused an ordered list that had the style: <ol type="a"> to render as a list numbered with 1. 2. 3. instead of a. b. c.


Notageek

<ol type="a"> is not a valid call to a style listed in the stylesheet.css

You will need to define a style; either a class or id in the stylesheet.css

.alpha {
list-style: lower-alpha;
}


You would then have <ol class="alpha">

[notageek]

Clyde,

Thank you for taking the trouble to explain the foregoing. I really would be very lost without those basic instructions. Most of my efforts are based on examples rather than real understanding of code.

What perplexes me the most is that my HTML code works in 1.3.8a with the Zencart_Zen template, but the same code does not produce the expected lists with the 1.3.9 versions. I didn't expect an upgrade to challenge my knowledge and use of HTML, and lead me to study CSS.

I would not have known where to start to troubleshoot the non-functioning HTML lists without your guidance. Thank you very much for your patience.

Notageek

[notageek]

Clyde,

Here is what I added to the bottom of includes/templates/zencart_zen/css/stylesheet.css to make my xhtml ordered and unordered lists work properly for the Define Pages (and hopefully for EZ pages, which I haven't tried yet) on my version 1.3.9f Zen Cart site:

ol {margin-left: 2em; padding-left: 0;
}
ol {
list-style-position:outside;
}
ol {
list-style-type:decimal;
}
ol ol {
list-style-type:upper-alpha;
}
ul {margin-left: 2em; padding-left: 0;
}
ul {
list-style-position:outside;
}
ul {
list-style-type:disc;
}
ul ul {
list-style-type:circle
}

I was only able to make the lower alpha (a, b, c) list work by either stating "list-style-type:lower-alpha" right in the list, so I worked around that by either using an unordered list or defining the ordered list's secondary list as upper-alpha and using the secondary list when I needed "A, B, C". That's mainly due to my lack of in depth comprehension of the CSS and XHTML.

My only remaining puzzle is: why did the lists in the prior site have an automatic carriage return before and after the <ul> and </ul> or <ol> and </ol>? I now need to add a <br /> before and after these lists.

I suppose with further research I will find out why the <br /> is now needed at the beginning and end of HTML lists.

Thanks for your help in guiding and nudging me to actually try to comprehend CSS and decrease my ignorance slightly. I hope this information helps someone.

Notageek