[Resolved] Marketer Sidebar Question

[Sonja]

What means “This first widget will style itself automatically to highlight your favorite product” in Marketer Site?

[Leo]

Hi there,

Nothing too special really.

It has some specific CSS styling to make the background color different than the rest of the widget.

You can modify the color here:

.sidebar .widget:first-child {
    background-color: #e86000;
    color: #fff;
}

It should be in the Addtional CSS field in the customizer:
https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Sonja]

Okay, thanks. So i have to set the color once manually, and then the widget have always the same color, right?

Then i don´t understand, why it will style itself automatically. If that is not the case, maybe it´s better to change the description.

[Leo]

Because of the CSS, the first sidebar widget is highlighted automatically (without you having to add the CSS) and only the color needs to be changed.

I’m not sure how else we can set the color as everyone has different colors in mind.

We can take a closer look at the description if we get more confusing feedback from other users.

Thanks for your input 🙂

[Terence]

I found it confusing but I’m guessing most people who think the same won’t bother to tell you.

I understand “This first widget will style itself automatically” but why add “to highlight your favorite product”? It makes it sound like it automatically adapts somehow. And how the heck would it know what your favorite product was?

[Leo]

It’s hard to please everyone for things like this which is why we are always here to help and explain 🙂

[Terence]

If I make that widget’s appearance conditional based on, say, the specific page or whether the user is logged in/out; on the pages it doesn’t show the other widgets move up one and the top widget then takes the custom CSS formatting, which is not ideal.

What’s the bet way to make it so that the custom formatting is only applied to that specific widget?

[David]

Each Widget has a unique ID ( or class if its a custom widget), which you can get via the browser inspector. So you could target that ID instead of the .widget:first-child

[Terence]

Not being a coder David I am having difficulties trying to sort out which is what and how to apply it to the CSS in Customizing Additional CSS.

[David]

Aah viewing the HTML inside the Customizer won’t work – as it uses a different markup.
I use this plugin quite a lot:

https://en-gb.wordpress.org/plugins/widget-css-classes/

Makes this much easier as you can just assign your own class to target.

[Terence]

30 seconds later and — oh Wow!

That made it so simple.

Thank you David.

[David]

Glad to be of help

[Author]

Posts