a problem with floating social bars

[drake]

I don't know - now your post look just fine in Chrome... Can be a result of usage of too many sharing plugins - digdig, shareaholic... another one that appear when hover over a picture from post... All of these try to use in their ways the og tags... Also you have some minify/move javascripts utility - Booster but also W3TC plugin... Here is almost impossibile to not appear conflicts, a script minified by one utility, then by other probabbly will be break in some point...

[tobi1kanoby]

Thanks Drake
I could not sort out DigDig, and switched back to sharebar which worked fine.
although I like DidDig better I can live with it for now, till I learn what the issues are.

I have tried disabling CSS JS Booster but I have one issue that it's taken care of I don't know how to sort out otherwise:
I have inserted a JS to an Ad Hoc widget and inserted it to a post:
http://makemoneyim.com/ultimate-backlink-finder/

The problem is, it messes with the theme when I remove the js booster.
Is there any other way I can include such a script in a post/page?

Additionally, while we're on the subject, I have a style issue on that script that I suspect comes from the theme.

there's a 6px space and dots on the widget that I cannot get rid of. I've checked it out and it says:

.entry td, .comment-body td {
border-bottom: 1px dotted #CCCCCC;
padding: 6px;
}


I have tried changing this on the custom style form but no actual changes were made.
Any ideas?

Thanks alot for your time and help
Tobi

[drake]

The right way is to find real valuabile backlinks ))

For td things try to use !important directive if simple definitions don't have effect. So, add at the BOTTOM of Custom Styles:

Code: Select all

.entry td, .comment-body td {
border-bottom: none !important;
padding: 0 !important;
}

[sayontan]

I would recommend using higher specificity over !important. Try to follow this as a rule of thumb:

1. Use "!important" ONLY if you want to override an inline style. What is an inline style? It is something of this sort:
   

   Code: Select all

   <div id='pqr' class='xyz' style='text-align: center; width: 80%;'>abcd</div>

   
   In the above, your div has an id 'pqr', class 'xyz' and an inline style that centres the text and sets the width to 80%. If you want to change the CSS definition here, it wouldn't matter if you are using #pqr or .xyz: they will not take effect because you have an inline style. In such a case you must use !important in your stylesheet:
   

   Code: Select all

   .xyz { width: 100% !important; }

   
   
2. Use specificity for all other situations. E.g. consider the following:
   

   Code: Select all

   <div id='ad-hoc-1>
    <div class='suf-widget .textwidget'>
        abcd
    </div>
</div>

   
   Let's say you have this CSS definition in style.css:
   

   Code: Select all

   .suf-widget { background-color: #fff; }

   
   What will be the color of your widget? It will be #fff. Now assume that there is a plugin that is defining this style, after your theme's style.css has been loaded:
   

   Code: Select all

   .textwidget { background-color: #fff; }

   
   Now let's say you want to change the color to "#eee", so you edit the above CSS in style.css:
   

   Code: Select all

   .suf-widget { background-color: #eee; }

   
   This change will not take effect, because your plugin is loading the ".textwidget" definition after your style.css. So you can use the !important override:
   

   Code: Select all

   .suf-widget { background-color: #eee !important; }

   
   Since both, ".suf-widget" and ".textwidget" have the same specificity (both address the element at a class level), the !important override takes precedence and your colour becomes #eee. However, let's say another plugin puts this in before style.css:
   

   Code: Select all

   #ad-hoc-1 .suf-widget { background-color: #ccc; }

   
   It doesn't matter that you have !important, or that this plugin loads before everything else: the fact that "#ad-hoc-1 .suf-widget" is more specific than .suf-widget or .textwidget kicks in, and that definition will override everything else. Your colour will be set to #ccc.
3. So basically, user !important to countermand an inline style, or to override a later definition using the same specificity. Otherwise use higher specificity.

[tobi1kanoby]

Thank You Drake and Sayontan
Let me make sure I get it fully

If I were to customize the properties on the Ad Hoc 5 widget, that I currently use on this page:
http://makemoneyim.com/ultimate-backlink-finder
and would like to change these parameters:


.entry td, {
border-bottom: 0px dotted #CCCCCC;
padding: 0px;
}

I'd change it to:

#ad-hoc-5 .entry td, {
border-bottom: 0px dotted #CCCCCC;
padding: 0px;
}

am I right?


Would you recommend a different method to add this JS into the posts/pages without messing up the theme?

Thanks Very much
Tobi

[sayontan]

You need "#ad-hoc-5 td" (no comma after td, no .entry), because .entry is not within #ad-hoc-5.

[tobi1kanoby]

Thanks Sayontan
I have tried that method, but for some reason there's no change in the appearance:
http://makemoneyim.com/ultimate-backlink-finder/
I had other issues with trying to center the sidebar and widget below the header titles, I've followed some tutorials shared on the forum but no changes seem to take place on the site?
Do you think that might be a cache issue? I'm using W3 Cache.
Thanks for your help
Tobi

[sayontan]

From what I can see on your page source code:

Code: Select all

#ad-hoc-5 entry td {
border-bottom: 0px dotted #CCCCCC;
padding: 0px;
}

Two problems with this:

1. It should be ".entry", not "entry"
2. Even with ".entry" this is incorrect. See my code in my previous post.

[tobi1kanoby]

Thank You
You've really helped me out understanding customization of your theme