"ZenCart Zen" Template Support

Clyde,

Your code works perfectly; I now see my ordered list. This was such a big mystery for me I can hardly comprehend that you have solved it so easily. I hope with study that the solution will help me comprehend the relationship of CSS and HTML.

I really appreciate this template and its flexibility and possibilities.

I will post a comment to the Exel thread to show a link to the solution.

Notageek

notageek:

Clyde,

Your code works perfectly; I now see my ordered list. This was such a big mystery for me I can hardly comprehend that you have solved it so easily. I hope with study that the solution will help me comprehend the relationship of CSS and HTML.

I really appreciate this template and its flexibility and possibilities.

I will post a comment to the Exel thread to show a link to the solution.

Notageek

glad you got it sorted

Hello, I need help like really bad I am lock out of my website admin page message given access denied I can seem to find out whats going on. the Zent cart version is 1.3.8. have not upgrade as of yet to the 1.3.9. can you please help us out are give some suggestions on find a solution to fix the problem thank you.
Site URL: http://www.hotfashions4u.com

chuck41:

Hello, I need help like really bad I am lock out of my website admin page message given access denied I can seem to find out whats going on. the Zent cart version is 1.3.8. have not upgrade as of yet to the 1.3.9. can you please help us out are give some suggestions on find a solution to fix the problem thank you.
Site URL: http://www.hotfashions4u.com

I'd suggest posting this in another forum section (www.zen-cart.com/forum/forumdisplay.php?f=128)

Your problem doesn't seem to have anything to do with this template.

Clyde,

I had a successful ordered list for songs in an album. I believe the main change to my site since then was installing the Image Handler, but I am not sure. Now, my ordered list wraps around the picture, which I am sure did not occur previously.

I will probably need to change databases or uninstall Image Handler to see the circumstances under which I can achieve the ordered list without the text wrap under the image.

In the meantime, I wondered if there was a way to stop the text wrap around the image. I found post 28 under the following thread: http://http://www.zen-cart.com/forum/showthread.php?t=69672&highlight=margin+wrap&page=3"[/URLwhich is discussing text wrap in the context of adding additional images, where it is suggested: > Testing on your site, I find that this works nicely to line up the additional images below your main image:

Code:
#productAdditionalImages .additionalImages img {
float: left;
margin-left: 20px;
}
I eliminated the "larger image" text long ago by simply redefining it in /includes/languages/my_template/english.php:

define('TEXT_CLICK_TO_ENLARGE', 'larger image');

define('TEXT_CLICK_TO_ENLARGE', '');

When null, it is not displayed at all.

---

I thought I would run this by you to see if you have encountered this problem of text wrap before. I love it but it does not work well with an ordered list.

In addition, the numbers in the ordered list are encroaching on the image, which did not occur previously.

I will let you know if I have success with debugging this. I will be happy not to use Image Handler if that is the source of the problem, although I do not see any mention of IH related to margin changes and text wrap.

I also will appreciate your thoughts.

Notageek

Clyde,

I find that while my product listing now shows an ordered listing (although with text wrap), the ordered list does not show on the prior category page listings.

Is there CSS code which would allow the ordered lists to show on the category pages also? It's only a snippet for each category, but it would clarify the listing a bit.

Thanks.

Notageek

notageek:

Clyde,

I find that while my product listing now shows an ordered listing (although with text wrap), the ordered list does not show on the prior category page listings.

Is there CSS code which would allow the ordered lists to show on the category pages also? It's only a snippet for each category, but it would clarify the listing a bit.

Thanks.

Notageek

If you're talking about the "product Listing" pages, then the answer is no.

the default display for Zen Cart on the "product listing" pages is to strip any "html tags" from the product description and then display only the first (I believe) 150 characters of the description.

notageek:

Clyde,

I had a successful ordered list for songs in an album. I believe the main change to my site since then was installing the Image Handler, but I am not sure. Now, my ordered list wraps around the picture, which I am sure did not occur previously.

I will probably need to change databases or uninstall Image Handler to see the circumstances under which I can achieve the ordered list without the text wrap under the image.

In the meantime, I wondered if there was a way to stop the text wrap around the image. I found post 28 under the following thread: http://http://www.zen-cart.com/forum/showthread.php?t=69672&highlight=margin+wrap&page=3"[/URLwhich is discussing text wrap in the context of adding additional images, where it is suggested:

I thought I would run this by you to see if you have encountered this problem of text wrap before. I love it but it does not work well with an ordered list.

In addition, the numbers in the ordered list are encroaching on the image, which did not occur previously.

I will let you know if I have success with debugging this. I will be happy not to use Image Handler if that is the source of the problem, although I do not see any mention of IH related to margin changes and text wrap.

I also will appreciate your thoughts.

Notageek

I'd need to see your site?

Clyde,

I will put my test site online once my web host advises me where to find the database. They will probably let me know Monday. I didn't realize I did not have this information until today.

That is very helpful information about the stripping of HTML in the product listing for a category. I may need to place a preamble in the product listings so it doesn't seem so ad hoc starting out with titles and artists' names in an unpunctuated list. I now see why other vendors seem to have avoided HTML list formats. I notice the HTML lists also do not work in the define pages and EZ Pages, although other HTML code does work in those pages.

Notageek

notageek:

Clyde,

I notice the HTML lists also do not work in the define pages and EZ Pages, although other HTML code does work in those pages.

Notageek

They will work in those pages provided they are properly implemented, have appropriate tags and the correct styling in the stylesheet.css

CSS Styling

.mylist ul {
list-style: decimal;
}

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/templates/zencart_zen/css/stylesheet_betterCategoriesEzInfo.css
22 Unknown pseudo-element or pseudo-class :nth-child
URI : http://www.ics-bg.com/includes/templates/zencart_zen/css/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

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:

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

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

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 https://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

notageek:

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 https://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

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 https://www.riverfrontsouth.com, "Conditions of Use."

Not only did the numbers 1. 2. 3. punch out into the margin on the https://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 https://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 https://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

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;
}):

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 https://www.riverfrontsouth.com, "Conditions of Use."

Not only did the numbers 1. 2. 3. punch out into the margin on the https://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 https://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 https://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/ )

notageek:

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

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

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

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