Tutorial: Popup Askbox

As seen in my Library Theme.

Before we start, let me say that I didn’t write the original javascript for this. I found it about 2.5 years ago and no amount of searching has brought me to the original creator who I would source if I could.

I will try to make this tutorial as easy as possible for people who don’t know much about HTML. The code for adding a popup askbox comes in four parts, which I will try to make as clear as possible.

STEP 1: Find in your theme’s code the ‘ask’ link. It should look like this:

<a href="/ask">{AskLabel}</a>

Replace the link to look like this:

<a href="javascript:open('askbox');">{AskLabel}</a>

What this does is when you click your 'ask’ link, instead of being sent to a new page you will trigger a javascript function. For now it will appear to do nothing.

STEP 2: Next we add the javascript function.

Start by finding these two tags in your theme’s code: “</style>” and “</head>”.

Next copy what’s below into a space between these two tags:

<script type="text/javascript">
function open(askbox) {
    var askcontainer = document.getElementById(askbox);
    if (askcontainer) {askcontainer.className=(askcontainer.className=='closed')?'open':'closed';}
}
</script>

This tells your browser what to do when the 'ask’ link is clicked. But like before, you won’t see anything happen yet.

STEP 3: Now to add the askbox itself. This can go anywhere in the body section, but if you don’t know what you’re doing, just find <body> and the code can be pasted immediately after it.

This is the code to copy and paste. I will give a breakdown immediately after.

<div id="askbox" class="closed">
  <a id="askboxbg" href="javascript:open('askbox');"></a>
  <div id="ask">
  <h1>{AskLabel}</h1>
  <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/USERNAME.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  </div>
</div>

Breakdown:

If you were to update your theme preview now, your askbox would appear at the top of your page and would make your theme look a mess. The final step will fix this.

STEP 4: Our last step is to style the popup. The code below will give you only a basic black and white style. People who know a bit of CSS may change it however they want.

The following needs to be pasted someplace between the “style” tags. If you’re not sure where, find the “</style>” tag and paste the following immediately before it: 

#askbox {position:fixed; z-index:20; width:100%; height:100%; background-color:rgba(0,0,0,0.75);}
#askbox.open {display:block;}
#askbox.closed {display:none;}
#askboxbg {display:block; width:100%; height:100%; position:absolute; z-index:1;}
#askbox #ask {width:500px; padding:20px; position:absolute; z-index:2; left:50%; margin:100px 0 0 -270px; text-decoration:none; color:black; background-color:white;}

Breakdown:

Now if you click on your “ask” link the popup will work. Click on the background and it will close again. Well done, you’ve installed a popup askbox!

Doesn’t work?

  1. rpstuffff reblogged this from themesbyeris
  2. goth-butt reblogged this from themesbyeris
  3. dustyresources reblogged this from themesbyeris
  4. panopticonism reblogged this from themesbyeris
  5. madhattesting reblogged this from themesbyeris
  6. lunar-root reblogged this from themesbyeris
  7. themesbyeris posted this