CSS drop shadow text

I'm a bit new to css but I can find my way around. I am trying to add a drop shadow to the text defined as H1 in the default stylesheet. I have searched the web only to be confused as to what code is needed and where it goes. If you have had some experience adding this element would you please post some details on its implementation and its coding?

Very grateful for an answer.

Thank You.

I see that I now have to change the product description from h1 to a new tag. I made h7 but I cant seem to implement it from the products_info_display page unless I didnt change what I should have. Any ideas?

Err, that's not really a css standard right now? I would call that an advanced, advanced, if you wanna get really fancy and technical thing, its not a use on a regular ole website thing yet. I had never really heard of it, and doing a google on the matter showed some complicated javascript and css hacking that is just a big undertaking.

Do you want to do this for a logo or something? This would be something better done manually with an image program vs. trying to hack it, imo, and would probabl look better as well.

OK I'm including some code to try and call h7 to the product name line which is not working:

<!--bof Product Name-->
<h7 id="productName" class="productGeneral"><?php echo $products_name; ?></h7>
<!--eof Product Name-->

but its stays small black lettering which I dont want...aaarrrggghhh!!!

as you can see here,
http://www.w3.org/Style/Examples/007/shadows.html

they didnt even get it right in their how to

studeo:

OK I'm including some code to try and call h7 to the product name line which is not working:

<h7 id="productName" class="productGeneral"><?php echo $products_name; ?></h7>

> 
> but its stays small black lettering which I dont want...aaarrrggghhh!!!

Cause css text drop shadows is not something that is reasonable to try and do... sorry! Its just really not supported by browsers.

ok I give up on the drop shadows...but I want to be able to control the product_name on the product page with its own style and not with h1 and I'm being dense...any suggestions?

You can style the H1- make it any size any color any spacing you want- use the stylesheet

I know...i think I need to create a new style (i created h7 based on h1) but cannot glue it to the product display page product name.

studeo:

ok I give up on the drop shadows...but I want to be able to control the product_name on the product page with its own style and not with h1 and I'm being dense...any suggestions?

If you want to change it from H1, cause you want it to be different than OTHER h1, sure, you can change it to h7.

Then in your stylesheet, style h7 the way you want it, kind of like this:

h7 {

font-size:1.4em;
color:#000000;
font-weight:bold;

}

Man, I'm sure missing the forest for the trees...

Leave everything as it was, and style it with

#productName

in your stylesheet.

I created:

h7 { 
font-size: 12px; 
color: #990000;
padding: 2px 0px; 
margin: 0.1em 0 0em;
font-weight: bold; 
font-family: Geneva, Arial, Helvetica, san-serif; 
font-style: italic; 
background-color: #FFFFFF}

 }

and changed the tag in tpl_product_info_display.php to:

<!--bof Product Name-->
<h7 id="productName" class="productGeneral"><?php echo $products_name; ?></h7>
<!--eof Product Name-->

with no result. I must be missing something.

You see, I put an image background on the original h1....but it also displayed on the product name line. And ratherd badly.

heres a link:

theribbondiva

and thanks for your replies

studeo:

I created:

h7 {
font-size: 12px;
color: #990000;
padding: 2px 0px;
margin: 0.1em 0 0em;
font-weight: bold;
font-family: Geneva, Arial, Helvetica, san-serif;
font-style: italic;
background-color: #FFFFFF}

}

> 
> and changed the tag in tpl_product_info_display.php to:
> 
> ```
<!--bof Product Name-->
<h7 id="productName" class="productGeneral"><?php echo $products_name; ?></h7>
<!--eof Product Name-->

with no result. I must be missing something.

You see, I put an image background on the original h1....but it also displayed on the product name line. And ratherd badly.

heres a link:

theribbondiva

and thanks for your replies

It's still showing up as an h1, so perhaps you didn't make the change in your custom folder?

Anyway, instead, style the product name with this tag in the stylesheet:

h1#productName {}

I want to thank you very much. I ditched the h7 tag and added the #productName to the stylesheet as you suggested above. Then I styled the #productName tag as I wanted and all is well at the moment. I can't thank you enough!

I would use an image if I were you as there are a couple of problems I can think of with doing it in CSS.

Firstly - Accessibility: People using text browsers will see the description twice, which can be annoying. Likewise anyone using an Aural browser will hear the words spoken twice, again annoying.

Secondly, and probably most importantly for most people [at the moment anyway] - the search engines will at least down grade your site [and possibly ban it] if they think that you are keyword spamming - and the product description is an important keyword.

Just my opinion.