Jump to content

Resolved - How do I Change the H3 text color in product descriptions


Guest michael409nxx

Recommended Posts

Guest michael409nxx

....from a newbe....

I suspect this is easy, if I knew where to look!

Q; Where do I go to change the default color for H3 element in the product description?

Many thanks in advance for assistance!

CC 5.1.5 (site still in development)

Link to comment
Share on other sites

Depends on the skin you are using. If patterned after a stock skin, you should find it set in the skin's stylesheets folder under common.css unless the skin has various color choices, then it may be in common.css or in the skin color stylesheet folder usually in layout.css. If you still have trouble finding it, post a link to an online version of the site and I'll have a look.

Link to comment
Share on other sites

Guest michael409nxx

Hi markscart:

Thanks you for your response and greeting from SW Newe Mexico.

I am using a standard CC template (Kurouto) and noted two instances of "H3" in skin/Kurouto/styles/common.css:

}

.sidebar > div > h3 {

background: #595755 repeat-x;

border-top: 1px solid #4F4F4F;

color: #FFF;

height: 26px;

line-height: 26px;

padding: 0px;

text-indent: 4px;

text-transform: capitalize;

}

and:

}

div.category_product h3 {

margin: 5px 0px;

text-indent: 2px;

}

But neither of these seem to deal with color for H3.

Likewise in layout.css there is only one instance of H3:

}

.sidebar > div > h3 {

background-image: url(../../images/green/h3_background_gradient.png);

}

Which again does not seem to deal with the color of H3 element.

So, again, I am a newbe. What do you suggest?

Regards,

Michael409nxx

Link to comment
Share on other sites

The .sidebar > div > h3 does address color for h3 in sidebar, color is set as white (color: #FFF)

Since there seems to be no style to set a color for h3 specifically in stylesheet, the color will be the default text color. You can set a different color for h3 in the stylesheet by doing this:


h3 {

color: #cacaca;

}





or,





h3 {

color: silver;

}





In both of the above examples, I'm assigning "silver" as the color for h3, you get the idea. Now, this will set h3 color for every instance of h3 across the site, if you want to isolate a particular class of h3 on product page you'll have to do a little more.



In Karouto, the product description area has a title using h2:





<h2>{$LANG.catalogue.product_info}</h2>





Now if I truly understand your question, you are wanting to set a color for h3 within the product description only, is that correct? If so, note also, that styling can be changed in the wysiwyg editor where product description is entered. Be aware of that.



The product description is coded into Karouto like this:





  <div id="product_description">

   {$PRODUCT.description}

<p><strong>{$LANG.catalogue.product_code}</strong>: {$PRODUCT.product_code}</p>

  </div>





So, to affect any occurrence of h3 only within product description, you can try adding this to the stylesheet:





#product_description h3 {

color: #700000;

}

Note that I have written it to use a dark red color, just use your own color in place of #700000

That should work for you, as long as the color is not altered in wysiwyg editor which would override the stylesheet.

Let me know if I have misunderstood your intent, hope this helps.

Link to comment
Share on other sites

Guest michael409nxx

Markscarts:

You understood me perfectly! Many thanks.

On styling with the WYSIWYG editor (CKEditor): my goal is to use standard elements in 99% of all descriptions and use CSS for styling. This way when my client sez "...for Christmas season I want all product descriptions red on a silver background" I can do it with two CSS changes. I will use the WYSIWYG editor for creating truly uniquely formatted descriptions when this is (rarely) required.

- Cheers.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...