demo/preview | difficulty: medium; requires a little knowledge of html

ok so basically i wanted to add a mini faq or some kind of information that people should know before sending me any asks, but i didn’t want a separate faq page and i wanted it conveniently on the same page as the ask box so that people who send me messages have no excuse to not know the answers to what they’re looking for already.

the thing is that unlike the /submit page, tumblr doesn’t allow you to easily add text in your /ask page. so jquery is needed to add text where you want it to be (in this case, before the ask box).

so here’s a tutorial on how to do such a thing (warning: it’s kind of lengthy because i’m trying to explain it well):


(if any images are too small to read on my theme, just open them in a new tab)

the basic jquery script:

(noted in caps/bold are the 3 things you need to change, but do not remove the single quotation marks. keep on reading for a full explanation on how to do this properly.)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var pathname = window.location.href,
        text = $(
        'TEXT/FAQ YOU WANT HERE (HTML IS ALLOWED)'
        );
    if (pathname.indexOf('http://YOUR URL HERE.tumblr.com/ask') > -1) {
        $('WHERE YOU WANT TO PREPEND TEXT').prepend(text);
    }
});
</script>


the script should be placed in between the <head> and </head> tags of your theme’s html.

the basic tutorial:

obviously, each theme is written differently, so the class and id names declared in the css are different between each theme and you need to know which one holds the ask box. however, what we do know is that the ask box is held in a text post container. we need to find the class name of this container so that we can tell the jquery script where to put the faq/text.

we will then add the faq by using prepend so that it goes before the ask box.

i’ll be showing a few examples to cover different scenarios. just please note that since class and id names can be different for each theme since people write their code differently, you have to find the one in your theme yourself!!

so first, look for the ask box (on your ask page, right click > view page source). it should be held in an iframe tag which is shown in the red highlight below:

(make sure you’re looking at the “ask_form” and NOT the “tumblr_controls” iframe!!)

great so we know where the ask box is located!! now we need to look at what tags are wrapped around it and use this as our prepend location. aside from the paragraph (<p>) tags, it’s wrapped in a <div> with the class name “sout” and the entire thing is wrapped in a <div> with the class name “post” (indicated by the green highlights above). i do not want the text to be before the title (“message”) so i cannot use “.post" as my location. i want the text to be in between the title and the ask box itself, so i will prepend the text inside “.sout”

(note that a class name has a period “.” before it, and an id name has a hash/number sign “#” before it)

.prepend() will add the text immediately after that opening <div> tag (<div class=”sout”>) as opposed to .append(), which will add it immediately before the closing </div> tag. in this case, prepend makes more sense since we want it inside <div class=”sout”> but before the ask box!!

now that we know where to add the text, we can start writing the jquery script:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var pathname = window.location.href,
        text = $(
        '<p>hi, this is the text that would go before the ask box!!</p>'
        );
    if (pathname.indexOf('http://bunnelby.tumblr.com/ask') > -1) {
        $('.sout').prepend(text);
    }
});
</script>

note what i changed.

  • i put the text that i wanted to appear (with the necessary html included; paragraph tags in this case. you could use unordered lists, images, whatever html!! as long as you know what you’re doing)
  • i put the url i want the jquery script to look for before adding the text (http://bunnelby.tumblr.com/ask)
  • i put the location that i want the text to be added in (the <div> tag with the class .sout)!!

this is the result:

other scenarios:

alright, so what we’ve seen so far is that we need to find the immediate tag that holds the ask box. in my theme, it was “<div class=”sout”>" but what if it had no class or id name?

i’m going to take my friend’s theme as an example now:

SCENARIO 2

again, the red highlight shows the area where the ask box is. but notice how it’s not immediately wrapped in anything except for a paragraph <p> tag. there is no class/id name to distinguish it from other paragraph tags. if we told the jquery script to prepend text in a <p> tag, it would apply to every single paragraph tag on the page, which is a huge no-no. we need to specify the location so that it’ll only affect the paragraph tag inside the .entry tag (inside <div class=”entry”>) which is the post container in this case!!

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var pathname = window.location.href,
        text = $(
        '<p>hi, this is the text that would go before the ask box!!</p>'
        );
    if (pathname.indexOf('http://bunnelby.tumblr.com/ask') > -1) {
        $('.entry p').prepend(text);
    }
});
</script>

look at what i made the prepend location this time!! “.entry p" (the open/closing brackets for <p> are not necessary) makes it so that it will affect all <p> tags inside anything with the class name ".entry" instead of all the <p> tags on the page.

SCENARIO 3

alright, this is my friend’s theme again, but let’s say there’s multiple <p> tags inside the post container (perhaps one for the post title, and the other one holding the ask box). again, the <p> tag holding the ask box has no class/id name to distinguish it. the problem here is that if we prepend the text in ”.entry p" again, it’ll also add a duplicate right before the title, which is not what we want.

therefore, we can specify which <p> tag to target even if there’s no specific class/id name. we will do this using nth-child.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var pathname = window.location.href,
        text = $(
        '<p>hi, this is the text that would go before the ask box!!</p>'
        );
    if (pathname.indexOf('http://bunnelby.tumblr.com/ask') > -1) {
        $('.entry p:nth-child(2)').prepend(text);
    }
});
</script>

ok so over here i used “.entry p:nth-child(2)" because the <p> tags are inside the <div> tag with .entry as its class name, so they are called child elements of “<div class=”entry”>”. putting ”:nth-child(2)" allows me to target the second <p> child element that belongs to “.entry”.

and that’s all there is to the tutorial. hopefully i covered all possible scenarios so there’s no problem here.

i know it’s a little long-winded but i think i explained it as well as i could!! you can shoot questions if you’re unsure about anything

  1. alioshakaramazov reblogged this from kirbyoppressor64
  2. kirbyoppressor64 reblogged this from lntruder
  3. lntruder reblogged this from localpunk
  4. localpunk reblogged this from art-of-whore
  5. art-of-whore reblogged this from mysticaljew
  6. shakespork reblogged this from mysticaljew
  7. mysticaljew reblogged this from svvords
  8. anniesreferences reblogged this from asianfetus
  9. prostitutors reblogged this from flavorblaster
  10. fckingblonde reblogged this from svvords
  11. pujuu reblogged this from zweilous
  12. laqras reblogged this from zweilous
  13. cumposers reblogged this from fuglypudding
  14. heracrossing reblogged this from zweilous
  15. pokepuffs reblogged this from nlcotine
  16. failuresimulator reblogged this from fonixe
back to top