4 ms·

I tried adding this to my tumblr, but the hello bar unfortunately conflicts with the tumblr controls at the top right (it gets pushed down). Not sure how to res

by krig 16y ago

I tried adding this to my tumblr, but the hello bar unfortunately conflicts with the tumblr controls at the top right (it gets pushed down). Not sure how to resolve that. :/

dtelepathy 16y ago
You can change the positing setting to cover page content. Here's an example: http://www.arookiemistake.com/ http://www.arookiemistake.com/
redigits 16y ago
Here are the steps you need to take in order to place the Hello Bar on your Tumblr blog: 1. Insert the following code in the header section of the page. It is a new CSS style script for the hello bar. These settings will be called by the hellobar script in the body. <style type=”text/css”>#hellobar-wrapper{height:30px;margin:0;overflow:visible;padding:0;position:relative;width:100%;z-index:2}#hellobar-container{font-size:14px;font-weight:normal;height:30px;line-height:30px;margin:0;overflow:visible;padding:0;position:relative;text-align:center;width:100%;z-index:1000}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited,#hellobar-container a:hover{font-size:14px;padding:0;border:none;text-decoration:underline}#hellobar-container a:hover{text-decoration:none}#hellobar-shadow{position:absolute;bottom:-8px;left:0;width:100%;height:8px;line-height:8px;overflow:hidden;background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/shadow.png)}a#hellobar-logo,a#hellobar-logo:link,a#hellobar-logo:visited{background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/logo.png);height:0;left:20px;overflow:hidden;padding:22px 0 0;position:absolute;top:3px;width:44px}#hellobar-wrapper.hellobar-left a#hellobar-logo,#hellobar-wrapper.hellobar-left a#hellobar-logo:link,#hellobar-wrapper.hellobar-left a#hellobar-logo:visited{left:auto;right:20px}a#hellobar-close,a#hellobar-close:link,a#hellobar-close:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/up.png);background-position:0 0;display:block;height:0;overflow:hidden;padding:19px 0 0 0;position:absolute;right:20px;top:6px;width:18px;z-index:10;border:none}#hellobar-wrapper.hellobar-left a#hellobar-close,#hellobar-wrapper.hellobar-left a#hellobar-close:link,#hellobar-wrapper.hellobar-left a#hellobar-close:visited{right:auto;left:20px}a#hellobar-close:hover{background-position:0 -19px;padding:20px 0 0;border:none}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/down.png);background-repeat:no-repeat;background-position:center 53px;display:block;height:0;overflow:hidden;padding:80px 0 0;position:absolute;right:10px;top:-96px;width:35px;z-index:100;box-shadow:0 0 5px rgba(0,0,0,0.35);-moz-box-shadow:0 0 5px rgba(0,0,0,0.35);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.35);-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3)”;filter:progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3);-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-width:3px;border-style:solid}#hellobar-wrapper.hellobar-left a#hellobar-open,#hellobar-wrapper.hellobar-left a#hellobar-open:link,#hellobar-wrapper.hellobar-left a#hellobar-open:visited{right:auto;left:10px}a#hellobar-open:hover{padding:80px 0 0;border-width:3px;border-style:solid}#hellobar-container{font-family:Helvetica,Arial,sans-serif;background:#c20202;color:#fff}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited{color:#fff982}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-color:#c20202;border-color: #ffffff}a#hellobar-open:hover{background-color:rgb(232,40,40)}</style> 2. Then, right after the <body> tag, insert the following code. <div style=”display: block; height: 33px; ” id=”hellobar-wrapper” class=” hellobar-left”><div id=”hellobar-container” style=”top: 0px; “><span>Japan has been hit by a major 8.9 earthquake. Please donate to</span> <a href=”https://donate.doctorswithoutborders.org/SSLPage.aspx?pid=214” https://donate.doctorswithoutborders.org/SSLPage.aspx?pid=21... target=”_blank”>Doctors Without Borders</a><a href=”//www.hellobar.com/” title=”The HelloBar - a little bar that gets noticed!” target=”_blank” id=”hellobar-logo”>The HelloBar - a little bar that gets noticed!</a><a href=”#close” id=”hellobar-close”>Close</a><div id=”hellobar-shadow”></div></div><a href=”#close” id=”hellobar-open” style=”top: -96px; “>Open</a></div> ——- That’s it! Let’s try to support Japan as much as we can! Place the hello bar on your Tumblr blog to support Japan today!

by krig 16y ago

I tried adding this to my tumblr, but the hello bar unfortunately conflicts with the tumblr controls at the top right (it gets pushed down). Not sure how to resolve that. :/

dtelepathy 16y ago

You can change the positing setting to cover page content. Here's an example: http://www.arookiemistake.com/ http://www.arookiemistake.com/

redigits 16y ago

Here are the steps you need to take in order to place the Hello Bar on your Tumblr blog: 1. Insert the following code in the header section of the page. It is a new CSS style script for the hello bar. These settings will be called by the hellobar script in the body. <style type=”text/css”>#hellobar-wrapper{height:30px;margin:0;overflow:visible;padding:0;position:relative;width:100%;z-index:2}#hellobar-container{font-size:14px;font-weight:normal;height:30px;line-height:30px;margin:0;overflow:visible;padding:0;position:relative;text-align:center;width:100%;z-index:1000}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited,#hellobar-container a:hover{font-size:14px;padding:0;border:none;text-decoration:underline}#hellobar-container a:hover{text-decoration:none}#hellobar-shadow{position:absolute;bottom:-8px;left:0;width:100%;height:8px;line-height:8px;overflow:hidden;background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/shadow.png)}a#hellobar-logo,a#hellobar-logo:link,a#hellobar-logo:visited{background:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/logo.png);height:0;left:20px;overflow:hidden;padding:22px 0 0;position:absolute;top:3px;width:44px}#hellobar-wrapper.hellobar-left a#hellobar-logo,#hellobar-wrapper.hellobar-left a#hellobar-logo:link,#hellobar-wrapper.hellobar-left a#hellobar-logo:visited{left:auto;right:20px}a#hellobar-close,a#hellobar-close:link,a#hellobar-close:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/up.png);background-position:0 0;display:block;height:0;overflow:hidden;padding:19px 0 0 0;position:absolute;right:20px;top:6px;width:18px;z-index:10;border:none}#hellobar-wrapper.hellobar-left a#hellobar-close,#hellobar-wrapper.hellobar-left a#hellobar-close:link,#hellobar-wrapper.hellobar-left a#hellobar-close:visited{right:auto;left:20px}a#hellobar-close:hover{background-position:0 -19px;padding:20px 0 0;border:none}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-image:url(//assets-hellobar-com.s3.amazonaws.com/system/modules/hellobar/lib/down.png);background-repeat:no-repeat;background-position:center 53px;display:block;height:0;overflow:hidden;padding:80px 0 0;position:absolute;right:10px;top:-96px;width:35px;z-index:100;box-shadow:0 0 5px rgba(0,0,0,0.35);-moz-box-shadow:0 0 5px rgba(0,0,0,0.35);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.35);-ms-filter:”progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3)”;filter:progid:DXImageTransform.Microsoft.Shadow(Color=#e5e5e5,direction=120,strength=3);-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;border-width:3px;border-style:solid}#hellobar-wrapper.hellobar-left a#hellobar-open,#hellobar-wrapper.hellobar-left a#hellobar-open:link,#hellobar-wrapper.hellobar-left a#hellobar-open:visited{right:auto;left:10px}a#hellobar-open:hover{padding:80px 0 0;border-width:3px;border-style:solid}#hellobar-container{font-family:Helvetica,Arial,sans-serif;background:#c20202;color:#fff}#hellobar-container a,#hellobar-container a:link,#hellobar-container a:visited{color:#fff982}a#hellobar-open,a#hellobar-open:link,a#hellobar-open:visited{background-color:#c20202;border-color: #ffffff}a#hellobar-open:hover{background-color:rgb(232,40,40)}</style> 2. Then, right after the <body> tag, insert the following code. <div style=”display: block; height: 33px; ” id=”hellobar-wrapper” class=” hellobar-left”><div id=”hellobar-container” style=”top: 0px; “><span>Japan has been hit by a major 8.9 earthquake. Please donate to</span> <a href=”https://donate.doctorswithoutborders.org/SSLPage.aspx?pid=214” https://donate.doctorswithoutborders.org/SSLPage.aspx?pid=21... target=”_blank”>Doctors Without Borders</a><a href=”//www.hellobar.com/” title=”The HelloBar - a little bar that gets noticed!” target=”_blank” id=”hellobar-logo”>The HelloBar - a little bar that gets noticed!</a><a href=”#close” id=”hellobar-close”>Close</a><div id=”hellobar-shadow”></div></div><a href=”#close” id=”hellobar-open” style=”top: -96px; “>Open</a></div> ——- That’s it! Let’s try to support Japan as much as we can! Place the hello bar on your Tumblr blog to support Japan today!