6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

.css for Simple Social Sharing plugin

by OKFarmgirl
5 replies
  • WEB DESIGN
    • |
I installed the Simple Social Sharing Plugin, and I really like the way it works, BUT...the .css has it as an unnumbered list, and it looks downright goofy. Here's the code:

}

.simple_socialmedia ul {
list-style-type:none;
margin:0;
padding:5px 0;
}

.simple_socialmedia ul li {
padding: 5px 10px 5px 20px;
line-height:18px;
display:inline;
margin:0;
}

.simple_socialmedia ul li a{
color:#000000;
text-decoration:none;
}

.simple_socialmedia ul li a:hover {text-decoration:none;}

.simple_socialmedia ul li.sharetext {font-weight:bold;padding: 5px 5px 5px 0;}
.simple_socialmedia ul li.twitter {background:url(images/mini_twitter.png) no-repeat left;}
.simple_socialmedia ul li.facebook {background:url(images/mini_facebook.png) no-repeat left;}
.simple_socialmedia ul li.stumble {background:url(images/mini_stumble.png) no-repeat left;}
.simple_socialmedia ul li.digg {background:url(images/mini_digg.png) no-repeat left;}
.simple_socialmedia ul li.delicious {background:url(images/mini_delicious.png) no-repeat left;}

So I don't know how to change it. My .css just isn't that good. I don't like the ul format because it actually puts a bullet in the field.

Any ideas?
#css #plugin #sharing #simple #social
  • Profile picture of the author Revenant45
    If you need to remove bullets from an unordered list (ul) add this to your css:

    ul{
    list-style-type: none;
    }
    You can also style the bullets differently (with your own image) if you don't like dots.
    {{ DiscussionBoard.errors[3619162].message }}
  • Profile picture of the author OKFarmgirl
    Isn't that already in the code?

    }

    .simple_socialmedia ul {
    list-style-type:none;
    margin:0;
    padding:5px 0;
    }
    {{ DiscussionBoard.errors[3619353].message }}
    • Profile picture of the author Revenant45
      Originally Posted by OKFarmgirl View Post

      Isn't that already in the code?

      }

      .simple_socialmedia ul {
      list-style-type:none;
      margin:0;
      padding:5px 0;
      }

      True, but since it still gives you bullets, why not use entire ul selector in this case. Or you could add that line of code to each class selector in the style sheet.
      {{ DiscussionBoard.errors[3619451].message }}
      • Profile picture of the author OKFarmgirl
        Originally Posted by Revenant45 View Post

        True, but since it still gives you bullets, why not use entire ul selector in this case. Or you could add that line of code to each class selector in the style sheet.
        I'm sorry, pretend I'm an idiot please!

        I would love to get rid of the stupid box around my unnumbered lists altogether as I think they are distracting (they show up that way in my articles). So I'd put that in the main stylesheet? And when you say "use entire ul selector", I'm not sure at all what that means. I can usually figure out how to edit .css, but I'm not a .css writer, that's for certain. Thanks for putting up with me noobie-ness.
        {{ DiscussionBoard.errors[3619574].message }}
  • Profile picture of the author Revenant45
    Sounds like you're using Wordpress. I don't deal with Wordpress, however css doesn't discriminate like I do. If you want the bullets gone, add the line of code I gave earlier into the style sheet for your plug-in.

    CSS is all about selectors & style declarations. Classes and ID's. In order to style an element you must first select it.
    .simple_socialmedia ul li <----- is a class type selector which is specific. Since you don't want bullets, adding a new class style declaration of the more universal "ul" will override the specific selector depending on where you put it in the page or style sheet.

    Try it, its very easy.
    {{ DiscussionBoard.errors[3621770].message }}

Trending Topics