Staff Page – sidebar widgets

[Angelina & Lawrence Birney]

Hi Bill,

First of all, thank you for the previous guidance you gave me about the slide sizes for the Home Page. Everything is now working well.

I have a couple of other questions at this time.

1. My DEFAULT Sidebar has three widgets: RECENT POSTS, DONATION Widget, and MAIL CHIMP Widget.

I then placed two widgets on my staff STAFF Sidebar: RECENT POSTS, and MAILCHIMP Widget. My thought was that only these two widgets would appear on the STAFF Page and the other pages would have the Default Widgets.

The problem is the STAFF Sidebar still contains a Donation Widget even though I did not place a Donation widget into the Sidebar for the Staff Page.

Can you tell me how to remove this from the Staff Sidebar without removing them from all the other pages (About, Donate Pages)?

2. DONATE WIDGET
Is it possible to make a change to the donation widget without affecting the Donation Bar? I am not using the graph as this time and want to:

a) change the color of the small bar on the Donation WIDGET and

b) change the color of the text in the DW. It seems like the text color is connected to the text color chosen for the overall WIDGETs choice and not separate for the Donation Widget in particular. So as mentioned would I’d like to know if I can change the color of that small bar in the DW and the color of the Text in that small bar.

My site link is: http://www.purevisionfoundation.org

Hope that makes sense. I tried doing it both in the Customize Section and the Theme Options section and had no luck.

Thanks so much for your help with this.

Angelina

[Bill Robbins]

Hello Angelina,

Your site’s coming together nicely. Let’s see if we can find answers for your questions.

Staff Sidebar: I had a typo in the sidebar file that was keeping the staff widgets from loading properly. It’s fixed in a theme update. You can make the update by clicking on your WordPress dashboard and selecting updates. The theme updates will be available at the bottom of that screen.

After you make the update, that should let your staff sidebar work like it’s supposed to.

---

For your donation widget, here’s how to hide the graph background:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   #home-widgets .donate-graph-cover,
   #sidebar .donate-graph-cover {
   	-moz-box-shadow: none;
   	-webkit-box-shadow: none;
   	box-shadow: none;
   	background-color: transparent;
   }
   

3. Update your settings.

You can change the colors of the donation widget. Go to the Appearance section and select Customize. The "Donation Bar Colors" section will let make those changes. The text that's over the graph portion is called "Donation Bar Description." See if that won't let you change the color.

See how those work and let me know if you have any trouble,
Bill

[Angelina & Lawrence Birney]

Hi Bill,

Thank you for getting back to me so quickly. I updated the theme and the Staff Bar works!

Before I enter the code you gave me regarding the donation widget, I just wanted to make certain I described the issue clearly.

Just to clarify– I don’t want to change anything about the long Donation BAR on my Home Page. I only want to change the small bar on the Donation widget for the Side Bars of my other pages. It is that sidebar widget where I would like to change the color of the small bar and the color of the text. (I’ve attached the sidebar donation widget from my website to the note.)

Since I’d like to do that without changing the Home Page Donation Bar colors or text, should I still go ahead and paste that code?

Just want to make sure, since not being a designer by profession, it takes me a bit of time to work out the dynamics of the site!

Thanks again,

Angelina http://www.purevisionfoundation.org

Attachments:

1. 

   Foundation-donation-widget-snippet.jpg
   

[Bill Robbins]

That snippet is made to remove the background color of the actual graph portion of the donation bar. It’s the part with the rounded corners. It will take out the shadow there and make the color transparent so that whatever color is set as the overall background of the widgets will be visible there.

If you just want to change the color of that area only, use this snippet instead:

#home-widgets .donate-graph-cover,
#sidebar .donate-graph-cover {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	background-color: #cccccc;
}

and just replace the #cccccc with the color code you’d like to use. You can use one of the color pickers on that page to help you find a color if you need help with that.

See how that works for you,
Bill

[Angelina & Lawrence Birney]

This reply has been marked as private.

[Bill Robbins]

If you only want to change the sidebar ones, first just delete the code that I just gave you from the Custom CSS box. Then replace it with this:

#sidebar .widget .donate-graph-cover {
	background: none;
}

#sidebar .donate-end p {
	color: #000;
}

The first one will remove the blue colored graph. The second one sets the color of the text there. You can replace the #000 with the color you’d like to use to change that.

Hope that helps,
Bill

[Angelina & Lawrence Birney]

Hi Bill,

I appreciate that you must be very busy. Perhaps my question was too long before, so I will try to simplify:

1. Without changing the Home Page Donation Progression Bar Color, I want to create a DIFFERENT COLOR for the progression bar on the Donation SIDEBAR widget. It is not that I want to have no color at all there. I want to create a different color on that Sidebar progression bar.

2. Also, without changing the Home Page color for the Progression Bar Text, I want to create a DIFFERENT color for the Progression Bar Text in the Donation SIDEBAR widget.

Thanks again,
Angelina http://www.purvisionfoundation.org

[Bill Robbins]

The bottom snippet from the last post remains the same. This one will set the color of the text there:

#sidebar .donate-end p {
	color: #000;
}

If you want to have a background color other than having it be transparent, then use this:

#sidebar .widget .donate-graph-cover {
	background-color: #cccccc;
}

just change the #cccccc to your color.

[Angelina & Lawrence Birney]

Hey Bill,

Thanks so much! It worked beautifully.

Best,
Angelina

[Bill Robbins]

That’s fantastic. Have a great day and let me know if you run into any other questions.

[Author]

Posts