Styling List Subscription Widgets

To style a list subscription widget, you should have a basic understanding of CSS. When you copy our javascript widget code snippet into your site or blog, it will extend your document with the following content. All elements are DIVs unless otherwise noted below.

You'll probably need to override some of our base styles with the !important declaration.


Inline CSS Example

<style type='text/css'> 
  .peWidget {
  color: #ff9900;
  border: dashed 5px #770000;
  background: #330000 url("http://www.polleverywhere.com/images/themes/redderflies.png") bottom left no-repeat;
  margin-top: 20px !important;
  width: 300px; }

.peName {
  text-align: left !important;
  padding: 0 !important;
  font-size: 300% !important;
  font-family: Garamond, serif; }

.pePhoneNumber input {
  background: #440000;
  margin-top: 0.5em;
  width: 90%;
  color: #cc3300;
  font-size: 3em; }

</style>


Resulting Widget

DOM Structure Reference

#pe_list_[id].peWidget
  .peManageListSubscription
    .peHeader
      .peName
        [Name of your list]
    .peBody
      .pePhoneNumber
        Enter your phone number to opt-in or out
        input#pe_phone_number type=text
      #peStatusMessage.peListSubscription
      #peStatusInvited.peListSubscription
        Thanks! You are invited to this list but are not yet subscribed. You should have received a text message on your mobile phone to confirm your subscription. If you want to un-invite yourself, click the button below.
        button#peButtonUninvite
      #peStatusSubscribed.peListSubscription
        You are subscribed to this list.
        button#peButtonUnsubscribe
        to unsubscribe
      #peStatusNotSubscribed.peListSubscription
        You don't seem to be subscribed to this list. Please select your mobile carrier from the list:
        select.peCarrierList
        button#peButtonSubscribe
          Click here to subscribe
      #peStatusInvalid.peListSubscription
        This number is not valid
    .peFooter
      .peTerms
        By signing up, you agree to Terms & Conditions. Message and Data Rates May Apply. Text HELP to 27138 for HELP. To STOP text STOP to 27138.