Log in

View Full Version : Basic HTML CSS - Customize AddThis Button


Mikee
08-17-2010, 10:23 PM
Hi!

I am looking to insert an AddThis.com button to my website, but it doesn't work well.

I have this part at the right-top of my website (sort of ''Bookmark Us'' link) :


<body>
<div id="main">
<div id="top">
<div style="float:right"> <span style="display:block; padding-top:30px">(Instead of ''Bookmark Us'' text, I would like the AddThis.com button placed HERE!)</span> </div>

I found this also into the Layout.css maybe will help:


}

img{border:none}

#main{float:left; width:100%}
#top_bookmark{ margin-left:auto; margin-right:auto; width:750px; padding-bottom:5px; text-align:right; padding-right:30px;}
#top{width:780px; margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto; padding-top:0; height:97px}
.clear{ clear:both}

And this is the AddThis standard button:


<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c6afe321fabff8c" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c6afe321fabff8c"></script>
<!-- AddThis Button END -->

Thank you,

Mike.
Beverleyh
08-18-2010, 08:01 AM
You havent actually said what's wrong - only "it doesn't work well".

What do you want to fix exactly? What is it about the current setup that doesnt do what you want? What do you want it to do instead?

Also provide a link to your website.
Mikee
08-18-2010, 08:27 AM
Still working on the website on my pc, is a free template I found on the web.

The original layout is this:

http://www.mojoimage.com/free-image-hosting-view-06.php?id=4409test1.jpg

and here i replace the ''Easily Updatable Website for $100'' with the AddThis code:

http://www.mojoimage.com/free-image-hosting-view-06.php?id=1149test2.jpg

With this ''crappy'' result:

http://www.mojoimage.com/free-image-hosting-view-06.php?id=319test3.jpg

Thanks.
Beverleyh
08-18-2010, 01:07 PM
Put a height on the span to increase the space for the icons.

And/or, remove the padding and add a top-margin and bottom-margin instead.