0

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?

0

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.

  • To clarify: the code I posted for view.phtml was an example of what I tried to see if I could override the default CSS. Your example has helped me understand what I was doing wrong and I was able to correctly resolve my issue. Thank you! – SR_Magento Feb 11 '14 at 0:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.