[Resolved] change widget background and text color

[Tim Zurawski]

Trying to put ads in widgets. Text is white, background is black.
How and where to change?

[Tom]

Hey Tim,

Have you tried Customize > Colors > Sidebar Widgets?

Let me know 🙂

[Tim Zurawski]

Been there. The only widgets are header, footer bar and top bar. the side widgets do not show.
I made a screen shot, but couldn’t paste it here.

also, how do you control widgets for various pages? I am building my first page with sidebar and using widgets. Struggling with placing ads in columns with elementor.

The text widget is the only one I got to work correctly with images. Is there a video somewhere?

Thank you Tom!

[Tom]

Not too sure what you mean. Are you not seeing the color controls in Customize > Colors > Sidebar Widgets? Those controls are only for sidebar widgets.

If you don’t see sidebar widget areas in Customize > Widgets, it’s likely because they aren’t visible on the page. Make sure your sidebar layout is set to something that includes a sidebar: https://docs.generatepress.com/article/sidebar-layout/

To display different widgets on different pages, you can use a plugin like this: https://wordpress.org/plugins/content-aware-sidebars/

[Tim Zurawski]

thank you Tom!
<><

[Tom]

You’re welcome 🙂

[Maxim]

Hi,

I use the Marketer Theme and the color “white” for text in the left sidebar widget seems to be hard coded. How can I change it using Cusomizer > Colors > Sidebar-Widgets?

Here’s the custom CSS:

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
		border: 1px solid rgba(232, 234, 237, 1);
	box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget */

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
	color: #fff;
}

.sidebar .widget li {
	margin-bottom: 15px;
}

.button.light {
	background: #fff;
	color: #000;
}

.button.light:hover {
	background: #fafafa;
	color: #222;
}

.separate-containers .page-header {
	background: transparent;
	padding: 20px 0;
}

.page-header h1 {
	font-size: 30px;
}

@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		max-width: 300px;
	}
} /* End GeneratePress Site CSS */

[David]

Hi there,

this CSS rule sets the first widget text color in either sidebar to be white.

/* Featured widget */

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
	color: #fff;
}

If you want to apply that to just the right sidebar then switch out the two instances of .sidebar for #right-sidebar

If thats not the issue then can you share a link so i can take a look.

[Maxim]

Hi David,

Here we go: “*domain deleted*”

I would like to be able to customize any color in the sidebars via the Cusomizer > Colors > Sidebar-Widgets. Or any color in the theme for that matter 🙂

Thank you!

Max

[David]

aah that widget has inline styles – is that being added by a plugin like Shortcodes Ultimate ?

[Maxim]

You’re absolutely right, David! Silly me 🙂

Thank you!

[David]

Glad to be of help

[Author]

Posts