Agency Pro – White font with dark grey shadow

[[email protected]]

Hi there,

I am currently using the Agency Pro theme.

I would like to know how to make the white font have a dark grey shadow, so that the white font is more visible with my background. The sections that I would like to have this are:

(1) The Header menu
(2) Site Title
(3) Tag Line
(4) Hop Top (widget)
(5) Home Middle (widget)
(6) Home Button (widget)

Thanks in advance!

Best,
Donald

http://www.optimizedwebmedia.com/

[jbergen]

Hi Donald,

You'll want to add the text-shadow property to each of the sections you listed. You can tweak this, but I would start with something like:

text-shadow: 0px 1px 3px #000;

Below is code that would change the site title and home-top widget. The other areas you want to change would be similar - just find the appropriate selector. And be sure to add your this code to a new custom CSS file - not directly to the child theme's style.css file.

style.css file, line 932

.site-title a {
    color: #FFF;
    text-shadow: 0px 1px 3px #000;
}

style.css, line 1278

.home-top .widget-title {
    color: #FFF;
    font-size: 60px;
    line-height: 1;
    text-shadow: 0px 1px 3px #000;
}

I hope that helps!
Jamie

---

Jamie @ Ladebug Studios

[[email protected]]

Many thanks!

I couldn't find how to change the shadow text for the following:
(1) Home Top (widget) - Tag Line
(2) Home Middle (widget) - "Our work"
(3) Home Bottom (widget) ; "Recent Articles"

Can you please let me know which line item these items are, so then I can enter in the ccs code for the shadow? Many thanks!

Best,
Donald

[jbergen]

Sure. Here they are:

(1) Home Top (widget) - Tag Line:

You'll need to write a new CSS rule like this:

.textwidget h3 {
    text-shadow: 1px 1px 1px #000;
}

But I would recommend giving that element a unique CSS id in case you end up with another occurrence of .textwidget h3.

(2) Home Middle (widget) – “Our work”
(3) Home Bottom (widget) ; “Recent Articles”

For both of these, it will be:

style.css, line 772

.widget-title {
    color: #333;
    font-size: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px #000;
}

In case you're wondering how I found these, I used my browser's developer tools. You basically right-click on an element and select "Inspect Element." Carrie Dils has a nice video tutorial on her site of how to do this.

Jamie

---

Jamie @ Ladebug Studios

[[email protected]]

Wow thanks so much!!! That was very helpful! 🙂

Donald

[[email protected]]

Hi there,

Can you please provide me with instructions on how I can "But I would recommend giving that element a unique CSS id in case you end up with another occurrence of .textwidget h3."?

Because at the moment, the titles for the footers also get the shadow treatment, which I don't want. Thanks in advance.

Best,
Donald

[jbergen]

One way to do that would be to change:

<h3>We bring ideas to life through thoughtful, creative design solutions.</h3>

to:

<h3 id="home-tag-line">We bring ideas to life through thoughtful, creative design solutions.</h3>

Then you would add a new CSS rule like:

#home-tag-line {
    text-shadow: 1px 1px 1px #000;
}

Your site's looking good, by the way 🙂

---

Jamie @ Ladebug Studios

[[email protected]]

Hi there,

I changed <h3>We bring ideas to life through thoughtful, creative design solutions.</h3> to <h3 id="home-tag-line">We bring ideas to life through thoughtful, creative design solutions.</h3> in the applicable area in the widget.

And then added #home-tag-line {
text-shadow: 1px 1px 1px #000;
}

... at the bottom of the style.css... but I still see the titles at the footer with shadows...

did I do this right?

Thanks for the compliment, much appreciated!

Best,
Donald

[jbergen]

The CSS ID you added was correct - now it specifically targets the home tagline.

Now the problem is that the shadow behind the titles in the footer comes from the rule you added for .widget-title (style.css, line 772), which also gives the shadow behind the OUR WORK and RECENT ARTICLES titles.

To fix this, you'll want to add a new class to both of those titles and apply the shadow to that class specifically. I'll show you how to do OUR WORK, and you can do something similar for RECENT ARTICLES.

Change:
<h4 class="widget-title widgettitle">Our Work</h4>
To:
<h4 class="sub-section-header widget-title widgettitle">Our Work</h4>

And add this line of CSS:

.sub-section-header {
    text-shadow: 0px 0px 1px #000;
}

Note that I'm adding a new class to these elements (rather than unique ID's) because you have multiple elements that you want to style similarly. Also, I'll mention that it's a good idea to set up a custom CSS file to add these types of additions because, if you ever update your theme, you'll lose the changes you made to its style.css. Here's a video tutorial on how to make a custom CSS file.

---

Jamie @ Ladebug Studios

[[email protected]]

Hi there,

Thank you for your response. I am a bit confused sorry. Where do I find <h4 class="widget-title widgettitle">Our Work</h4>?

And does this get added to the bottom of the style.css?
.sub-section-header {
text-shadow: 0px 0px 1px #000;
}

I hope to hear from you soon. Many thanks!

Best,
Donald

[jbergen]

I'm guessing you're entering your text in a widget, which limits your ability to change the HTML markup without going into the code. Sorry I didn't realize that in my previous reply - I've only built themes from scratch so far, and in that case it's easy for me to change the HTML markup.

Probably the best approach would be to find a unique selector for that specific widget and use it as the target for your new CSS rule. However, your site seems to be down right now, so I can't give you more specifics.

And you can add new CSS rules to the bottom of style.css but be warned that they will be erased if you update your theme. It's better to make a custom CSS file like I mentioned in reply #121124.

---

Jamie @ Ladebug Studios

[[email protected]]

Hi there,

My site is back up... can you give me specifics on how I can find a unique selector for that specific widget and use it as the target for my new css rule? Many thanks!

Best,
Donald

[jbergen]

Hi,

For "Recent Articles" you'll add this rule:

#featured-post-3 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

And for "Our Work":

#featured-post-2 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

Then make sure you remove the text-shadow: 0px 0px 1px #000; from style.css, line 772.

That should do it!
Jamie

---

Jamie @ Ladebug Studios

[[email protected]]

Hi!

That did the trick - it got rid of the shadow in the footer widget titles... however, the shadows for OUR WORK and and RECENT ARTICLES titles were removed... how do I get them back? 🙂

Best,
Donald

[jbergen]

Where did you add the following? I don't see them on your stylesheet.

#featured-post-2 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

#featured-post-3 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

---

Jamie @ Ladebug Studios

[[email protected]]

Ah ok... I had those codes in the custom css... I now put them in my stylesheet, but I only get the shadow on RECENT ARTICLES but not on OUR WORK...

Also, how do I get the shadow on the lines on the sides of the titles?

Best,
Donald

[jbergen]

My mistake. You actually want to replace the #featured-post-2 rule with:

#featured-post-4 .widget-title {
    text-shadow: 0px 0px 1px #000;
}

For the lines on the sides of the titles, you'll want to modify the rule in style.css on line 1188. And you can't use a text shadow for that because it's a border. You'll need a box-shadow. Remove padding-bottom: 4px; and add box-shadow: 1px 1px 1px #000; and margin-bottom: 4px;. So it will look like this:

.agency-pro-home .content .featured-content .widget-title:after, .agency-pro-home .content .featured-content .widget-title:before, .agency-pro-home .content .widget_text .widget-title:after, .agency-pro-home .content .widget_text .widget-title:before {
    content: " ";
    display: inline-block;
    border-top: 2px solid #FFF;
    width: 15%;
    box-shadow: 1px 1px 1px #000;
    margin-bottom: 4px;
}

---

Jamie @ Ladebug Studios

[[email protected]]

(1) Thanks.... the line on the left hand side looks a bit strange... how do I fix this? 🙂

(2) Also, the shadow for the menu looks a bit on the lighter side, because I made it slightly transparent. Is it possible to make the shadow for the menu fonts to be darker?

Best,
Donald

[jbergen]

For (1), it looks like you added another copy of the CSS rule I wrote in reply #122071 rather than just changing the existing code. So I would remove the code you copied onto line 1188 of style.css and just modify the code (currently on line 1196) so that it matches the code I suggested. Right now it looks funny because those two rules are conflicting each other.

Jamie

---

Jamie @ Ladebug Studios

[[email protected]]

Hi Jamie,

When I did that, it actually removed the line on the right side... Should I revert the code in 1188 back to what it was before, and then modify 1196?

Best,
Donald

[Author]

Posts