Changing Font Size of Product Name

Greetings All...

I'm new to Zen-Cart...but I already love it. Have tested several carts and this is the first one that feels complete. Good work.

Now my problem. I've looked through many threads about change the product name size...but I haven't been able to solve the problem. I believe that what I'm trying to change is the "New Product" name. On the opening page the product names are too big. I've played with all the font-size settings in the CSS and the h3 and h5 settings that others have talked about effects the product name listing under categories, but not on the opening page.

I've used Firebug in Firefox and see the code: <font size="6">
But when I try to add the following code to the css:

h6 {
font-size: 1.3em;
}

It doesn't change the product name like I'm trying to.

I can't give a URL for the website because I'm building it on my PC with everything running on WAMP.

I have been able to make lots of other changes to get the cart looking just right, but I'm missing something about where to find this particular change.

I have Zen Cart version: v1.3.9h installed.

Thanks in advance for assistance.

Cheers,
Greg

Hello Greg

The PRODUCT NAME appears in several contexts, so you have to be more specific about which instance you are referring to.

Depending on what PAGE TYPE (eg: product_listing, product_info) ... it is appearing, the relevant template file will "allocate" a syle parameter to it within that template's php and html.

Generally, it is NOT NECESSARY to edit any tpl_xxxxxxxx.php files, and styling can be done by making appropriate changes (and additions if necessary) to stylesheet.css .

These changes will follow standard CSS rules and protocols, so it is possible then, to make a H6 TAG display different sizes in different contexts - if you get the parent>>>child relationship correct in the CSS declaration.

Unfortunately, this forum is not the venue for CSS training, as it is a generic protocol and not exclusively used by zencart.

There are many online tutorial sites for CSS.

Hey Schoolboy...

Thanks for your quick reply. I'm not completely new to CSS, HTML and PHP, though I'm no expert either. The page I'm talking about is the opening page where Zen Cart starts. I see my products listed there (and after changing templates) it seems like it is actually listing "New Products" though I only have new products (and only three at that).

I've gone through the Wiki and Forum for hours and have seen various references to changing the attributes of the "Product Name." I quickly realized that there are various instances of the product names since while playing with the CSS I've been able to change it everywhere EXCEPT the front page.

I have now changed EVERY font attribute in the "stylesheet.css" and I cannot get the font to change in the "New Products" area...no matter what the template. I've been very careful to change the "stylesheet.css" for the template I've been working on and I know it is the right one because I can see changes in other parts of the page...but not the Product Name for New Products.

I've also read several sites just to check if there was something I was doing wrong with the CSS...but I don't think that's the problem.

Sorry for the long winded reply, but I hope this gives sufficient detail to figure this out. It's really the last tweak that I need to do before I can get ready to start beta-testing a live site.

Thanks again.

Cheers,
Greg

Not all classes and ids are in the default stylesheet. Sometimes you have to add them. In this case, try adding this (I usually add new stuff to the bottom of the stylesheet):

.centerBoxContentsNew a {font-size: 1.5em;}

For future reference, install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-7, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Hey Steve,

Thanks so much for the info. Adding:

.centerBoxContentsNew a {font-size: 1.5em;}

Helped me change the Product Name...but the Price (just below the Product Name) is still in the old size.

I've been using Firebug...and I did find that the element was the .centerBoxContentsNew and I found the entry in the original CSS, but changing the font-size there just wasn't affecting the site.

I've installed the Web Developer Plugin for Firefox...thanks for that. But when I hover over the price it says "No Style Information."

Strange stuff. Really appreciate your advice.

BTW...lived in Lansing for a couple of years back from 1999 to 2001.

Best wishes,
Greg

.centerBoxContentsNew, .centerBoxContents a {font-size: 1.5em;} or separate them into different rules if you want the fonts different sizes.

Adding: .centerBoxContentsNew didn't work.

I've searched the code using the Web Developer tools and I just can't see where the Price formatting is coming from.

I went back to the default template to make sure it wasn't a problem with the template I'm using (241)...but I was able to change the Product Name size, but not the price.

Sorry to be bugging you. Funny that I've been able to tweak the cart in every way..but not this one area.

Thanks again.

I wonder if this will help. Here's the generated HTML code and it looks like the price font size is being generated by PHP code:

I'm still digging around and not making any progress.

Cheers.

I'm just spit-balling here, but would adding #productPrices {font-size: XXpx;} to the stylesheet work?

The rule I mentioned in post #6 works for me in Web Developer. Did you place it at the bottom of stylesheet.css ?

Hey Steve...

Not working for me. I've pasted it in at both the beginning and the end of the CSS using both Admin Tools and in the actual CSS file. It allows me to change the Product Name...but no change to the price. Strange.

Hi Resco...

That code changes the price size in the Product Listing windows. Thanks for the help. If you have any more spitballs please throw them my way. :)

Greg

The <font size="6"> is inline formatting, and may override stylesheet styles without special treatment (style="what: ever;" definitely does, not certain about size=).

You have a custom template file active, as there are no <font> tags in the centerboxes in stock Zen Cart. Try

.centerBoxContentsNew font {font-size: 1.5em;}
or if that doesn't affect it
.centerBoxContentsNew font {font-size: 1.5em !important;}

!important makes a stylesheet property override others.

!important makes a stylesheet property override others.

I've often wondered what that did. Thanks for filling that gap in my knowledge.

Hey All...

I really want to thank you for all the help. Got it working today. Not sure if there was a problem with the template or some other mistake, but once I re-downloaded the template and installed it again. The original suggestion by Steve:

.centerBoxContentsNew, .centerBoxContents a {font-size: 1.5em;}

works fine now to change both the New Product name and New Product price.

Great appreciate your time.

Best wishes,
Greg

stevesh:

Not all classes and ids are in the default stylesheet. Sometimes you have to add them. In this case, try adding this (I usually add new stuff to the bottom of the stylesheet):

.centerBoxContentsNew a {font-size: 1.5em;}

For future reference, install the Firefox browser and the Web Developer plugin for Firefox. You can use those to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

(If you're using Firefox 4-7, you'll need to remap the editor shortcut, since Firefox has appropriated Ctrl-Shift-E for an internal function - I use Ctrl-Shift-Q.)

Hi Steve, by your word I changed my theme to Zencart's default one. But now the product name and price is vanished from my site and i am not able to drag down the product name from this cart on my website.

https://thetruelightministry.org/store/index.php?main_page=shopping_cart

Thanks for any help in advance!