Digital pro – text colour change

[Allie]

Hey guys,

I am a total newbie at this stuff. I was doing OK setting up the webpages on my site, but I need help changing the text colour in the Front Page 1 section of the Digital Pro child theme. Is there a non-complicated way to do this? Thanks for the help.

Allie

http://thebetterlifelab.com

[Jason Weber]

Hi, Allie.

If you have a Custom CSS section somewhere in your WordPress Admin (highly recommended), you can add this snippet there. If you don't have one, just use this plugin: Simple Custom CSS. From there, juts go to (I believe) Settings >> Custom CSS and add these snippets in there.

If you don't have Custom CSS and don't want to add a plugin (I wouldn't know why), add it to your /wp-content/themes/digital-pro/style.css at the bottom.

I'll use the same orange color as the "Yes! I'll take the leap" button. You can change the color by switching the hex code from #ff6400 to something else; choose it here: HTML Hex Codes. The text shadows with a black (#000) outline are included to ensure your orange title and tagline stand out.

Here's the snippet for the Front Page 1 title:

.front-page-1 .widget_text .widget-title {
    color:#ff6400;
    -webkit-text-stroke: 1px black;
    text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

Then, for the tagline underneath the title, add this snippet in your Custom CSS:

.front-page-1 p {
    color: color:#ff6400;
    font-weight:700;
    -webkit-text-stroke: 1px black;
    text-shadow:
    3px 3px 0 #000,
    /* Simulated effect for Firefox and Opera
       and nice enhancement for WebKit */
   -1px -1px 0 #000,  
    1px -1px 0 #000,
   -1px  1px 0 #000,
    1px  1px 0 #000;
}

Just ask if you have any more questions. Good luck!

---

Webby’s WebPrezence
National Center For Due Process

[Allie]

Good God ! Thank you---that was incredibly fast!!

[Jason Weber]

Good. Don't forget the second snippet, Allie, so your tagline ("Power Your Life In The Direction You Want.") stands out as well.

And if you want to get rid of that footer stuff (Genesis / Digital Pro Theme / Login, etc.), just download Genesis Simple Edits and put whatever you want there to replace it.

---

Webby’s WebPrezence
National Center For Due Process

[Allie]

Gosh ! Thanks so much again!

[Jason Weber]

One last thing, Allie.

You don't want your main front page 1 image (or any, for that matter) to be so large. Currently, your take-the-leap.jpg is over 5 MEGABYTES. That's 5,000 KB. You want to keep this under 100 KB, if possible. So here's what I did:

(1) Reduced the mammoth image size to 1600px width x 1050 height (Genesis likes 1600 x 1050 for these types of images). I then losslessly compressed it so there's no loss in image quality, and was able to reduce it to 428 KB:

(2) That's better, but still not good enough. So I saved it as a progressive jpg (slight image quality loss, but not noticeable to almost all viewers), and got it down to 249 KB. That's about as good as you're going to get it with that image. I'd like it under 100 KB, but this is acceptable and much better than the 5,000 KB you had before:

Please replace your current image, which is over 5,000 KB, with one of the two (I'd recommend the progressive image, which is 249 KB -- much faster page load time, as you're shaving 4,750 KB off of your page size.

Good luck!

---

Webby’s WebPrezence
National Center For Due Process

[Allie]

Oh my Gosh Thank you Jason! I can't believe you actually went out of your way to do that! My site already looks so much better 🙂

[Author]

Posts