Jump to content
Sign in to follow this  
chules

Style of Sidebar Subscribe by Email Widget

Recommended Posts

chules

On my site at, http://www.markorciuoli.com, I have a sidebar widget named "subscribe by email" and I am looking to see how I can style this. As you can see the 2 boxes are not equal lengths and there is no spacing between the email entry box and the button labeled "Create Subscription". I tried using firebug but am not sure how to achieve a better look. Thank you - chules

Share this post


Link to post
Share on other sites
catrina

Are you familiar with CSS to change the look or are you unsure of what CSS can be used to achieve the look you want?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
chules

I can accomplish this with CSS but am not sure which file to edit. When I use firebug I see reference to style.css in the platformpro theme. I am using the child theme and the first line when viewing with firebug shows the following: element.style { width: 97%; } This line would control the length of the top box but I see no reference to any file name at all. So between the platformpro theme, platform base theme and the plugin itself I'm not sure where to simply increase the spacing between the 2 boxes and fix the width so both boxes display the same length when referring to the subscribe be email widget. Thank you - chules

Share this post


Link to post
Share on other sites
catrina

You can add the CSS to Settings > Custom Code > CSS. To increase the space between the text field and button, add this CSS:

input.button {margin-top: 10px;}

Increase and decrease the margin value according to what you want.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
chules

Catrina, Thank you for the help as the spacing worked great!! Now the top text field where you enter the email address is slightly larger then the button you select to create your subscription. I am trying to make the text field the same width as the botton. When I use Firebug and click on the text field I get the following element.style { width: 97%; } When using Firebug I change the value to 96% and it matches the width of the bottom button. Where would I change this this value? Than you - chules

Share this post


Link to post
Share on other sites
catrina

It's easier to fine-tune the width with pixels rather than with a percentage:

input#subscription_email {width: VALUEpx;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×