WordPress.org

1. rosenkrieger
   Member
   Posted 4 years ago #
   

   I am using WP 2.7 and I want to edit the CSS so that ONLY the Social Icons show up, but in mine these little dots appear next to each icon.

   Can someone show me a CSS Example of how to let them show up clean without them?

   I made a screenshot to explain it better.
   http://img.skitch.com/20090105-kuetidgg39i5u6yiarbuaqb1pf.png

2. esarantopoulos
   Member
   Posted 4 years ago #
   

   I have the same problem, here is my code:

   div.sociable { margin: 10px 10px; }

   span.sociable_tagline { position: relative; }
   span.sociable_tagline span { display: none; width: 12em; }
   span.sociable_tagline:hover span {
   position: absolute;
   display: block;
   top: -5em;
   background: #000;
   border: 1px solid #ccc;
   color: black;
   line-height: 1.25em;
   }

   .sociable span {
   display: block;

   }

   .sociable ul {
   display: inline;
   margin: 0 !important;
   padding: 0 !important;
   }

   .sociable li {
   background: none;
   display: inline;
   list-style-type: none;
   margin: 0;
   padding: 2px;
   }

   .sociable ul li:before { content: ""; }

   .sociable ul li {
   background: none;
   display: inline;
   list-type: none;
   margin: 0;
   padding: 1px;
   float: left;
   }

   .sociable img {
   display: inline;
   width: 16px;
   height: 16px;
   border: 0;
   margin: 0;
   padding: 0;
   }

   .sociable-hovers {
   display: inline;
   opacity: .6;
   -moz-opacity: .6;
   filter: alpha(opacity=60);
   }

   .sociable-hovers:hover {
   display: inline;
   opacity: 1;
   -moz-opacity: 1;
   filter: alpha(opacity=100);
   }

   .sociable a:hover img {
   display: inline;
   margin: 0;
   padding: 0;
   }

   .sociable a[href^="http:"] {
   display: inline;
   padding-right: 0px;
   background: transparent;
   text-decoration: transparent;
   }

   Any thoughts?

3. djvibe
   Member
   Posted 4 years ago #
   

   has anyone figured this out yet?? I would sure like to know.. having exact same problem.

   Cheers,

4. ClaytonJames
   Member
   Posted 4 years ago #
   

   @ djvibe

   I think your checkmarks are due to the single li style defined in the Elements theme.

   #single li {
   padding: 0 0 0 20px;
   background: url(images/icon-check.gif) top left no-repeat;
   }

5. djvibe
   Member
   Posted 4 years ago #
   

   thanks for the feedback Clayton! I know that it is coming from the Elements CSS. I want to figure out a way to have no bullets by using the sociable.css that comes with the plugin. I use lists in my blog posts and pages so totally removing it from the master style is not an option.

   It must be possible remove it in the sociable style (sociable.css)

   changing .sociable ul or .sociable li??

Topic Closed

This topic has been closed to new replies.