Creating your own social media button panel styles

If you prefer to use your own CSS styles to create the button panel design you can disable the default CSS by unchecking the “Default Skin” option in the plugin settings page.

The plugin adds several different HTML tags to both the floating and slide out panels, which should enable you to fully customise the button panel layout.

The following CSS from the default skin style sheet can be used as a starting point and template for your own custom theme:

Default Skin CSS

#nav-dcssb, #nav-dcssb li {
margin: 0;
padding: 0;
list-style: none;
}
#nav-dcssb {
width: 100%; overflow: hidden;
}
#nav-dcssb li {
padding: 5px;
}
#nav-dcssb li.size-box {
text-align: center;
height: 60px;
}
#nav-dcssb li.size-small {
height: 30px;
}
/* Floater */
.dc-social-float .tab {
cursor: pointer;
height: 44px;
margin-left: -1px;
}
.dc-social-float .dc-social-float-content {
background: #fff;
border: 1px solid #bbb;
padding: 10px;
overflow: hidden;
}
.dc-social-float .dc-social-float-content {
border-radius: 10px; -webkit-border-radius: 10px;
}

/* Slick */
.dc-social-slick .dc-social-slick-content {
padding: 10px;
background: #fff;
border: 1px solid #ccc;
}
.dc-social-slick.vertical .dc-social-slick-content {
width: 78px;
}
.dc-social-slick.horizontal.left #nav-dcssb li.size-small, .dc-social-slick.horizontal.right #nav-dcssb li.size-small {
height: 60px;
}

.dc-social-slick.top  {
top: 0;
}
.dc-social-slick.bottom  {
bottom: 0;
}
.dc-social-slick.right  {
right: 0;
}
.dc-social-slick.left {
left: 0;
}
.dc-social-slick.right, .dc-social-slick.left {
padding-top: 2px;
background: url(images/bg_slick_top.png) repeat-x 0 0;
}

.dc-social-slick.right .dc-social-slick-content {
border-top: none;
border-right: none;
border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left .dc-social-slick-content {
border-top: none;
border-left: none;
border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0;
padding: 10px 10px 20px 10px;
}
.dc-social-slick.left.horizontal .dc-social-slick-content, .dc-social-slick.right.horizontal .dc-social-slick-content {
border-radius: 0; -webkit-border-radius: 0;
padding: 10px 10px 18px 10px;
}
.dc-social-slick.top.vertical .dc-social-slick-content, .dc-social-slick.bottom.vertical .dc-social-slick-content {
border-top: none;
border-bottom: none;
}

.dc-social-slick .tab {
cursor: pointer;
}
.dc-social-slick.top .tab, .dc-social-slick.bottom .tab {
height: 46px;
}
.dc-social-slick.left .tab, .dc-social-slick.right .tab {
width: 46px;
}

.dc-social-slick.bottom .tab {
top: 1px;
}
.dc-social-slick.top .tab {
bottom: 1px;
}
.dc-social-slick.align-left .tab {
margin-left: -1px;
}
.dc-social-slick.align-right .tab {
margin-right: -1px;
}

.dc-social-slick.bottom.align-right.horizontal .dc-social-slick-content {
border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
}
.dc-social-slick.bottom.align-left.horizontal .dc-social-slick-content {
border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
}

.dc-social-slick.top.align-right.horizontal .dc-social-slick-content {
border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
}
.dc-social-slick.top.align-left.horizontal .dc-social-slick-content {
border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
}

.dc-social-slick.right .tab, .dc-social-slick.left .tab {
margin-top: -2px;
}
.dc-social-slick.right .tab {
left: 1px;
}
.dc-social-slick.left .tab  {
right: 1px;
}

.dc-social-slick.horizontal #nav-dcssb li {
float: left;
}

Note: If you create your own CSS styles for the plugin make sure that the customised code is added to your theme files NOT the files in the plugin folder. WordPress automatically deletes all plugin files when updating therefore any changes will be overwritten.

Categories 187 Views

6 Comments

Korey 2012 Mar 15 at 10:28 pm

I was just wondering how do you get this plugin to hide itself when someone is browsing using a mobile browser? I added the plugin to my website and then tested the website on my iPhone and the widget just covered most of the text…is there a way to have the widget be disabled when browsing from a mobile?

Reply
- Lee 2012 Mar 16 at 5:28 pm
  
  Hi,
  
  You could probably do this using CSS or if you are using a plugin to create the mobile site then usually they include options to disable plugins
  
  Reply
Jeff 2011 Sep 23 at 12:18 am

how did you get rid of the “share” image in your float above? i can’t seem to lose it. thanks!

Reply
- Lee 2011 Sep 23 at 12:42 am
  Hi,
  
  You can use the following CSS:
```
#dcssb-float.dc-social-float .tab {display: none;}
```
  Reply
Hello, 2011 Aug 13 at 2:07 am

Hello,

I am trying to use the slick version of the plug in and have use my own logo image, however, I want the social rollout to start below the taller graphic, can you advise me how to do so?

Please advise.

Thank you!

James

Reply
- Lee 2011 Aug 13 at 2:22 am
  
  Hi,
  
  The tab size is set for the default tab in the CSS. You will need to add CSS to your theme’s style sheet to set the tab dimensions to that of your custom image
  
  Reply

Design Chemical