Plugins: Themes

You can adapt the look and feel of our plugins to your website by either using one of the preset themes in the plugin wizard or by using a custom theme. To use your own theme create a new CSS file on your server and include the full URI to this file in the plugin settings by using the parameter css_theme_uri.

Example

In this example, we have included the parameter css_theme_uri to use the custom theme located at http://cdn.oneall.com/css/api/socialize/link/themes/link_vertical.css. 

<script type="text/javascript">
 oneall.api.plugins.social_link.build("social_link", {
  'providers' :  ['facebook', 'google', 'twitter', 'yahoo'], 
  'callback_uri': 'https://app.oneall.com/social-login/',
  'css_theme_uri': 'http://cdn.oneall.com/css/api/socialize/link/themes/link_vertical.css',
  'user_token': 'INSERT YOUR USER_TOKEN HERE OR LEAVE BLANK'
 });
</script>

HTML Structure

This is the HTML-Structure of the Social Link Plugin. We voluntary added more classes and identifiers than necessary to simplify the creation of new themes. 

<body id="social_login" class="plugin">			
 <div id="social_login_frame" class="frame">		
  <div id="content">
   <div id="providers">
    <div class="provider" id="provider_facebook">
     <a class="button" id="button_facebook" title="Login with Facebook"><span class="tick"></span></a>
     <div class="name" id="name_facebook">Facebook</div>
    </div>
    <div class="provider" id="provider_google">
     <a class="button" id="button_google" title="Login with Google"><span class="tick"></span></a>
     <div class="name" id="name_google">Google</div>
    </div>
    <div class="provider" id="provider_twitter">
     <a class="button" id="button_twitter" title="Login with Twitter"><span class="tick"></span></a>
     <div class="name" id="name_twitter">Twitter</div>
    </div>
    <div class="provider" id="provider_yahoo">
     <a class="button" id="button_yahoo" title="Login with Yahoo"><span class="tick"></span></a>
     <div class="name" id="name_yahoo">Yahoo</div>
    </div>
   </div>				
  </div>
  <div class="clear"></div>
  <div class="footer">				
   <div id="branding">
    <a target="_blank" href="http://www.oneall.com/services/social-login/">Powered&nbsp;by <span class="plugin_title">OneAll&nbsp;Social&nbsp;Login</span></a>
   </div>
   <div id="message"></div>
  </div>			
 </div>		
</body>

CSS Example

.plugin {
 width:220px;
}

.plugin #providers .provider {
 width:200px;
 margin-bottom:2px;
}

.plugin #providers .provider .name {
 display: none;
}

.plugin #providers .provider .button {
 background: url("http://cdn.oneall.com/img/api/socialize/providers/button/sprite_link_200_30.png") no-repeat scroll 0 0 transparent;
 height: 30px;
 width: 200px;
}

.plugin #providers .provider #button_facebook {
 background-position: 0 0;
}

.plugin #providers .provider #button_google {
 background-position: 0 -30px;
}

.plugin #providers .provider #button_twitter {
 background-position: 0 -60px;
}

.plugin #providers .provider #button_yahoo {
 background-position: 0 -90px;
}

CSS Example Preview Social Link Theme