Changing Font Size of Product Name

[palafirst]

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

[schoolboy]

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.

[palafirst]

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

[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.)

[palafirst]

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

[stevesh]

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

[palafirst]

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.

[palafirst]

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:

<div class="centerBoxContentsNew centeredContent back" style="width: 33%;">
<font size="6">
<a href="http://localhost/revolutionamericanstyle/zencart/index.php?main_page=product_info&cPath=66&products_id=181">
</a>
<br>
<a href="http://localhost/revolutionamericanstyle/zencart/index.php?main_page=product_info&cPath=66&products_id=181">Kindle - Revolution American Style</a>
<br>
$4.95
</font>
</div>

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

Cheers.

[RescoCCC]

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

[stevesh]

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