Forums

WordPress › Support » How-To and Troubleshooting

[Plugin: Sociable] Remove bullets and do horizontal (26 posts)

  1. Sunite
    Member
    Posted 3 years ago #

    if you can see on my site the sociable thing looks horrible, can someone please tell me how to fix to horizontal.

  2. Ipstenu
    Half-Elf Support Rogue & Mod
    Posted 3 years ago #

    You need to change your CSS to display:inline; for #sociable li

    So something like

    #sociable li { display:inline; }

  3. Sunite
    Member
    Posted 3 years ago #

    this doesn't help, i lokked for this code on the sociable css and my themes single post but found nothing... :S

  4. millertime_79
    Member
    Posted 3 years ago #

    i am having the same problem! help!

    http://stevefarber.pinkmoonmedia.com/

  5. pardailhan
    Member
    Posted 3 years ago #

    put everything "inline"... for me it works:

    .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 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;
}

    e.g: http://www.contre-dits.com

  6. millertime_79
    Member
    Posted 3 years ago #

    Pardailhan - to be clear. Which file do I paste this code?

    Thanks for your help!

  7. Sunite
    Member
    Posted 3 years ago #

    let me try this code

  8. Sunite
    Member
    Posted 3 years ago #

    This is my code, can you do this for me, i tried, i tried your code but nothing works.(edit /wp-content/plugins/sociable/sociable.css right?)
    Im also thinking that it might be the Themes problem, the theme name is SEO Dubai, maybe you can help me that way.

    div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	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 ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

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

  9. Ipstenu
    Half-Elf Support Rogue & Mod
    Posted 3 years ago #

    No put it in style.css for your theme.

  10. esarantopoulos
    Member
    Posted 3 years ago #

    My bullets still appear even if I used "list-type: none;" Any thoughts? 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;
    }

  11. Sunite
    Member
    Posted 3 years ago #

    Ipstenu?
    what do i add to style.css??

    /*
Theme Name: Elegant Tonight
Theme URI: http://www.dxbseo.com
Description: A widget ready elegant theme with three columns suitable for magazines and everyday blogging.
Author: DXBSEO.com
Author URI: http://www.dxbseo.com
Tags: dark, theme settings, widgets, fixed width, three columns
.
General comments/License Statement if any.
.
*/

* {
	margin: 0; padding: 0;
}
body {
	text-align: center;
	font: 12px Verdana;
	color: #282828;
	background: url(images/body.gif) repeat-x 0 0;
}
a {
	text-decoration: none;
	color: #282828;
}
a:hover {
	text-decoration: underline;
}
img {
	border: 0;
}
.break {
	font-size: 0;
	width: 0; height: 0;
	clear: both;
}
.alignleft {
	float: left;
	margin: 4px 10px 5px 0;
}
.alignright {
	float: right;
	margin: 4px 0 5px 10px;
}
.hidden {
	display: none;
}
.noimage img {
	display: none;
}

#wrapper {
	width: 980px;
	margin: auto auto;
	text-align: left;
	position: relative;
}

#rss {
	position: absolute;
	width: 54px; height: 69px;
	background: url(images/rss.jpg) no-repeat 0 0;
	top: 145px; left: 682px;
}

/** BEGIN header **/
#header {
	height: 166px;
}
	#header ul {
		list-style-type: none;
	}
		#header ul li {
			float: left;
			text-transform: uppercase;
			font-size: 0.9em;
		}
		#header ul li a {
			color: #aaaaaa;
			font-weight: bold;
			display: block;
			padding: 10px 10px 11px;
		}
		#header ul li a:hover {
			color: #ffffff;
			font-weight: bold;
			display: block;
			padding: 10px 10px 11px;
			background-color: #282828;
			text-decoration: none;
			border-top: thin #6a6a6a solid;
			border-left: thin #6a6a6a solid;
			border-right: thin #6a6a6a solid;
		}

	#header .ad {
		clear: both;
		padding-left: 500px;
		position: absolute;
		top: 70px;
		border: 0px;
	}
		#header .ad a {
			display: block;
			outline: none;
			width: 468px;
			height: 60px;
		}

	#header h1 {
		clear: both;
		padding-top: 25px;
	}
		#header h1 a {
			display: block;
			text-indent: -9999px;
			background: url(images/logo.gif) no-repeat 0 0;
			outline: none;
			width: 496px; height: 87px;
		}
/** END header **/

#body {
	background: url(images/wrapper.gif) repeat-y 660px 0;
}

/** BEGIN content **/
#content {
	width: 662px;
	float: left;
}
	#content #categories {
		list-style-type: none;
		height: 34px;
	}
		#content #categories li {
			float: left;
			font-size: 0.9em;
			padding-left: 1px;
			background: url(images/divider.gif) no-repeat 0 center;
		}
		#content #categories li.f {
			padding-left: 0;
			background: none;
		}
		#content #categories li a {
			display: block;
			padding: 10px;
		}
		#content #categories li a:hover {

		}
	#content .post {
		clear: both;
		padding: 20px 0 30px;
		border-bottom: 1px solid #D4D3CF;
		margin: 0 20px 0 10px;
	}
		#content .post img {
			border: 1px #282828 dotted;
		}

		#content .post .l {
			float: left;
			width: 220px;
			font-size: 0.8em;
			color: #808080;
		}
			#content .post .l p {
				margin-bottom: 5px;
				padding: 0 10px;
			}
			#content .post .l img {
				margin-bottom: 10px;
				width: 200px; height: auto;
			}
			#content .post .l a {
				color: #808080;
			}
		#content .post .r {
			float: right;
			width: 392px;
			padding-right: 20px;
		}
			#content .post h2 {
				font-size: 2em;
				margin-bottom: 15px;
			}
				#content .post h2 a {

				}
			#content .post p {
				margin-bottom: 15px;
				line-height: 1.5em;
			}
			#content .post .r .details {
				padding: 1px;
				border: 1px #6a6a6a dotted;
				float: right;
			}
			#content .post .r .details p {
				background: url(images/details_bg.gif) repeat-x 0 0;
				font-size: 0.8em;
				font-weight: bold;
				padding: 0 10px;
				margin: 0;
				height: 29px;
			}
				#content .post .r .details p a {
					display: block;
					float: left;
					padding: 7px 0 8px;
					margin-top: 1px;
				}
				#content .post .r .details p a.readmore {
					background: url(images/details_divide.gif) no-repeat right center;
					margin-right: 5px;
					padding-right: 8px;
				}
/** END content **/

/** BEGIN sidebar **/
#sidebar {
	width: 318px;
	float: right;
}
	#sidebar a:hover {
		color: #000000;
}
	#sidebar #subscribe {
		background: url(images/navigation.gif) repeat-x 0 0;
		height: 34px;
		margin: 0 3px 10px 0;
		padding: 10px 0 0 88px;
		font-size: 0.9em;
		color: #6A6A6A;
	}
		#sidebar #subscribe a {
			font-weight: bold;
			color: #6A6A6A;
		}
		#sidebar #subscribe a:hover {
			color: #000000;
		}
	#sidebar #ad125x125 {
		text-align: center;
	}
		#sidebar #ad125x125 img {
			border: 0;
			margin: 5px;
		}
	#sidebar .box {
		background: url(images/horizontal.gif) repeat-x 0 bottom;
		margin-right: 3px;
		padding: 10px 15px;
	}
		#sidebar .box form {
			width: 283px; height: 30px;
			background: url(images/search.gif) no-repeat 0 0;
		}
			#sidebar .box form input {
				border: 1px solid #ffffff;
				margin: 6px;
				float: left;
				width: 207px;
			}
			#sidebar .box form button {
				float: left;
				width: 57px; height: 30px;
				text-indent: -9999px;
				border: 0;
				margin-left: 5px;
				background-color: transparent;
				cursor: pointer;
			}
		#sidebar .box h2 {
			font-size: 0.9em;
			text-transform: uppercase;
		}
		#sidebar .box h2 {
			background-color: #282828;
			color: #ffffff;
			font-size: 0.9em;
			font-weight: bold;
			text-transform: uppercase;
			padding: 10px;
			margin: 0 1px;
		}

		#sidebar .box ul {
			list-style-type: none;
			padding: 0px;
			margin: 0 1px;
		}
			#sidebar .box ul li {
				font-size: 0.9em;
				padding: 5px 0;
				background-color: #ffffff;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}
			#sidebar .box ul li:hover {
				background-color: #D4D3CF;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}

	#sidebar .l {
		width: 159px;
		float: left;
		padding-top: 10px;
	}
		#sidebar .l h2 {
			background-color: #282828;
			color: #ffffff;
			font-size: 0.9em;
			font-weight: bold;
			text-transform: uppercase;
			padding: 10px;
			margin: 0 4px;
		}
		#sidebar .l ul {
			list-style-type: none;
			margin: 0 2px 10px 4px;
		}
			#sidebar .l ul li {
				background-color: #ffffff;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}
			#sidebar .l ul li:hover {
				background-color: #D4D3CF;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}

	#sidebar .r {
		width: 159px;
		float: left;
		padding-top: 10px;
	}
		#sidebar .r h2 {
			background-color: #282828;
			color: #ffffff;
			font-size: 0.9em;
			font-weight: bold;
			text-transform: uppercase;
			padding: 10px;
			margin: 0 8px 0 2px;
		}
		#sidebar .r ul {
			list-style-type: none;
			margin: 0 8px 10px 2px;
		}
			#sidebar .r ul li {
				background-color: #ffffff;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}
			#sidebar .r ul li:hover {
				background-color: #D4D3CF;
				padding: 8px 10px;
				border-width: 0 1px 1px;
				border-style: solid;
				border-color: #D4D3CF;
			}

/** END sidebar **/

/** BEGIN footer **/
#footer {
	background: #282828 url(images/footer.gif) repeat-x 0 0;
	color: #6A6A6A;
	clear: both;
	font-size: 0.8em;
	padding: 30px 0;
}
	#footer div {
		width: 980px;
		margin: auto auto;
		text-align: left;
	}
	#footer p {
		margin-bottom: 10px;
		padding-left: 30px;
	}
	#footer a {
		color: #6A6A6A;
	}
	#footer a:hover {
		color: #ffffff;
	}
/** END footer **/

/** BEGIN misc **/
#postnav {
	padding: 20px;
}
#content .post h3 {
	margin-bottom: 5px;
}
#content .post ul {
	padding-left: 15px;
	margin-bottom: 10px;
}
#content .post ul li {
	padding: 2px 0;
}
#content .post ol {
	padding-left: 20px;
	margin-bottom: 10px;
}
#content .post ol li {
	padding: 2px 0;
}
#content .post blockquote {
	padding-left: 10px;
	border-left: 2px solid #e0e0e0;
	font-style: italic;
	margin-left: 2px;
}
#comments {
	padding: 0 20px 10px 10px;
}
	#comments h2 {
		text-transform: uppercase;
		font-weight: bold;
		font-size: 0.9em;
		padding-top: 25px;
		margin-bottom: 20px;
	}
	#comments p {
		margin-bottom: 10px;
		line-height: 1.5em;
	}
	#comments form p {
		margin-bottom: 5px;
	}
	.commentdetails {
		margin-top: 25px;
	}
	.commentauthor {
		margin-bottom: 5px !important;
		font-weight: bold;
	}
	.commentdate {
		font-size: 0.8em;
		margin-bottom: 5px;
		color: #909090;
	}
	.required {
		color: #ff0000;
	}
.sdetails {
	clear: both;
	font-size: 0.8em;
	padding-top: 20px;
}
	.sdetails p {
		margin-bottom: 5px !important;
		color: #909090;
	}
	.sdetails a {
		color: #909090;
	}
	.sdetails a:hover {
		color: #282828;
	}
/** END misc **/

    This is the Stylesheet for the Theme im using http://vidme.co.cc

  12. Ipstenu
    Half-Elf Support Rogue & Mod
    Posted 3 years ago #

    Plunk the code pardailhan put in his(?) post at below the /** END misc **/

  13. djvibe
    Member
    Posted 3 years ago #

    im having the same problem as esarantopoulos.. I used pardailhan's code and I still have these annoying LI bullets showing up.. any advise.. everything else functions perfect

    see here

    http://sharkenergy.ca/magazine/videos/sandboxs-all-day-everyday-snowboard-video-teaser/

  14. jaymount
    Member
    Posted 3 years ago #

    I have tried all the above and still no love with the SG/Dark theme
    I'm trying with the sociabl.css in my style.css but didn't have any luck changing the sociable.css either. Any other suggestions?

    Looks like there are two threads on the same topic so try some of these fixes: Sociable plugin layout from vertical to horozontal?

    Thanks in Advance!

    /*
Theme Name: SG/Dark
Theme URI: http://theundersigned.net/
Description: Minimalistic two-in-one column theme. Searching and commenting is powered by AJAX made by <a href="http://sevengoslings.net">Seven Goslings</a>, but works as normal if javascript is disabled. Design is made by <a href="http://theundersigned.net">the undersigned</a>. Please report if any bugs is found!
Version: 1.0
Author: The undersigned
Author URI: http://theundersigned.net/

The CSS, XHTML, JS and design is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

/* Overall */

body{
margin:0;
background-color:#444
font-family:Georgia;
}

form {
display:inline;
margin:0;
padding:0;
}

a:link, a:visited {
text-decoration:none;
color:#BFD72F;
}

a:hover {
color:#ADC32A;
}

.content {
position:relative;
width:900px;
left:50%;
margin-left:-450px;
}

/* Top menu */

#menucontainer {
position:relative;
width:100%;
background-image:url(pic/menubg.jpg);
height:0px;
}

#menucontainer ul {
list-style:none;
margin:0;
padding:0;
}

#menucontainer ul li {
# display:block;
position:relative;
float:left;
}

#menucontainer ul li a:link, #menucontainer ul li a:visited {
display:block;
position:relative;
float:left;
padding:50px 30px 20px 30px;
font-size:11px;
line-height:10px;
text-transform:uppercase;
letter-spacing:1px;
color:#BFD72F;
text-decoration:none;
}

#menucontainer ul li a:hover {
background-image:url(pic/menubghover.jpg);
padding:50px 29px 20px 29px;
border-left:1px solid #BFD72F;
border-right:1px solid #BFD72F;
border-bottom:3px solid #BFD72F;
color:#EEE;
}

#menucontainer ul .current_page_item a:link, #menucontainer ul .current_page_item a:visited {
background-image:url(pic/menubghover.jpg);
border-bottom:3px solid #BFD72F;
color:#BFD72F;
}

#menucontainer ul .current_page_item a:hover {
border-left:0;
border-right:0;
padding:50px 30px 20px 30px;
color:#BFD72F;
}

/* Main content */

#maincontainer {
position:relative;
width:100%;
background-color:#444;
}

#postone {
position:relative;
width:380px;
float:left;
margin:20px 0 20px 30px;
}

#posttwo {
position:relative;
width:380px;
float:right;
margin:20px 30px 20px 0;
}

#pagepost {
position:relative;
float:left;
width:500px;
left:50%;
margin:20px 0 20px -250px;
}

#postone img, #posttwo img, #pagepost img {
border-left:3px solid #BFD72F;
display:block;
margin:20px 0 20px 27px;
padding-left:10px;
border-top:0;
border-bottom:0;
border-right:0;
}

#maincontainer h2 {
color:#BFD72F;
text-transform:uppercase;
font-size:18px;
margin:0 0 5px 0;
letter-spacing:5px;
font-weight:normal;
}

#maincontainer .post p {
margin:0 0 20px 0;
}

#maincontainer .post em {
	color:#EEE;
	font-size:12px;
	line-height:20px;
}

#maincontainer .post p, #maincontainer .post ul, #maincontainer .post ol {
color:#EEE;
font-size:12px;
line-height:20px;
}

#maincontainer .post blockquote {
font-style:italic;
border-left:3px solid #BFD72F;
margin-left:27px;
padding-left:10px;
}

#maincontainer .post .postdata {
color:#AAA;
font-size:10px;
font-style:italic;
margin:-10px 0 0 0;
}

#maincontainer .post h1 {
color:#BFD72F;
text-transform:uppercase;
font-size:15px;
margin:0 0 5px 0;
letter-spacing:3px;
font-weight:normal;
}

#maincontainer .post h2 {
color:#BFD72F;
text-transform:uppercase;
font-size:13px;
margin:0 0 5px 0;
letter-spacing:3px;
font-weight:normal;
}

#maincontainer .post h3 {
color:#BFD72F;
text-transform:uppercase;
font-size:11px;
margin:0 0 5px 0;
letter-spacing:3px;
font-weight:normal;
}

/* Comments */

.commentodd {
background-color:#333;
border-left:2px solid #BFD72F;
}

.commentodd, .commenteven {
position:relative;
width: 380px;
}

.commentcontent {
padding:5px 15px 5px 15px;
}

.commentcontent p {
font-size:11px;
line-height:17px;
color:#EEE;
}

.commentcontent .commentinfo {
color:#AAA;
}

.commentcontent blockquote {
font-style:italic;
border-left:3px solid #BFD72F;
margin-left:17px;
padding-left:10px;
}

.commentcontent ul, .commentcontent ol {
margin-left:15px;
}

#comment {
width: 380px;
}

/* Bottom content */

#bottomcontainer {
position:relative;
clear:both;
float:left;
width:100%;
background-image:url(pic/bottombg.jpg);
background-repeat:repeat-x;
background-color:#222;
}

#bottomcontainer .content {
padding-top:40px;
}

#bottomcontainer h2 {
color:#BFD72F;
text-transform:uppercase;
font-size:13px;
margin:0 0 5px 0;
letter-spacing:3px;
font-weight:normal;
}

#bottomcontainer ul {
list-style:none;
margin:0 0 30px 0;
padding:0;
border-bottom:3px solid #BFD72F;
}

#bottomcontainer ul li {
display:block;
position:relative;
font-size:11px;
text-transform:uppercase;
letter-spacing:1px;
line-height:20px;
padding:0 10px 0 10px;
border-bottom:1px solid #666;
color: #EEE;
}

#bottomcontainer ul li a:link, #bottomcontainer ul li a:visited {
color:#EEE;
text-decoration:none;
}

#bottomcontainer ul li a:hover {
color:#BFD72F;
}

#column1 {
position:relative;
float:left;
width:280px;
}

#column1 img {
border:0;
}

#column2 {
position:relative;
float:left;
margin-left:30px;
width:280px;
}

#column3 {
position:relative;
float:right;
width:280px;
}

.bottomsmallright a:link, .bottomsmallright a:visited, .bottomsmallleft a:link, .bottomsmallleft a:visited {
color:#EEE;
}

.bottomsmallright a:hover, .bottomsmallleft a:hover {
color:#ADC32A;
}

.bottomsmallright {
height:25px;
font-size:12px;
text-align:right;
margin-right:20px;
line-height:25px;
padding-bottom:30px;
}

.bottomsmallleft {
height:25px;
font-size:12px;
text-align:left;
margin-left:10px;
line-height:25px;
padding-bottom:30px;
}

.bottomsmallcenter {
height:20px;
font-size:12px;
text-align:center;
line-height:25px;
}

.bottomsmallcenter {
padding-bottom:30px;
}

html>body .bottomsmallcenter {
padding-bottom:35px;
}

#s {
background-color:#333333;
color:#EEEEEE;
border:0;
text-align:center;
height:20px;
}

#ssubmit {
height:20px;
width:60px;
vertical-align:middle;
}

/* Footer */

#footer {
position:relative;
clear:both;
width:100%;
padding:30px 0 5px 0;
height:30px;
background-color:#222;
}

#footer p {
color:#666;
font-size:11px;
line-height:30px;
text-align:center;
margin:0;
}

#footer img {
border:0;
}

#footer a:link, #footer a:visited {
color:#666;
}

#footer a:hover {
color:#666;
text-decoration:underline;
}

#postone input {
width:380px;
}

#postone #mailsubmit {
width:100px;
}

#postone textarea {
width:380px;
height:100px;
}

/* Sociable */

div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	# display: block;
	top: -5em;
	background: #ffe;
	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 ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
	display: inline;
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

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

/* End sociable */

  15. srikat
    Member
    Posted 3 years ago #

    Thanks Ipstenu. Adding the following to my theme's stylesheet fixed it.

    .sociable li { display:inline; }

  16. LwEEs
    Member
    Posted 3 years ago #

    In my case, the following line was;

    .sociable li { display:inline !Important; }

    After removing the exclamation point and the word "Important everything worked fine.

    .sociable li { display:inline; }

    Hopefully this helps some of you.

    Thanks,

    Luis

  17. timwarren
    Member
    Posted 3 years ago #

    That changed it from vertical to horizontal, but they still have titles instead of icons.

    Any ideas on how to get the icons back?

    P.S. In another theme with the same exact settings, it still displays the icons horizontally with no change to the code.

  18. thecoveted
    Member
    Posted 3 years ago #

    well, pasting the code at the bottom of the theme's style.css totally worked. thank you so much, because i really love the plugin.
    :)

  19. seaneee
    Member
    Posted 3 years ago #

    Not having problems with vertical vs. Horizontal, but still cannot get rid of the bullets between icons. Any suggestions.

    Code below:

    /* Sociable
--------------------------- */
div.sociable { margin: 16px 0; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
	position: absolute;
	display: block;
	top: -5em;
	background: #ffe;
	border: 1px solid #ccc;
	color: black;
	line-height: 1.25em;
}
.sociable span {
	display: block;
}
.sociable ul {
	display: inline;
	margin: 0;
	list-style: none;
        padding: 0;
}
.sociable ul li {
	background: none;
	display: inline;
	list-style: none;
	margin: 0;
	padding: 1px;
}
.sociable img {
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

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

    Not using sociable CSS, this is added to my theme's stylesheet.

    Page in question:

    cyclezine.net

  20. cynics
    Member
    Posted 3 years ago #

    what i did was to change this line:

    .sociable img {
	float: left; <-- change to LEFT
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0 3px 0 0; <-- changed to 0 3px 0 0 to include some space
	padding: 0;
}

    to get it into a horizontal line.

  21. seaneee
    Member
    Posted 3 years ago #

    I'm set with the horizontal line, I just want to get rid of the bullets.

  22. seaneee
    Member
    Posted 3 years ago #

    found the issue. It was a background image in my theme that was adding the bullet. Thanks to Pat Diven for the help.

  23. davidedw
    Member
    Posted 3 years ago #

    I found that sociable is using a class=sociable in the div, and my id CSS was overwriting it (which has the bullet in my #content defs).

    So I changed the class=sociable in sociable.php to a id=sociable and put the set of #sociable settings in my style.css...

    #sociable span {
	# display: block;
}
#sociable ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#sociable ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
#sociable ul li:before { content: ""; }
#sociable img {
	display: inline;
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

  24. Joost de Valk
    Member
    Posted 3 years ago #

    That's a rather odd way around it, as you'd have to change the plugin each time. I'd suggest doing #content .sociable or something to that extend, that would work just as well. The issue you have is called CSS Specificity, which you can find more about here:

    http://www.htmldog.com/guides/cssadvanced/specificity/

  25. davidedw
    Member
    Posted 2 years ago #

    Yes, that did it. I wasn't aware of the specificity. Learn something new every day.

    So, I'm back to the vanilla Sociable with the following CSS:

    #content .sociable span {
	# display: block;
}
#content .sociable ul {
	display: inline;
	margin: 0;
	padding: 0;
}
#content .sociable ul li {
	background: none;
	display: inline;
	list-style-type: none;
	margin: 0;
	padding: 1px;
}
#content .sociable ul li:before { content: ""; }
#content .sociable img {
	display: inline;
	float: none;
	width: 16px;
	height: 16px;
	border: 0;
	margin: 0;
	padding: 0;
}

  26. ClayFranklin
    Member
    Posted 2 years ago #

    I am having the same problem.
    Everything was just fine until I updated the plug in tonight.
    Then it went vertical and with bullets in Firefox. still looks ok in Safari.

    Seems to me to be a bug in the update, rather than a bug in all the users that did the update.

    I deactivated the plug in. Not sure if to reactivate and do the fixes above or just use another plug in that does not require time and frustration just from doing a update.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags