Same Widget, Different Styling

Correction: In one centered and the other justified/left!

Hi,
you can stylize almost every element of the widget using selectors and classes. Use the HTML Inspector of your browser for this.

When you create a new widget, WordPress will assign a number to that widget (for example, pis_posts_in_sidebar-3 for a widget and pis_posts_in_sidebar-7 for another widget of the same plugin). Using this selector, you can stylize the titles of the first widget in a way, and the titles of the second widget in another way.

Please let me know if you need further help.

Thank you very much for your help!

Your help was most appreciated!

??

Hi,

Just to add to this. I’m having a hard time finding the assigned number for each version of the widget I am using. I am using Chrome and inspect element, but both versions seem to be displaying as ‘posts-in-sidebar’ with no additional number. I guess I’m looking in the wrong place. Any pointers or advice greatly received!

Just to elaborate,I added:

.pis-excerpt { border-bottom: 3px solid #7af4a3; padding-bottom: 10%; }

To one version and I am trying to stop that border bottom from appearing in another version.

I really didn’t understand your needs.

Do you use two different versions of the same plugin?
Also, what do you want to do in detail?

Hi,

Sorry for the confusion. My problem seemed similar to the original poster which is why I followed this thread.

I am using this plug in more than once. I set one instance to have a border bottom. I cannot stop the second instance from also having the same border bottom, despite adding {border-bottom: none} to the second instance of this widget.

I guess I am struggling to find the two different selectors.

Hi,
you have to search for a HTML tag similar to this:

<aside id="pis_posts_in_sidebar-4" class="widget posts-in-sidebar">

Now, if you create a style like this:

#pis_posts_in_sidebar-4 .pis-excerpt { border-bottom: 3px solid #7af4a3; padding-bottom: 10%; }

it will work only for any .pis-excerpt descendant of #pis_posts_in_sidebar-4

If you need further help, let me know the URL of the site. I will be happy to help you.

Hi,

Thanks for this. I figured it out with your help!

The reason I wasn’t getting a number was because each instance was sitting inside another widget that was generating a number (Responsive column widgets). I fixed it like so:

.responsive_column_widgets_3 .pis-excerpt { border-bottom: none;}

Thanks Aldolat, You are a star.

You’re welcome and… thanks for the feedback! ??