How to have multiple H1 tags defined in CSS for a theme

Question

I am trying to override my current theme's H1 tag on product view only.

Current CSS

styles.css

.product-view
h1            {  background: url("../images/image.jpg") repeat scroll 50% 0 transparent;
border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
color: #FFFFFF;
font-size: 16px;
font-weight: normal;
height: 28px;
padding-left: 20px;
padding-top: 6px; }

I have added a separate class with a unique H1 to override the above:

.product-name-new h1 { font-size:16px; color:#73472e; font-weight:bold; width:350px;}

I cannot seem to override the CSS, I have also tried entering the CSS directly in my view.phtml file:

view.phtml

<h1><style=font-size:16px; color:#73472e; font-weight:bold; width:350px;><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></style></h1>

As soon as I use the < h1> tag, it uses the original code and not the code I would like to use to override my products name.

How can I correctly implement a separate H1 tag on the product view that will not affect the rest of the theme?

Answer 1

You have a number of problems:

There is no "style" tag in HTML:

<h1><style=font-size:16px; color:#73472e; font-weight:bold; width:350px;><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></style></h1>

Instead, remove the <style> and its' ending tag, leaving:

<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>

Your CSS assumes that there is a parent class named .product-name-new

This means that it will ONLY style markup organized as such:

<div class="product-name-new">
    <h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?></h1>
</div>

If that's not what you meant to do, instead you can modify both the css rule and the h1 markup by giving it a class. E.g.:

Markup:

<h1 class="product-name-new"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?></h1>

CSS:

h1.product-name-new {
    background: url("../images/image.jpg") repeat scroll 50% 0 transparent;
    border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: normal;
    height: 28px;
    padding-left: 20px;
    padding-top: 6px;
}

HTH, Cheers.