Plugin Author
mrwweb
(@mrwweb)
Hi @murtykorada,
Sorry to hear about your troubles.
The plugin can’t control for all themes that it might be used with, so there are times where a theme can interfere with the plugin styles.
In this case, the problem is on line 1484 of your style.css file where the #widget a selector has the style display: inline-block. Removing that style and using normal inline links resolves the problem.
If you’re using that #widgets a style for something, you’ll need to right a more specific style that will only style the elements you intend.
Wow, you are good. How did you find out? Sorry if it is a silly question, I am a newbie.
I am using ThemeID Responsive theme and their full width child theme.
The parent theme’s style.css has this as you pointed out:
#widgets a {
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none;
}
Can I define a new widget style in child theme and use it for the plug in? If yes, how?
Or there another way to customize the plug in style?
Plugin Author
mrwweb
(@mrwweb)
I use a Firefox plugin called Firebug. Chrome, Safari, and Internet Explorer all have some version of a developer tools suite with similar features. It allows you to inspect the styles applied to an element and see how they interact (though you have to have a general idea of how CSS works for it to make any sense).
Because you’re already using a child theme, you can’t make a child-child theme (grandchild?). If there’s a way to add custom CSS, just add:
#widgets a {
display: inline;
}
Jetpack has a custom CSS module that could help you with this.
To be bluntly honest, that style is way too broad and shouldn’t be written in the way it is (particularly in a distributed theme). I’m sure this isn’t the only widget plugin that breaks because of it. Because it’s a theme issue, all I can really say is that you’ll have to contact the theme developer if you need additional support on these styles.
