CSS for form in footer widget only (not in entire site)

• 

  jpiller3 · Member · Mar 20, 2014 at 9:06 pm

  • Copy link
  • Add topic to favorites

  In my footer widget form, I’d like to:

  1. Edit the width of the form fields so they don’t take up as much space.
  2. Change the submit button so it is much smaller.
  3. Right-align the button and the text that auto-fills in the form fields.

  I already have some custom CSS for forms on my site (such as the form on this page: http://sccsandbox.wordpress.com/support/service-request/) that I want to keep the same, so I’m not sure how to change it specifically for the footer widget.

  Any help would be appreciated! Thanks in advance.

  The blog I need help with is: (visible only to logged in users)

• 

  timethief · Member · Mar 20, 2014 at 9:10 pm

  • Copy link

  All CSS editing is theme specific editing. Would you care to state which theme this relates to?

• 

  jpiller3 · Member · Mar 20, 2014 at 9:12 pm

  • Copy link

  The theme is Basis.

  You can forget about #3 (Right-align the button and the text that auto-fills in the form fields) as I’m not going to place it on the right anymore.

  Thanks!

• 

  timethief · Member · Mar 20, 2014 at 9:14 pm

  • Copy link

  Thanks for providing that for the Volunteers and/or Staff who will assist you with CSS editing when they can.

• 

  thesacredpath · Member · Mar 21, 2014 at 2:42 am

  • Copy link

  Hi, give the following a try. I’ve used some specific selectors to target that contact form widget only and reduced the width of the fields to 50% of what they were originally.

  #contact-form-widget-text-5 {
      max-width: 50%;
  }
  #contact-form-widget-text-5 .pushbutton-wide {
      width: 90px !important;
      padding: .5rem;
  }

• 

  jpiller3 · Member · Mar 21, 2014 at 1:59 pm

  • Copy link

  That worked. Thanks!

• 

  thesacredpath · Member · Mar 21, 2014 at 4:25 pm

  • Copy link

  You are welcome.