Agency Pro – White font with dark grey shadow

Community Forums Forums Design Tips and Tricks Agency Pro – White font with dark grey shadow

This topic is: not resolved

This topic contains 24 replies, has 2 voices, and was last updated by  jbergen 1 month, 3 weeks ago.

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #120814

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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/
    #120828

    jbergen
    Member
    Post count: 191

    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

    • This reply was modified 2 months ago by  jbergen.
    • This reply was modified 2 months ago by  jbergen.
    #120839

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #120853

    jbergen
    Member
    Post count: 191

    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

    #120855

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    Wow thanks so much!!! That was very helpful! :)

    Donald

    #120857

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #120937

    jbergen
    Member
    Post count: 191

    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

    #121055

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #121124

    jbergen
    Member
    Post count: 191

    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

    #121247

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #121450

    jbergen
    Member
    Post count: 191

    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

    #121948

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #121950

    jbergen
    Member
    Post count: 191

    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

    • This reply was modified 1 month, 3 weeks ago by  jbergen.
    • This reply was modified 1 month, 3 weeks ago by  jbergen.
    #121954

    donaldkimgroup@gmail.com
    Member
    Post count: 47

    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

    #121956

    jbergen
    Member
    Post count: 191

    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

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.