Categories Description with HTML

[Jeff G]

I don't know if this is ZC or php (or even something else).

I added a Categories Description in HTML mode with 2 tags at the start of the text:

<p><font face="Verdana" size="2">

and associated closing tags:

</font></p>

When clicking a category the page would display with the description and the sub-cats. Some category pages were fine, but others display the sub-categories in a different typeface than the default.

I found the problem cats had a space between the end of the text and the </font>.

<p><font face="Verdana" size="2">This is a desc of the category. </font></p>

The code was ignoring both the </font> and the </p> tags. This was cleary seen using the browser "view source" for the page.

This is NOT at all a big issue. Just a report of a "gotcha" that I found.

[SirBuck]

check your html again. Another thing you may want to consider is using CSS rather than some of the <font> tags.

You can add to your current stylesheet.css..

That may be the way to go.

Also, look over your code and make sure no end tags were forgotten. If you leave something out, the editor will try and correct for you and its almost never exactly right.

[Kim]

Why are you using html tags instead of styling the categories with CSS?

[Jeff G]

Thanks for the quick replies.

the editor will try and correct for you and its almost never exactly right.

I am pretty sure that is exactly what happened. I noticed that I forgot the closing tags as I hit save. When I went back to fix, I saw that the editor already "fixed" it.

As far as the use of CSS... pretty simple reason, I didn't think of it and I am not really up on usage. I will definately read up!

[SirBuck]

Thanks for the quick replies.

I am pretty sure that is exactly what happened. I noticed that I forgot the closing tags as I hit save. When I went back to fix, I saw that the editor already "fixed" it.

As far as the use of CSS... pretty simple reason, I didn't think of it and I am not really up on usage. I will definately read up!

Just make sure when you see that the editor "Fixed" it for you, double check that it didn't add any unnecessary tags.

As far as the CSS, in the meantime take a look at ZenCart's stylesheet.css and add to it using the same methods..
Thats will help while you are reading up.

[hardtokill]

I am having the exact same problem using the HTML editor - different fonts and formats on different category description pages.
Compare the following:
http://www.theladybugboutiqueonline....ndex&cPath=104

http://www.theladybugboutiqueonline....index&cPath=88

Although the "Editor" say the fonts and size are identical, the HTML coding is night and day, thus the different output. The former is what I want (Path=104) for all of my fonts/sizes. It was created first.

2 questions:
Where do I go (what file) to get the font to default in all future cases, and what should I edit?
and
Exactly where is the "english" of the description located (Path=104, Path=88, etc.)?

Thanks in advance for your input.

David

[gjh42]

Apply your font styling to #categoryDescription {} in /includes/templates/your_template/css/stylesheet.css, and all category descriptions will look the same. All you have to put in the individual descriptions is the <p>, <strong>, etc. tags.

Not quite sure what you mean by the "English", but if you are talking about the text content, it is stored in the database, not in a file.

cPath is the category path.

And lastly, do you really want all your text to be that tiny? Are you going to issue a magnifying glass to your users who don't have perfect eagle-eye vision? The text should be comfortable to read.

[hardtokill]

[QUOTE=gjh42;652781]Apply your font styling to #categoryDescription {} in /includes/templates/your_template/css/stylesheet.css, and all category descriptions will look the same. All you have to put in the individual descriptions is the <p>, <strong>, etc. tags.

Here is the file you referred to:

a img {border: none; }

a, #navEZPagesTOC ul li a {
        color: #454545;
        text-decoration:underline;
        }
 
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {

        }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
        font-size: 1.1em;
        }

.biggerText {
        font-size: 1.2em;
        }

h1, h2, h3, h4, h5, h6 {
        margin: 0.3em;
		font-size:13px;
        }

CODE {
        font-family: arial, verdana, helvetica, sans-serif;
        font-size: 1em;
        }

FORM, SELECT, INPUT {
        display: inline;
        font-size: 1em;
        }
FORM	{margin:0px; padding:0px;}

TEXTAREA {
        float: left;
        margin: auto;
        display: block;
        width: 95%;
        }

input:focus, select:focus, textarea:focus {

        }

FIELDSET {
        padding: 0.5em;
        margin: 0.5em 0em;
        border: 1px solid #C3C3C3;
		background:#DCDBD9;
 		height:100%;
        }

LEGEND {
        font-weight: bold;
        }

LABEL, h4.optionName {
        line-min-height: 1.5em;
        padding: 0.2em;
        }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
        }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
        float: left;
        }

LABEL.inputLabel {
        width: 11em;
        float: left;
        }

LABEL.inputLabelPayment {
        width: 15em;
        float: left;
        }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
        width: 12em;
        float: left;
        }

P, ADDRESS {
        padding: 0.5em;
        }

ADDRESS {
        font-style: normal;
        }

.clearBoth {
        clear: both;
        }

HR {
        min-height: 1px;
        margin-top: 0.5em;
        border: none;
        border-bottom: 1px solid #9a9a9a;
        }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
        line-min-height: 1.8em;
        padding: 0.2em;
        border: 1px solid #000000;
        }

.messageStackWarning, .messageStackError {
        background-color: #ff0000;
        color: #ffffff;
        }

.messageStackSuccess {
        background-color: #F1F6E6;
        color: #000000;
        }

.messageStackCaution {
        background-color: #FFFF66;
        color: #000000;
        }

/*wrappers - page or section containers*/
#mainWrapper {
        text-align: left;
        width: 100%;
        vertical-align: top;
        }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
        margin: 0em;
        padding: 0em;
        }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
        margin: auto;
        } 

#tagline {
        color:#000000;
        font-size: 2em;
        text-align : center;
        vertical-align: middle;
        }

#sendSpendWrapper {
        border: 1px solid #cacaca;
        float: right;
        margin: 0em 0em 1em 1em;
        }

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
        margin: 0;
		width:95%
        }

.wrapperAttribsOptions {
        margin: 0.3em 0em;
        }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks { margin-top:5px;}
.navNextPrevCounter {
        margin: 0em;
        font-size: 0.9em;
        }
.navNextPrevList {
        display: inline;
        white-space: nowrap;
        margin:0px 2px 3px 0px;
        list-style-type: none;
        }
.navNextPrevWrapper{
		margin-bottom:2px;
		}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
        margin: 0em;
        background-color: #9a9a9a;
        font-weight: bold;
        color: #ffffff;
        min-height: 1%;
        width: 100%;
        }

#navMain ul, #navSupp ul, #navCatTabs ul  {
        margin: 0;
        padding:  0.5em 0em;
        list-style-type: none;
        text-align: center;
        line-min-height: 1.5em;
        }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
        display: inline;
        white-space: nowrap;
        }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
        text-decoration: none;
        padding: 0em 0.5em;
        margin: 0;
        color: #ffffff;
        }

#navEZPagesTOCWrapper {
        font-weight: bold;
        float: right;
        min-height: 1%;
        border: 1px solid #000000;
        }

#navEZPagesTOC ul {
        margin: 0;
        padding:  0.5em 0em;
        list-style-type: none;
        line-min-height: 1.5em;
        }

#navEZPagesTOC ul li {
        white-space: nowrap;
        }

#navEZPagesTOC ul li a {
        padding: 0em 0.5em;
        margin: 0;
        }

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
        margin:5px 5px 0 0px;
        }
.buttonRow2{
        margin:5px 0px 0 0px;
        }


#navBreadCrumb {
        background-color: #cc9900;
        }

#navEZPagesTop {
        background-color: #ffff33;
        }

#navBreadCrumb, #navEZPagesTop {
        font-size: 0.95em;
        font-weight: bold;
        margin: 0em;
        padding: 0.5em;
        }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
        vertical-align: top;
        }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
        /*font-size: 1.2em;*/
        /*padding: 0.5em;*/
        }
.content	{
		margin:0 10px 0 10px;
		}

.alert {
        color: #FF0000;
        margin-left: 0.5em;
		margin-right:5px;
        }
.advisory {}
.important {
        font-weight: bold;
		margin:5px;
        }
.notice {}
.rating{}
.gvBal {
        float: right;
        }
#bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
        padding: 0.8em;
        }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
        font-size: 0.9em;
        }

/*Shopping Cart Display*/
#cartAdd {
        float: right;
        text-align: center;
        margin: 1em;
        border: 1px solid #000000;
        padding: 1em;
        }

.tableHeading TH {
        border-bottom: 1px solid #cccccc;
        }

.tableHeading, #cartSubTotal {
        background-color: #e9e9e9;
         }

#cartSubTotal {
        border-top: 1px solid #cccccc;
        font-weight: bold;
        text-align: right;
        line-min-height: 2.2em;
        padding-right: 2.5em;
        }

.tableRow, .tableHeading, #cartSubTotal {
        min-height: 2.2em;
        }

.cartUnitDisplay, .cartTotalDisplay {
        text-align: right;
        padding-right: 0.2em;
        }

#scUpdateQuantity {
        width: 2em;
        }

.cartQuantity {
        width: 4.7em;
        }

.cartNewItem {
        color: #B2331D;
        position: relative;  /*do not remove-fixes stupid IEbug*/
        }

.cartOldItem {
        color: #660099;
        position: relative;   /*do not remove-fixes stupid IEbug*/
        }

.cartBoxTotal {
        text-align: right;
        font-weight: bold;
        }

.cartRemoveItemDisplay {
        width: 3.5em;
        }

#cartAttribsList {
        margin-left: 1em;
        }

#mediaManager {
width: 50%; 
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {

        }
.normalprice{ text-decoration:line-through; font-size:11px;}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
		font-size:12px;
		text-transform:uppercase;
        }

#cartBoxListWrapper ul, #ezPageBoxList ul {
        list-style-type: none;
        }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
        margin: 0;
        padding: 0.2em 0em;
        } 

.totalBox {
        width: 5.5em;
        text-align: right;
        padding: 0.2em;
        }

.lineTitle, .amount {
        text-align: right;
        padding: 0.2em;
        }

.amount {
        width: 5.5em;
        }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
        margin: 0em 1em 1em 0em ;
        }

.categoryIcon {}
#cartImage {
        margin: 0.5em 1em;
        }

/*Attributes*/
.attribImg {
        width: 20%;
        margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
        margin: 1em 0em;
        }

/*sideboxes*/
.columnLeft {}
.columnRight {}

h3.leftBoxHeading, h3.leftBoxHeading a {
        /*font-size: 1em;*/
        color: #ffffff;
        }

.leftBoxHeading, .centerBoxHeading {
        margin: 0em;
        padding: 0.5em 0.2em;
        }

.leftBoxContainer {
        border: 1px solid #ffffff;
        margin-top: 1.5em;
        }

.sideBoxContent {
        padding: 0.4em;
        }

h3.rightBoxHeading, h3.rightBoxHeading a {
        font-size: 1.1em;
        color: #FFFF00;
        }

.rightBoxHeading {
        margin: 0em;
        background-color: #663366;
        padding: 0.2em 0em;
        }

h3.leftBoxHeading a:hover {
        color: #FFFF33;
        text-decoration: none;
        } 

h3.rightBoxHeading a:hover {
        color: #FF0000;
        text-decoration: none;
        }

.rightBoxContent {
        margin-bottom: 1em;
        }

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
       
        }

.cartTotalsDisplay{
 font-size: 10px;
}

#bestsellers .wrapper {
        margin: 0em 0em 0em 1.5em;
        }

#bestsellers ol {
        padding: 0;
        margin-left: 1.1em;
        }

#bestsellers li {
        padding: 0;
        margin: 0.3em 0em 0.3em 0em;
        }

#bannerboxHeading {
        background-color: #0000CC;
}

#upProductsHeading {
        text-align: left;
        }

#upDateHeading {
        text-align: right;
        }

/*misc*/
.back {
        float: left;
        }

.forward {
        float: right;
        }

.bold {
        font-weight: bold;
        }

.rowOdd {
        background-color: #E8E8E8;
        min-height: 1.5em;
        vertical-align: top;
        }

.rowEven {
        background-color: #F0F0F0;
        min-height: 1.5em;
        vertical-align: top;
        }

CAPTION {
        /*display: none;*/
        }

#myAccountGen li, #myAccountNotify li {
        margin: 0;
        } 

.accountTotalDisplay, .accountTaxDisplay {
        width: 20%;
        text-align: right;
        /*vertical-align: top*/
        }

.accountQuantityDisplay {
        width: 10%;
        vertical-align: top
        }

TR.tableHeading {
        min-height: 2em;
        }

#siteMapList {
        width: 90%;
        float: right;
        }

.ratingRow {
        margin: 1em 0em 1.5em 0em;
        }

LABEL#textAreaReviews {
        font-weight: normal;
        }

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
       
        }

/*!!!!!!!!!*/
#gvFaqDefaultMainContent{margin:10px 15px 0 15px;}
#gvFaqDefaultContent{margin:0 5px 0 5px;}
#reviewsDefaultNoReviews{margin:0 5px 5px 5px;}
#createAcctSuccessMainContent{ margin:5px;}

Excuse my ignorance, but I can't seem to find the section you mentioned.
By the way, I probably will make it a little bigger. Good suggestion.

Thanks.
David

[gjh42]

Many class/id tags in the code are not mentioned in the stylesheet. They are provided for those who may wish to use them in the future.

Just add

#categoryDescription {

    }

and put the properties you want between the brackets. Follow the example of other rules.