Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
Henry06

How can I make the font, input box, and submit button on the newsletter block smaller?

Question

Hello,

I was wondering if there was a way to make everything in the newsletter block smaller. Padding, font size, input box, submit button, etc. Any help would be greatly appreciated!

Edited by Henry06

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 1

Was able to tweak it a little to get what I wanted. For anyone else who has this question, try:


.newsletter-block .newsletter-form-header-title {
 font-size: 18px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 0px 17px;
}
.newsletter-block input {
 height: 0.1em;
 max-width: 20em;
 display: block;
}
.newsletter-block .newsletter-form-button-wrapper {
 margin: 0px 0 0 0;
}
.newsletter-block .newsletter-form-button {
 padding: 7px; text-transform: none; font-size: 0.9em; 
}

Adjusting each value to your desired look.

Edited by Henry06

Share this post


Link to post
  • 0

Hi Henry - I'm trying to do the same thing, but with the "Form" block. Not sure if it is different - when I Inspect Element, seems to be called the same thing as Newsletter and the blocks look exactly the same in edit mode.

Could you explain where to drop this code? In the particular page under settings -> advanced? Do I need to use some code to create context, such as find the unique id for the block? When I put this in either Code Injection in Site Settings, or on the page settings, I get the same result - the code shows up at the top of the page. And the form format does not change. Thanks

Share this post


Link to post
  • 0

Hello - You would put the code under the custom CSS field. To get here, go to view your site and click the paintbrush to adjust page settings. Scroll down to the bottom and you'll see a custom CSS button. Drop the code in there. You'll have to change the .newsletter block to the one for forms. One thing I found was that the input height had to be a bit larger than what I had above for it to show on some browsers, but everything else worked fine. Let me know how you make out.

Share this post


Link to post
  • 0

Hi Henry, I'm having an issue now with this custom form code.

In Firefox (not Safari or Chrome, and I don't have a PC to test IE) the form fields do not work. You cannot click into them. Prompts also do not show up - such as "First Name" which display in a light grey and then disappear when you click in the field to type. So users on Firefox will not know what to fill out, even if the form fields did work. Yikes. Any suggestions?

Check out here http://www.moorewellness.com/ and here http://www.moorewellness.com/training-options

Share this post


Link to post
  • 0

Hi,

I had this issue as well. Adjusting the input box height fixed it. Another thing that could make your form box smaller is to put all your text in the description and leave the title blank. This is what my final CSS looked like with the adjusted input block:

.newsletter-block .newsletter-form-header-title { font-size: 18px}

.newsletter-block .newsletter-form-wrapper {padding: 0px 17px;}

.newsletter-block input {height: 3.4em;max-width: 20em;}

.newsletter-block .newsletter-form-button { padding: 6px; text-transform: none; font-size: 0.85em; }

See http://www.kupcakerie.com

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...