Title: css styling for widget and shortcode
Last modified: August 21, 2016

---

# css styling for widget and shortcode

 *  Resolved [auroradesignstudio](https://wordpress.org/support/users/auroradesignstudio/)
 * (@auroradesignstudio)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css-styling-for-widget-and-shortcode/)
 * Is there a way to style the form such that it uses placeholder text within the
   form box instead of text labels? Also, how do I center the submit button only?
   
   I am using a shortcode on my home page and a widget on my sidebars, so need custom
   css for both.
 * Here’s the css I’ve cobbled together so far:
 * .widget_sf_widget_constantcontact {
    background-color: #acd8ef !important; padding-
   left: 10px !important; padding-right: 10px !important; padding-top: 10px !important;
   padding-bottom: 10px !important; text-align: left;} } widget_sf_widget_constantcontact
   label{ clear:both;float:right; width:35%; margin-top:5px } .widget_sf_widget_constantcontact
   input[type=”text”]{ float:right; width:60% } .widget_sf_widget_constantcontact
   input[type=”submit”]{margin-top:10px;color:#48638f;align:center;}
 * #sf_shortcode_constantcontact_0_form input[type=”submit”]{background-color: #
   acd8ef !important; color: #48638f;}
 * #sf_shortcode_constantcontact_label{
    clear:both;float:right; width:25%; margin-
   top:5px } #sf_shortcode_constantcontact_0_form input[type=”text”]{ float:right;
   width:70% } .#sf_shortcode_constantcontact_0_form input[type=”submit”]{ margin-
   top:10px }
 * The website is: [http://www.emotionallyhealthychildren.org/wordpress](http://www.emotionallyhealthychildren.org/wordpress)
 * Thanks for your help
 * [https://wordpress.org/plugins/constant-contact-widget/](https://wordpress.org/plugins/constant-contact-widget/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/css-styling-for-widget-and-shortcode/#post-4853207)
 * Hi! To center the submit button, center the text in the widget and then add the
   css to left align the paragraphs:
 * .widget_sf_widget_constantcontact,#sf_shortcode_constantcontact_0_form{text-align:
   center}
    .widget_sf_widget_constantcontact p,#sf_shortcode_constantcontact_0_form
   p{text-align:left}
 * You cannot use css to add placeholder text, but you can do that by editing the
   plugin file itself, by adding placeholder=”…” appropriately for each input. However,
   note that IE8 and IE9 do not support HTML5 placeholders, so a large chunk of 
   your web visitors won’t be able to see those placeholders. The only way to make
   it truly cross-browser would require some javascript listeners…
 *  [pennywhistle](https://wordpress.org/support/users/pennywhistle/)
 * (@pennywhistle)
 * [11 years, 9 months ago](https://wordpress.org/support/topic/css-styling-for-widget-and-shortcode/#post-4853426)
 * Can you be more specific about how you edit the plugin file itself to change 
   the placeholder text? I assume you mean the constanctcontactwidget.php file, 
   but I’m not sure what to change exactly. Thanks.
 *  Plugin Author [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * (@sourcefound)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/css-styling-for-widget-and-shortcode/#post-4853427)
 * If you are familiar with PHP and HTML, locate the function sf_constantcontact_form,
   and add:
 * placeholder=”…”
 * in the appropriate input fields. If you are just trying to change the labels,
   just change the text inside these bits
 * __(‘Email’)
    __(‘First Name’) __(‘Last Name’)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘css styling for widget and shortcode’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/constant-contact-widget.svg)
 * [Constant Contact Widget](https://wordpress.org/plugins/constant-contact-widget/)
 * [Support Threads](https://wordpress.org/support/plugin/constant-contact-widget/)
 * [Active Topics](https://wordpress.org/support/plugin/constant-contact-widget/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/constant-contact-widget/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/constant-contact-widget/reviews/)

## Tags

 * [css styling](https://wordpress.org/support/topic-tag/css-styling/)

 * 3 replies
 * 3 participants
 * Last reply from: [MembershipWorks](https://wordpress.org/support/users/sourcefound/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/css-styling-for-widget-and-shortcode/#post-4853427)
 * Status: resolved