Hi,

 

Has anyone used the addthis.com welcome bar? as I need some help.

 

I have put it on my site, but at the moment when it appears it pushes the rest of my site down. What i really want is for it to appear above the other divs or move the background down with it (which I don't think is possible).

 

I have tried putting the code for it in a div and giving a a z-index, however that didn't seem to work.

 

If you go here:

 

https://twitter.com/CFJMagazine

 

and click on:

 

contractflooringjournal.co.uk/fluid

 

you will see how it works at the moment.

 

Any help with this would be great, thank you.

 

Neil

 

 

I can't seem to locate the welcome bar, are you sure it's visible? I can see it in your code, but not on the actual site. Without looking and going by the code, I imagine you'll need to place the <div> at the top of the page, inside the containing wrapper and setting the margin to 0. Again, without seeing, it's a guess. (is it just me? )

At the moment its just at the bottom of the HTML next to the closing body tag. I have also tried placing it at the top on the containing wrapper and above the containing wrapper, but it doesn't seem to make a difference.

 

This is the code they provided:

 

<!-- AddThis Welcome BEGIN -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51a7773e7475f50e"></script>
<script type='text/javascript'>
addthis.bar.initialize({'default':{
"backgroundColor": "#393939",
"buttonColor": "#098DF4",
"textColor": "#FFFFFF",
"buttonTextColor": "#FFFFFF",
"fixed":"true",
},rules:[
{
"name": "Twitter",
"match": {
"referringService": "twitter"
},
"message": "If you find this page helpful:",
"action": {
"type": "button",
"text": "Tweet it!",
"verb": "share",
"service": "twitter"
}
},
{
"name": "Google",
"match": {
"referrer": "google.co.uk"
},
"message": "We are on Twitter",
"action": {
"type": "button",
"text": "Follow us",
"verb": "follow",
"service": "twitter",
"id": "CFJMagazine"
}
},
{
"name": "linkedin",
"match": {
"referringService": "linkedin"
},
"message": "We're on Twitter, too!",
"action": {
"type": "button",
"text": "Follow us",
"verb": "follow",
"service": "twitter",
"id": "CFJMagazine"
}
}
]});
</script>
<!-- AddThis Welcome END -->

I still can't see the actual physical welcome bar on your site, nor when I add the script they provided to my own testing website does it show up on any browser, rather bizarre really. I can't help because of this.

The code used means that the bar will only show up if you visit the website through Twitter (that's why I provided the twitter link). It comes up for me, is it still not showing on your browser?

The code used means that the bar will only show up if you visit the website through Twitter (that's why I provided the twitter link). It comes up for me, is it still not showing on your browser?

 

Now I can see it.

 

Preventing the bar from pushing the content down is simple, add this to your fluid.css:

.addthis_bar_placeholder{
    position: absolute;
}

This will solve it, but the bar will overlap the top section of your website. I'm not sure if that's what you were hoping for, but if not, then the original state (where the bar pushed your content down) would be right, in that the content dynamically shifts depending on whether the tweet bar is visible or not. The only reason the content looks odd when the bar is visible is because you're using a background image, so your gridContainer element isn't in-line with your background strip image. If you wanted the content to dynamically move up and down, but also with tweet bar pushing the content up or down depending on its visible state, then you'd have to eliminate the background strip image or use additional coding (probably jQuery) to alter the background strip placement or size when the tweet bar's state changes.

Edited July 22, 201313 yr by throzen

Thank you very much. Funnily I got a response from addthis.com and they said it wasn't possible!

 

Worked a treat for me!

Hi , I have a silly question . I want the same thing as Neil but I have no idea where to add the code . I literally just started learning . is the fluid.css a file that I should have on my server ? or I have to insert the code into the code that I got from Addthis ? Can you please show me an example and help me out ? pretty please ?

I would really appreciate it .

 

Thanks !