How to center a text box and a button in a widget

You using Pagespeed (it appears) to ‘smush’ and optimize the CSS which is fine…

A Child Theme is always recommended…

The CSS to add to bottom of stylesheet that should work is:

p.sml_email{padding:0 0 0 40px;}

typical centering methods did not seem to work (some CSS may be stripped with the tools you are using)…

with above it appears near center and inline with the submit button…

form.sml_subscribe {
padding-top: 5px;
text-align: center;
}

If you put that in your CSS, I think that will do it.

I added a little padding to the top which will give it a little space to breath. You can omit that line or change the pixel value accordingly.

Thanks Seacost Web Design for the answer.

martcol: thanks very much for the answer, it in fact did resolve the issue and now the box is nicely centered. And by the way the padding on the top was a great idea.

I have one more question: on top of the subscription widget, there is a search box that is part of the theme. Is there an easy way to reduce the spacing between search box and subscription widget?

I appreciate the help.

A couple of more questions:

1. How to center the social icons on the “FOLLOW US ON:” widget?
2. How to center the title of all the widgets? For example if I want “SUBSCRIBE TO MINUTIFY”, “FOLLOW US ON:”, … all to be centered what can I do?

Thanks again.

In your theme CSS file you have this rule:

#searchform {
background: none repeat scroll 0 0 #D0D0D0;
margin-bottom: 40px;
padding: 20px 0;
}

You can see that margin-bottom: 40px is creating that space between it and the rest of the sidebar. Adjusting that 40px will adjust the space accordingly.

In the CSS for the social media widget in the sidebar you have this rule:

.smw_left {
text-align: left;
}
That’s what is keeping the buttons to the left. Now things get a little tricky. I suspect that other elements use that class .mw_left so if you overwrite that, it will affect every other place where that rule is used.

The container for that widget <aside> has a class of .social-widget-2 so you could try this:
.social-widget-2 .smw_left {
text-align: left;
}

You could also add a little padding-top if you wanted to.

If that turns out to be the same as the rule you added after the first question was answered, you could combine the two rules by adding, “.social-widget-2 .smw_left,” to it: it will look like this:

.social-widget-2 .smw_left, form.sml_subscribe {
padding-top: 5px;
text-align: center;
}

The comma is important.

With your final question, I think it is time to say you need to do a little more research on using CSS selectors and specificity.

The other thing to point out is that if you are making quite extended CSS edits to the main theme you should consider using a child theme. If you don’t and you upgrade any of the components of your site affected by the new CSS rules you will lose them.

If you want my opinion, I wouldn’t center those headings in the sidebar. I think they look nicer aligned to the left.

Whilst I am on a role, you would do well to use the Firebug plugin for Firefox. It is brilliant for showing CSS and gives the function of being able to edit the CSS live to see how changes affect things. You also need to be wary as mentioned above, that some rules might be used by other elements on other pages.

martcol: thank you very much for the complete answer, I really appreciate it. The search box alignment worked beautifully and it looks very nice, thanks for that.

The other part centering the social icons however, did not work, also the padding of the social widget did not work as well. I am wondering if instead of:
.social-widget-2 .smw_left {
something else may need to be used?

Thanks for suggesting to use a child theme. Can I save the changes that I make in the css file somewhere and if I update the theme copy and past those changes instead of using a child theme?

I will take a look at using Firebug, although I am a Chrome user instead of Firefox.

Thanks again for all your help, you really are a master ??

#social-widget-2 .socialmedia-buttons.smw_left {
text-align: center;
}

You can try that.

Actually, I am not a “master” but I do like to be helpful if I can. I am a back-bedroom, determined, novice coder so, you use my suggestions at your own risk!

Child theme is the way to go. Find out about it in the codex or just search for it. There’s heaps of stuff out there.

The main benefit of child themes is that you can add edits to the parent theme and when you upgrade anything, your edits will remain.

Thanks a lot martcol.
That worked nicely, I really appreciate all the help you provided and wish you even more success.