http://wordpress.org/support/ WordPress › Support Topic: [Plugin: Sociable] want icons in horizontal line rather than vertical list en Tue, 24 Nov 2009 07:39:12 +0000 http://wordpress.org/support/topic/269511#post-1271867 Fri, 06 Nov 2009 05:03:12 +0000 worldview 1271867@http://wordpress.org/support/ <p>Yes kingleo1 code for Social 352 works on wp285 with thesis 1.6. Just paste code into the custom.css </p> http://wordpress.org/support/topic/269511#post-1259255 Mon, 26 Oct 2009 10:36:54 +0000 alatiel 1259255@http://wordpress.org/support/ <p>The kingleo1 code works fine :)</p> <p>just add it at the end of your normal css </p> http://wordpress.org/support/topic/269511#post-1258142 Sun, 25 Oct 2009 01:34:59 +0000 cmiwebstudio 1258142@http://wordpress.org/support/ <p>didnt fix anything for me </p> http://wordpress.org/support/topic/269511#post-1257402 Sat, 24 Oct 2009 06:27:40 +0000 wildx22 1257402@http://wordpress.org/support/ <p>For some reason my icons were displayed horizontally until the most recent upgrade.</p> <p>Well all I had to do to fix it was:</p> <pre><code>#content .sociable li {display:inline;} #content .sociable ul {padding:0;margin:0;}</code></pre> http://wordpress.org/support/topic/269511#post-1253544 Wed, 21 Oct 2009 05:24:18 +0000 cmiwebstudio 1253544@http://wordpress.org/support/ <p>having similar problem </p> http://wordpress.org/support/topic/269511#post-1228429 Tue, 29 Sep 2009 02:01:53 +0000 viperousmango 1228429@http://wordpress.org/support/ <p>Hey guys,</p> <p>I've tried both fixes and they didn't work. I'm using v3.4.4 and they still show up vertically rather than horizontally, I am using a different template than default this is my style.css :: </p> <blockquote><p>/*<br /> Theme Name: TAKTEEK01<br /> Version: 1.4.4<br /> Description: TAKTEEK01 is a dark-colored theme that features plain text as the main banner. The text can easily be changed in the theme options. You also have the option to use an image as the main banner or both.<br /> Author: Eric Crooks<br /> Author URI: <a href="http://www.ericcrooks.com/" rel="nofollow">http://www.ericcrooks.com/</a><br /> Tags: black, orange, white, dark, three-columns, left-sidebar, right-sidebar, fixed-width, custom-header, theme-options<br /> */</p> <p>/* -standards- */</p> <p>* {<br /> margin: 0 auto;<br /> }<br /> body {<br /> background: #000000;<br /> color: #ffffff;<br /> font-family: "Arial";<br /> font-size: .75em;<br /> }<br /> a {<br /> color: #ffffff;<br /> text-decoration: none;<br /> }<br /> cite {<br /> font-style: normal;<br /> }<br /> cite a {<br /> color: #ffa20f;<br /> font-style: normal;<br /> }<br /> code {<br /> font-size: 1.1em;<br /> line-height: 1.3em;<br /> }<br /> h1 {<br /> font-size: 2em;<br /> font-weight: normal;<br /> }<br /> h2 {<br /> font-size: 1.5em;<br /> font-weight: normal;<br /> }<br /> p {<br /> line-height: 1.5em;<br /> margin: 1.2em auto;<br /> text-align: left;<br /> }<br /> pre {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> font-size: 1.1em;<br /> line-height: 1.3em;<br /> margin: 1.2em auto;<br /> overflow: auto;<br /> padding: 10px;<br /> width: 488px;<br /> }<br /> input, textarea {<br /> font-family: "Arial";<br /> font-size: 1em;<br /> }</p> <p>/* -header- */</p> <p>#banner {<br /> padding: 20px 0 20px 0;<br /> height: 200px;<br /> text-align: center;<br /> width: 888px;<br /> }<br /> #banner img {<br /> max-width: 928px;<br /> }<br /> #topbar {<br /> background: #181818;<br /> color: #ffffff;<br /> padding: 10px;<br /> width: 908px;<br /> }<br /> #topbar a {<br /> color: #ffa20f;<br /> }</p> <p>/* -content- */</p> <p>#content {<br /> float: left;<br /> margin: 0 20px 0 20px;<br /> width: 528px;<br /> }<br /> #contentwrap {<br /> border-top: 1px solid #181818;<br /> display: block;<br /> padding-top: 20px;<br /> width: 928px;<br /> }</p> <p>/* -post and entries- */</p> <p>.post {<br /> background: #181818;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> }<br /> .post a {<br /> color: #ffa20f;<br /> text-decoration: none;<br /> }<br /> .post a:hover {<br /> color: #ffffff;<br /> text-decoration: none;<br /> }<br /> .post blockquote {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> margin: 1.2em auto;<br /> padding: 0 1.2em 0 1.2em;<br /> }<br /> .post img, .post object {<br /> border: 4px solid #303030;<br /> }<br /> .post embed, .post img, .post object {<br /> display: block;<br /> margin: 1.2em auto;<br /> max-width: 500px;<br /> }<br /> .post embed.alignleft, .post img.alignleft, .post object.alignleft {<br /> margin: 0 10px 10px 0;<br /> }<br /> .post embed.alignright, .post img.alignright, .post object.alignright{<br /> margin: 0 0 10px 10px;<br /> }<br /> .post h2, .post h2 a {<br /> color: #ffa20f;<br /> }<br /> .post h2 a:hover {<br /> color: #ffffff;<br /> }<br /> .post table {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> border-collapse: collapse;<br /> line-height: 1.5em;<br /> margin: 1.2em auto;<br /> width: 100%;<br /> }<br /> .post th, .post td {<br /> border: 1px solid #303030;<br /> padding: 5px;<br /> }<br /> .post ul, .post ol {<br /> line-height: 1.5em;<br /> }<br /> .post .wp-smiley {<br /> border: none;<br /> display: inline;<br /> margin: 0;<br /> }<br /> .postmetadata-top {<br /> border-bottom: 1px dotted #404040;<br /> padding-bottom: 20px;<br /> text-transform: uppercase;<br /> }<br /> .postmetadata-bottom {<br /> text-transform: uppercase;<br /> }<br /> .backtotop {<br /> margin: 1.2em auto;<br /> text-align: center;<br /> }</p> <p>/* -sidebar- */</p> <p>#sidebar1wrap,<br /> #sidebar2wrap {<br /> background: #181818;<br /> float: left;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> width: 160px;<br /> }<br /> #sidebar1 a, #sidebar1 li.recentcomments, #sidebar1 .textwidget,<br /> #sidebar2 a, #sidebar2 li.recentcomments, #sidebar2 .textwidget {<br /> border-bottom: 1px dotted #252525;<br /> color: #ffffff;<br /> display: block;<br /> padding: 3px 3px 3px 10px;<br /> }<br /> #sidebar1 a:hover,<br /> #sidebar2 a:hover {<br /> background: #ffa20f;<br /> color: #000000;<br /> }<br /> #sidebar1 h2,<br /> #sidebar2 h2 {<br /> color: #ffffff;<br /> }<br /> #sidebar1 h2.small,<br /> #sidebar2 h2.small {<br /> border-bottom: 1px dotted #404040;<br /> color: #ffa20f;<br /> font-size: 1em;<br /> font-weight: bold;<br /> margin-top: 20px;<br /> text-transform: none;<br /> }<br /> #sidebar1 li,<br /> #sidebar2 li {<br /> list-style: none;<br /> margin-top: 3px;<br /> }<br /> #sidebar1 li:hover small,<br /> #sidebar2 li:hover small {<br /> color: #000000;<br /> }<br /> #sidebar1 li.recentcomments:hover,<br /> #sidebar2 li.recentcomments:hover {<br /> background: #ffa20f;<br /> color: #000000;<br /> }<br /> #sidebar1 li.recentcomments:hover a,<br /> #sidebar2 li.recentcomments:hover a {<br /> color: #000000;<br /> }<br /> #sidebar1 li.recentcomments a,<br /> #sidebar2 li.recentcomments a {<br /> border: none;<br /> }<br /> #sidebar1 li.widget_categories ul li,<br /> #sidebar2 li.widget_categories ul li {<br /> border-bottom: 1px dotted #252525;<br /> display: block;<br /> padding: 3px 3px 3px 10px;<br /> }<br /> #sidebar1 li.widget_categories ul li a,<br /> #sidebar2 li.widget_categories ul li a {<br /> border-bottom: none;<br /> display: inline;<br /> padding: 0;<br /> }<br /> #sidebar1 li.widget_categories ul li:hover, #sidebar1 li.widget_categories ul li:hover a,<br /> #sidebar2 li.widget_categories ul li:hover, #sidebar2 li.widget_categories ul li:hover a {<br /> background: #ffa20f;<br /> color: #000000;<br /> }<br /> #sidebar1 select,<br /> #sidebar2 select {<br /> margin: 3px 0 3px 0;<br /> width: 100%;<br /> }<br /> #sidebar1 small,<br /> #sidebar2 small {<br /> color: #ffa20f;<br /> text-transform: uppercase;<br /> }<br /> #sidebar1 .textwidget,<br /> #sidebar2 .textwidget {<br /> padding: 3px 0 3px 0;<br /> }<br /> #sidebar1 .textwidget img,<br /> #sidebar1 .textwidget img {<br /> display: block;<br /> }<br /> #sidebar1 .textwidget a,<br /> #sidebar2 .textwidget a {<br /> display: inline;<br /> }<br /> #sidebar1 ul,<br /> #sidebar2 ul {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> #sidebar1 ul.children a, #sidebar1 li.page_item ul li.page_item a,<br /> #sidebar2 ul.children a, #sidebar2 li.page_item ul li.page_item a {<br /> padding-left: 20px;<br /> }<br /> #sidebar1 ul.children ul.children a, #sidebar1 li.page_item ul li.page_item ul li.page_item a,<br /> #sidebar2 ul.children ul.children a, #sidebar2 li.page_item ul li.page_item ul li.page_item a {<br /> padding-left: 30px;<br /> }<br /> #sidebar1 ul.children ul.children ul.children a, #sidebar1 li.page_item ul li.page_item ul li.page_item ul li.page_item a,<br /> #sidebar2 ul.children ul.children ul.children a, #sidebar2 li.page_item ul li.page_item ul li.page_item ul li.page_item a {<br /> padding-left: 40px;<br /> }<br /> #sidebar1 .widget_text a, #sidebar1 .widget_text a img,<br /> #sidebar2 .widget_text a, #sidebar2 .widget_text a img {<br /> border: none;<br /> padding: 0;<br /> }<br /> #sidebar1 .widget_tag_cloud,<br /> #sidebar2 .widget_tag_cloud {<br /> border-bottom: 1px dotted #252525;<br /> margin-bottom: 10px;<br /> padding-bottom: 3px;<br /> }<br /> #sidebar1 .widget_tag_cloud a,<br /> #sidebar2 .widget_tag_cloud a {<br /> border: none;<br /> display: inline;<br /> padding: 0 3px 0 3px;<br /> }<br /> #sidebar1 .widget_tag_cloud h2,<br /> #sidebar2 .widget_tag_cloud h2 {<br /> margin-bottom: 10px;<br /> }<br /> #sidebar1 .widget_rss h2.small a,<br /> #sidebar2 .widget_rss h2.small a {<br /> border: none;<br /> display: inline;<br /> color: #ffffff;<br /> padding: 0 0 3px 0;<br /> }<br /> #sidebar1 .widget_rss h2.small a:hover,<br /> #sidebar2 .widget_rss h2.small a:hover {<br /> background: none;<br /> }<br /> #sidebar1 .widget_rss h2.small a img,<br /> #sidebar2 .widget_rss h2.small a img {<br /> display: none;<br /> }<br /> #sidebar1 .widget_rss ul li,<br /> #sidebar2 .widget_rss ul li {<br /> border-bottom: 1px dotted #252525;<br /> display: block;<br /> }<br /> #sidebar1 .widget_rss ul li a.rsswidget,<br /> #sidebar2 .widget_rss ul li a.rsswidget {<br /> border: none;<br /> display: block;<br /> padding: 3px 3px 3px 10px;<br /> }<br /> #sidebar1 .widget_rss ul li cite,<br /> #sidebar2 .widget_rss ul li cite {<br /> color: #ff9000;<br /> font-size: .75em;<br /> text-transform: uppercase;<br /> padding-bottom: 3px;<br /> }<br /> #sidebar1 .widget_rss ul li .rss-date,<br /> #sidebar2 .widget_rss ul li .rss-date {<br /> color: #ff9000;<br /> display: block;<br /> font-size: .75em;<br /> text-transform: uppercase;<br /> }<br /> #sidebar1 .widget_rss ul li .rssSummary,<br /> #sidebar2 .widget_rss ul li .rssSummary {<br /> padding-bottom: 3px;<br /> }</p> <p>/* -sidebar calendar- */</p> <p>#sidebar1 .widget_calendar h2,<br /> #sidebar2 .widget_calendar h2 {<br /> display: none;<br /> }<br /> #sidebar1 .widget_calendar caption,<br /> #sidebar2 .widget_calendar caption {<br /> border-bottom: 1px dotted #404040;<br /> color: #ffa20f;<br /> font-size: 1em;<br /> font-weight: bold;<br /> margin-top: 20px;<br /> text-align: left;<br /> text-transform: none;<br /> }<br /> #sidebar1 .widget_calendar table,<br /> #sidebar2 .widget_calendar table {<br /> border-bottom: 1px dotted #252525;<br /> width: 100%;<br /> }<br /> #sidebar1 .widget_calendar table a,<br /> #sidebar2 .widget_calendar table a {<br /> background: #252525;<br /> border: none;<br /> color: #ffffff;<br /> display: block;<br /> padding: 3px;<br /> }<br /> #sidebar1 .widget_calendar table a:hover,<br /> #sidebar2 .widget_calendar table a:hover {<br /> background: #ffa20f;<br /> color: #000000;<br /> }<br /> #sidebar1 .widget_calendar table td,<br /> #sidebar2 .widget_calendar table td {<br /> color: #252525;<br /> text-align: center;<br /> }<br /> #sidebar1 .widget_calendar table th,<br /> #sidebar2 .widget_calendar table th {<br /> color: #ffffff;<br /> text-align: center;<br /> }</p> <p>/* -comments- */</p> <p>#comments, #respond {<br /> background: #181818;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> width: 508px;<br /> }<br /> #commentpages {<br /> margin-bottom: 20px;<br /> }<br /> ul#commentlist {<br /> list-style: none;<br /> padding: 0;<br /> }<br /> ul#commentlist li.comment {<br /> border-top: 1px dotted #404040;<br /> padding: 20px 0 20px 0;<br /> }<br /> ul#commentlist ul.children {<br /> list-style: none;<br /> padding: 0 0 0 20px;<br /> }<br /> ul#commentlist ul.children li {<br /> border-top: 1px dotted #404040;<br /> margin: 10px 0 0 0;<br /> padding: 10px 0 0 0;<br /> }<br /> ul#commentlist li blockquote {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> margin: 1.2em auto;<br /> padding: 0 1.2em 0 1.2em;<br /> }<br /> ul#commentlist a {<br /> color: #ffa20f;<br /> }<br /> h2.comments {<br /> background: #181818;<br /> color: #ffa20f;<br /> display: block;<br /> margin-bottom: 20px;<br /> }<br /> h2.respond {<br /> background: #181818;<br /> color: #ffa20f;<br /> display: block;<br /> margin-bottom: 20px;<br /> }<br /> h2.commentpages {<br /> background: #181818;<br /> color: #ffa20f;<br /> display: block;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> }<br /> small a.comment-edit-link {<br /> color: #ffa20f;<br /> text-transform: uppercase;<br /> }<br /> #commentlist div .avatar {<br /> border: 4px solid #303030;<br /> float: left;<br /> margin: 0 10px 10px 0;<br /> }<br /> .vcard .fn, .vcard .says {<br /> font-weight: bold;<br /> }<br /> .comment-meta {<br /> font-size: .8em;<br /> margin-bottom: 40px;<br /> text-transform: uppercase;<br /> }<br /> .comment-meta a {<br /> color: #ffffff;<br /> }<br /> .comment-meta a.comment-edit-link {<br /> color: #ffa20f;<br /> }<br /> .reply {<br /> margin-top: 20px;<br /> text-align: left;<br /> }<br /> li.depth-1 #respond {<br /> margin: 0 0 -20px -10px;<br /> }<br /> li.depth-2 #respond {<br /> margin: 0 0 -20px -30px;<br /> }<br /> li.depth-3 #respond {<br /> margin: 0 0 -20px -50px;<br /> }<br /> li.depth-4 #respond {<br /> margin: 0 0 -20px -70px;<br /> }<br /> li.depth-5 #respond {<br /> margin: 0 0 -20px -90px;<br /> }<br /> #commentform {<br /> width: 508px;<br /> }<br /> #commentform a {<br /> color: #ffa20f;<br /> }<br /> #commentform input, #commentform textarea {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> color: #ffffff;<br /> padding: 3px;<br /> }<br /> #commentform #commentbox {<br /> height: 100px;<br /> width: 500px;<br /> }<br /> #commentform #submit {<br /> color: #ffffff;<br /> margin-top: 20px;<br /> }<br /> #commentform small {<br /> text-transform: normal;<br /> }<br /> .commentlinks a {<br /> color: #ffffff;<br /> padding: 5px 10px 5px 10px;<br /> }<br /> .commentlinks a:hover {<br /> background: #ffa20f;<br /> color: #000000;<br /> }<br /> .commentlinks .current {<br /> background: #ffa20f;<br /> color: #000000;<br /> padding: 5px 10px 5px 10px;<br /> }<br /> .nocomments {<br /> background: #181818;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> }</p> <p>/* -search form- */</p> <p>#s {<br /> background: #252525;<br /> border: 1px solid #303030;<br /> color: #ffffff;<br /> padding: 3px;<br /> width: 152px;<br /> }<br /> #searchsubmit {<br /> display: none;<br /> }</p> <p>/* -footer- */</p> <p>#footer {<br /> background: #181818;<br /> clear: both;<br /> color: #ffffff;<br /> padding: 10px;<br /> text-align: right;<br /> width: 908px;<br /> }<br /> #footer small {<br /> text-transform: uppercase;<br /> }</p> <p>/* -misc and universal- */</p> <p>#navlink, #postlink {<br /> background: #181818;<br /> color: #ffffff;<br /> margin-bottom: 20px;<br /> padding: 10px;<br /> text-align: center;<br /> }<br /> #navlink a, #postlink a {<br /> color: #ffa20f;<br /> }<br /> #navlink a:hover, #postlink a:hover {<br /> color: #ffffff;<br /> }<br /> .uppercase {<br /> text-transform: uppercase;<br /> }<br /> .wp-smiley {<br /> border: none;<br /> display: inline;<br /> margin: 0;<br /> }</p> <p>/* -floats - */</p> <p>.aligncenter, div.aligncenter {<br /> display: block;<br /> margin-left: auto;<br /> margin-right: auto;<br /> }<br /> .alignleft {<br /> float: left;<br /> }<br /> .alignright {<br /> float: right;<br /> } </p></blockquote> <p>Sorry guys, I'm not good at CSS and am lost as to what to modifiy. Would it be the style.css of the template, or the style.css of the plugin?</p> <p>Thanks so much for the help! </p> http://wordpress.org/support/topic/269511#post-1223806 Thu, 24 Sep 2009 21:39:50 +0000 singh441 1223806@http://wordpress.org/support/ <p>hey thanx micka it worked for me :) </p> http://wordpress.org/support/topic/269511#post-1211202 Mon, 14 Sep 2009 14:47:54 +0000 billydec 1211202@http://wordpress.org/support/ <p>@painteddigital :: that worked for me. I tried a couple other fixes - no dice... then found yours which did the trick. Thanks. </p> http://wordpress.org/support/topic/269511#post-1210833 Mon, 14 Sep 2009 04:48:41 +0000 painteddigital 1210833@http://wordpress.org/support/ <p>I'm using 3.4.4 and to fix it I had to add<br /> <pre><code>display: inline</code></pre> <p>to<br /> <pre><code>.sociable img</code></pre> <p>...then it displayed inline like it should. Hope that helps someone! </p> http://wordpress.org/support/topic/269511#post-1162370 Tue, 04 Aug 2009 10:30:16 +0000 Erunafailaro 1162370@http://wordpress.org/support/ <p>My problem is, that the icons stack vertically in the feed only. They line up correctly horizontal on the blog.</p> <p>How can I fix that in my feed without modifying the PHP in the plugin-file? </p> http://wordpress.org/support/topic/269511#post-1148992 Thu, 23 Jul 2009 19:26:59 +0000 sherrascott 1148992@http://wordpress.org/support/ <p>Never mind. Updating to version 3.4.3 fixed the issue! </p> http://wordpress.org/support/topic/269511#post-1148991 Thu, 23 Jul 2009 19:26:00 +0000 sherrascott 1148991@http://wordpress.org/support/ <p>I did what MickA suggested and it worked - for a while. Then I switched themes and now it's back to being vertical again (I checked the sociable.css and it hasn't changed). I'm using version 3.4.1 if it makes a difference. </p> http://wordpress.org/support/topic/269511#post-1146286 Tue, 21 Jul 2009 16:20:19 +0000 frugally4u 1146286@http://wordpress.org/support/ <p>All I did after trying to go through all of these steps was....<br /> Go to the plugin in your dashboard --&gt; click Sociable Options --&gt; then make sure that the box beside "Use the sociable stylesheet?" is checked... worked! </p> <p>The only problem was... the colors were more dim - so now I need to go in &amp; tweek those somehow in the stylesheet ;) </p> <p>You can see it working here: <a href="http://www.aStorybookLife.com" rel="nofollow">http://www.aStorybookLife.com</a> </p> http://wordpress.org/support/topic/269511#post-1124958 Fri, 03 Jul 2009 16:29:13 +0000 MickA 1124958@http://wordpress.org/support/ <p>Okay<br /> All you have to do is add a float.</p> <p>CHANGE THIS<br /> .sociable ul li {<br /> background: none;<br /> display: inline !important;<br /> list-style-type: none;<br /> margin: 0;<br /> padding: 1px;<br /> }</p> <p>TO THIS<br /> .sociable ul li {<br /> background: none;<br /> float:left; /* IE FIX */<br /> display: inline !important;<br /> list-style-type: none;<br /> margin: 0;<br /> padding: 1px;<br /> }</p> <p>Works for me.... </p> http://wordpress.org/support/topic/269511#post-1116322 Thu, 25 Jun 2009 16:11:22 +0000 kingleo1 1116322@http://wordpress.org/support/ <p>ok guys, that's exactly the problem i'm having right now.. but from ur replies, i kinda understand what's wrong, but i can't code the correction.. i mean from what i understood, it seems that 2 variables are targeting the same css entry.. and to correct that i need to give priority to the one i want displayed in the browser.. but i can't start to figure out what changes to my code should i do.. u see i'm new to css..</p> <p>i've added the sociable.css code to the bottom of my theme's style.css..<br /> the code is..<br /> <pre><code>/* -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 !important; list-style-type: none; margin: 0; padding: 1px; } .sociable ul li:before { content: &quot;&quot;; } .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); }</code></pre> <p>what should i change in the code to make the sociable icons appear vertically in 1 line instead of appearing horizontally each in a line by it's own?</p> <p>thanks in advance :) </p> http://wordpress.org/support/topic/269511#post-1109215 Thu, 18 Jun 2009 23:31:03 +0000 blondishnet 1109215@http://wordpress.org/support/ <p>Joost is correct. All you have to do is make sure you insert the division layer ID in front of your css of sociable to specify. You are putting your sociable within your content area or #content.</p> <p>Thanks Joost. I solved this before reading this, but I wanted to search the WP forums if anyone was having this issue. </p> http://wordpress.org/support/topic/269511#post-1087843 Sun, 31 May 2009 10:30:35 +0000 joostdevalk 1087843@http://wordpress.org/support/ <p>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:</p> <p><a href="http://www.htmldog.com/guides/cssadvanced/specificity/">http://www.htmldog.com/guides/cssadvanced/specificity/</a> </p> http://wordpress.org/support/topic/269511#post-1087809 Sun, 31 May 2009 08:46:04 +0000 davidedw 1087809@http://wordpress.org/support/ <p>I found that sociable is using a class=sociable in the div, and my id CSS was overwriting it. So I changed the class=sociable in sociable.php to a id=sociable and put the set of #sociable settings in my style.css...</p> <pre><code>#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: &quot;&quot;; } #sociable img { display: inline; float: none; width: 16px; height: 16px; border: 0; margin: 0; padding: 0; }</code></pre> http://wordpress.org/support/topic/269511#post-1087270 Sat, 30 May 2009 14:17:57 +0000 rcaeiro 1087270@http://wordpress.org/support/ <p>I think this is a compatibility issue with some code on the themes. I'm having vertical layout on some themes and horizontal in others... did you manage to solve it? </p> http://wordpress.org/support/topic/269511#post-1070379 Mon, 11 May 2009 00:19:08 +0000 AnnySavvant 1070379@http://wordpress.org/support/ <p>In the previous version of Sociable, the icon list on the front page was a single line, horizontal series of icons. In the 3.1.1 version I just installed, it appears as a vertical list. How can I make it back into a single horizontal line with all the icons on it?<br /> Thanks,<br /> Anny </p>