[Plugin: Subscribe2 widget] Styling Buttons in the Subscribe2 Widget
I recently installed Subscribe2 on a WP 3.4 website. I noticed the Subscribe and Unsubscribe buttons are quite large, gray and unattractive. Is there some way to apply CSS to the buttons? I’ve looked through the files for the widget in the Plugin Editor area, and I can’t see a place to apply a style to the buttons.
Can you point me in the right direction. My client is really wanting something that looks a little more polished that that, and I’m thinking it should be quite easy to apply a style to them, if I can just find where to do it.
If you are using the shortcode to deploy the form on a page wrap it in DIV tags and apply the styling through a class.
If you are using the widget enter a class name in the widget settings and use the same styling class approach.
I am using the widget in both a sidebar, and the footer. There doesn’t seem to be a place in the widget’s settings to apply a class. The only places I can see is post and pre content, but I don’t think that would be it. And in the Subscribe2 settings there is no setting for the widget. So where is it I should be applying this class? This is a WordPress hosted site, so I won’t have access to files via FTP.
Correction, there is a blank for div class, but that would style the whole div, not just the buttons.
You can use an attribute selector with the class to apply a style to the elements. Something like this if the class is “my form” would make the submit buttons 240px wide.
I know how CSS works, MattyRob.
The problem isn’t that I don’t know how to write CSS or apply a style in a template. The problem is I don’t know *where* to apply the style for this specific widget, for this specific plugin.
Because this is a site hosted by WordPress, I can only access files from the Admin login, and tThere doesn’t appear to be a .php template file for the widget available from the Admin panel for me to actually apply the style. The widget area, itself, only has one place to apply a style, and it’s the div for the widget itself, meaning, if you style that, you’re not styling the buttons – you’re applying the style to the whole widget.
So, once again, I’m asking *where* would this style be applied?
You would add that CSS in your style.css file for your theme.
I wasn’t even aware that Subscribe2 was available as an option on WordPress.com hosted site and I cannot see it as an option on my WordPress.com site.
If you are indeed on WordPress.com you can pay extra to custom design your own CSS so you may need to do that.
Yes, but doesn’t it need to be called in a source PHP file? That’s my issue. I don’t necessarily want/need to restyle all buttons for the entire site, so I don’t want to re-do the base CSS for the. I’d like to create something separate for the subscribe and unsubscribe buttons, which means I need to be able to call that custom CSS somewhere in the PHP, right?
The site is a client’s site – and when she hired me she told me she’d already set it up as WordPress hosted. So I don’t have the option of switching it to a self-hosted site, unfortunately.
Yes, Subscribe2 is an option on WordPress.com hosted site. You just go to the plugins area, search for the plugin and install.
WordPress.com is essentially a WordPress multisite install hosted and run by the folks at WordPress. When I access the single site that I host there, there is not Plugins section as it’s not site enabled.
Are you absolutely sure this is not a hosted WordPress site that your client set up?
Coming to the CSS – if you use the code I pasted in above it will apply the styling for submit buttons created with the input tag ONLY if they are also in a class called “myform”. Other buttons in different classes or indeed not in a class at all will be left untouched.
That’s what she told me, but I’ll double check with her.
I know how to style CSS. I know that I need to put said CSS in style.css, or at the very least in a plugin that handles custom CSS. I’ve got that. Please stop telling me how to do that. That’s not what I’m asking.
The problem – the one you have yet to address – is that I have to CALL that CSS class somewhere. I can’t just create a .myform class in the CSS and leave it there. I have to be able to call that class somewhere in the code for the widget. If I can’t do that, then fine, the answer is I can’t do that. But this repeatedly telling me to just create a class in style.css is not the answer to the question I’m asking. I am asking where to CALL the css. Where in the Subscribe2 widget would one call a custom CSS class.
Where is the code for the Subscribe/Unsubscribe form, so that I can apply that style?
Can you please answer that one question?
Right in my very first answer:
“If you are using the widget enter a class name in the widget settings and use the same styling class approach.”
The widget in Subscribe2 is enabled in the Settings and then placed in the Widget area – there is a field in there where it says “Div class name:” where you enter your class name.
In fact you have responded to this a day ago with this comment:
“Correction, there is a blank for div class, but that would style the whole div, not just the buttons.”
So now I’m really confused because I am not clear exactly what you are asking me.
Yes, MattyRob, I saw that, and in my response I said, “Correction, there is a blank for div class, but that would style the whole div, not just the buttons.”
I know about the div class blank, but, in previous attempts, when I applied my class to it, it seemed to apply the styling to the whole widget area, instead of just the buttons.
I am now seeing the problem was my class wasn’t specific enough. It was styling more than just the input buttons, so I needed to pare it down some. It’s working now.
Phew, yes if you define the class in there and make your CSS more selective for the attributes it will restrict the changes just to those attributes and on if they are within that class.
- The topic ‘[Plugin: Subscribe2 widget] Styling Buttons in the Subscribe2 Widget’ is closed to new replies.