Adding drop shadow to html text

Envato Authors CodeCanyon
#1

I have added html formatted text to the opening screen slider and everything looks good so far except the text does not show well in all places of the pics behind. I would like to add a drop shadow but am unsure how to insert the css code. Where it would go etc. Fairly new to the wordpress world and the Prodo theme so any detailed assistance would be appreciated. URL is www.4sightinspections.com Sample of the code I used to insert the text is:

p style=“text-align: center”>b>PROTECT/b>/font>/p>
p style=“text-align: center”>What’s Important To You!/font>/p>
h3 style=“font-size: 20px;text-align: center”>FREE Thermal Imaging and Our Exclusive $1,000 Home Inspection Guarantee/h3>
(I took out the <'s above so the code would show properly)

I have no clue where I would drop in CSS code let alone what it would be. Any help would be appreciated.

#2

You can use “text-shadow” property in CSS for adding shadows to texts.
Check tutorial here.

#3

Thank you. I have tried that code but I do not know where to drop it in. I have attempted dropping it into the section where I have the html code but the tags disappear leaving only the text to display and still no drop shadow. I have further tried it with different combinations of the tags. It seems the css code simply does not want to work in this section. I am using prodo theme set up with slideshow and text slider. At each image I enter the text via the html code noted in my first post. That works perfectly. The CSS, however, does not like it in that section. I know there is a custom CSS box in the settings but am thinking it will add drop shadow to everything in the site. I will try it in my test environment. In the meantime, if you have any suggestions it would be appreciated.

#4

I tried the code in the custom CSS area and that did not work either. At a loss as to how to make this work. I know it can be done I just don’t know where to put the code.

#5

I’m not sure where you’re writing the CSS.
Please contact me from my Themeforest profile page: http://themeforest.net/user/templatin

#6

Hi Templatin. You helped me a while back in adding drop shadow to the front page text in my Prodo theme utilizing

.intro .content p {text-shadow: 2px 2px 3px #000;}

in the ‘appearance - editor’ section. I am trying to add that same drop shadow to the top menu on that same page. Tried several variations of this and have spent two days trying to find examples of this online but to no avail so I am here once again bothering you for assistance to see if you know the code that might assist me in achieving this goal.

Website is www.4sightinspections.com

#7

so after looking everywhere trying to find a way to add shadow only to one text box and not all of them together, i found this. go to advanced tab at the bottom click on add custom css

selector {
color: #ffff;
text-shadow:
2px 2px 3px #000, 0px 1px 2px #eee,
2px 2px 3px #000}

if you want all the same text on the page to have the same shadow use this

p {
color: #ffff;
text-shadow:
2px 2px 3px #000, 0px 1px 2px #eee,
2px 2px 3px #000}

#8

Old Topic