styling

[Sharon Vaingast]

Hi Bill,
Couple of questions:

1. How can I change the color of the menus background color? right now is grey and I would like to turn it into pink.
2. I have changed the “Button Color Hover” to “#552f5d”, purple, and it’s still blue..
3. I would like the option of Graphic logo + text logo together. Is that possible?
4. How can I change only the color of the text header?

Thank you so much,
Regards,
Sharon

[Bill Robbins]

Sharon,

Let me see if I can help you out:

Navigation background color
Go to the theme options page and select the styling tab. Scroll down to the very bottom and paste this into the box labeled “Custom CSS”

#navigation {
	background-color: #474747;
}

Just replace the #474747 with the hex color code of the pink you’d like to use.

Button Color Hover
Any chance you could send over a link to where you’re working with the theme so I could take a look at that for you?

Graphic and Text Logo
The easiest way to do that is to use the text logo and then a bit of custom CSS to place the graphic logo in the background of the header. Here’s how to do that:

1. Go to the media section and select “add new.”
2. Upload the image you’d like to use as your graphic logo. Once the upload finishes, WordPress will give you the URL to that file. Copy that URL.
3. Now go to the theme options page and select the styling tab. Scroll down to the bottom to the “Custom CSS” box.
4. Paste this into that box:

   
   #header {
   	background-image: url(https://yoursite.com/image.png);
   }
   

5. Just replace the http://yoursite.com/image.png with the URL to your image.
6. Save your changes.

That should add a graphic logo along with the text one.

Header Color
You can use this code snippet in the Custom CSS box to change the color of the text logo:

#text-logo h1 a, 
#text-logo h1 a:visited, 
#text-logo p a, 
#text-logo p a:visited {
	color: #000;
}

and this one for the tagline:

#tagline h2, 
#tagline p {
	color: #000000;
}

---

Just let me know the link and I’ll take a look at your navigation hover color trouble.

Thanks,
Bill

[Sharon Vaingast]

Thank you Bill.
You have the greatest support!!
What is the best way to recommend your support and themes? I would like to spread your support and kindness and professionalism to the world 🙂
I’m working with lots of themes from different providers and you are definitely the best!

Here are my comments in the same order of your answers:
1. I would like to change all the grey headers into pink, not just the navigation bar. How do I do that? (widgest grey headres, donate bar etc..).
2. Roll over the “donate” button and see it’s blue.
3. I would like to show the logo only one time. Please see how it looks: http://www.womenofthewall.org.il
Also, I need it to appear only one time on the left/right corner, next to the text.
4. sorry, but what is the tag line and where do i see it?

Thank you again,
Regards,
Sharon

[Bill Robbins]

Sharon,

Sorry for the delay, we were closed yesterday due to the Memorial Day holiday here in the US.

---

Bar Coloring
You can paste this code into the box for “Custom CSS” in the styling tab of the theme options page to change the color of the widget titles to your pink:

h4.widgettitle {
	background-color: #c91848;
}

The donation bar is actually made with two images. That’s actually the reason there isn’t an option in the theme to change the color of the navigation bar or widget titles. There is a Photoshop file in the download section that can be used to make those changes. I went on and created them for you. You can download them from here.

Once you’ve unzipped the file you downloaded, you’ll want to go to the media section of your WordPress control panel and select “Add New.” Upload the progress-bar.png file and copy the URL that WordPress gives you once it’s finished. Next go to the Custom CSS box again and paste this:

#donate-graph-base {
	background-image: url(https://yoursite.com/progress-bar.png);
}

Just replace the http://yoursite.com/progress-bar.png with the URL to the file you uploaded. Then update your settings. Next upload the donation-bar-transparent.png file and copy the URL again. Go back to the Custom CSS box and paste this:

#donate-bar {
	background-image: url(https://yoursite.com/donation-bar-transparent.png);
}

Replace the http://yoursite.com/donation-bar-transparent.png with the URL to your image you copied earlier. Then save your changes.

That should change the donation bar to the same pink color as the widget titles and the navigation bar.

---

Donate Button (hover)
This turned out to be a bug another user discovered late last week. Here's how you can fix it. Paste this into the Custom CSS box:

#donate h4 a:hover {
     background-color: #00000
}

You'll want to change the 000000 to the color you'd like to have the hover state be. You can copy and paste it from the color pickers on the styling tab too. That should change your hover color.

---

Logo/Header Image
Again in our friendly Custom CSS box, paste this:

#text-logo h1 a, 
#text-logo h1 a:visited, 
#text-logo p a, 
#text-logo p a:visited {
	font: 45px "Copperplate Gothic Bold";
}

#header {
	background-repeat: no-repeat;
	background-position: right top;
}

That will move the graphic logo over to the top right and also shrink the title just a bit so it doesn't overlap the graphic logo.

---

Tagline
It looks like you don't have any text in your tagline, so it's not visible. It's set by going to the "Settings" section of your WordPress control panel and selecting "General." The option to set the tagline is there.

That said, there's a quite a bit going on in your header already so you may just want to leave it blank so things don't get too crowded.

---

I hope that helps. Let me know if you have any trouble or other questions,
Bill

[Sharon Vaingast]

WOW, Thank you very much!
So, is there any way to give you credits for your great theme and support?

Regards,
Sharon

[Sharon Vaingast]

One more thing,
Please note the logo is cut. I don’t see the full size of it.
(you can see the full logo image in the facebook widget)

Thanks again,
Sharon

[Bill Robbins]

No problem. Just a little more code for your “Custom CSS” box:

#header {
	height: 180px;
}

#text-logo {
	top: 42px;
}

I appreciate your endorsement. I’m collecting new customer testimonials for our site redesign. If you’d like to leave one below, that would be fantastic.

Thanks and let me know if you need anything else,
Bill

[Sharon Vaingast]

I would like to thank you for your great theme, support and service.
I’m working with several different themes from different providors and no doubt that you are the best!
Always ready to solve my questions/problems even when it doesn’t relate direct to the theme options but requires extra programming skills.
Always answers fast and with grace.
Always professional and accurate.

Without a doubt you will be my first choice when choosing designed themes for my customers.

Thank you very much.

Regards,
Sharon Vaingast Peretz

[Bill Robbins]

Thank you so much Sharon for the kind words. If you need anything else, just let me know.

Take care,
Bill

[Author]

Posts