Digital Pro: Menu and Header questions

[jskeris]

Here's my website:
http://www.ask-allow.com/

How do I add social media icons to the top so it looks like the following:
Name/Logo - Menu - Social Icons

Also, how do I change the font color to white in the Header?
"Ask Allow
Brand Strategy and Customer Engagement"

Thank you!
Jodi

[Anita]

@jskeris I used Digitial Pro on my site and have the code. You just cannot see it there as I'm not utilizing the area at the moment. Here's my code. Add the CSS portion to the Additional CSS box and then add the functions content to the functions.php file.

---

Love coffee, chocolate and my Bella!

[jskeris]

Thank you! I found the Additional CSS Box. I just found the functions.php file...do I put your code after the big chunk of code or before? Also, do I need to have a specific Social Widget installed?
Thank you for your help!

[Anita]

If you go to Appearance > Theme Editor. Look on the right hand side and you'll see a list of file. The function.php file is listed there. Scroll all the way down to the bottom and add a couple spaces and then copy the contents from line 4 to the end into it and Save it.

Use Genesis Simple Social Icons - https://wordpress.org/plugins/simple-social-icons/.

---

Love coffee, chocolate and my Bella!

[jskeris]

Perfect! Thank you!
Any chance you know where I can change the color of the font in the header?
"Ask Allow
Brand Strategy and Customer Engagement"

That's gotta be in the CSS somewhere..right?

[Anita]

Add this to the Additional CSS box as well.

#front-page-1, #front-page-1 h3 {
    color: #fff !important;
}

---

Love coffee, chocolate and my Bella!

[jskeris]

"You're a wizard 'arry!"
Thank you so much!

[Anita]

You're welcome!

---

Love coffee, chocolate and my Bella!

[jskeris]

I have another question! In the same vein...
Could I, instead of the Headers/Copy in that area, could I put an image of my logo with my tagline instead? Or is that too much coding w/customization?
Thank you!

[Anita]

There's two ways you can do it. The first, which I recommend as the option would be to create a logo with the tagline included in the image. This way when it's reduced down on mobile, you don't have letters from the tagline/site description that drop down and separate on different lines.

The other option is to add your logo and then look around line 1379 of the stylesheet - remove lines 1379-1384 which contains this code.

.site-description {
	display: block;
	height: 0;
	margin-bottom: 0;
	text-indent: -9999px;
}

Removing that will display the tagline or site description under the logo.

---

Love coffee, chocolate and my Bella!

[jskeris]

Yeah. I'm definitely going to make the logo and tagline one image file. png is ideal, right? What size (pixels)/dpi should I make it? How would I alter the code?
Thank you so much for this detailed info!

[Author]

Posts