©

Being a successful theme-maker is all about giving your users the ability to customize. Luckily for us, tumblr makes it easy for us theme-makers to do that!

Learning to implement drop down lists in your theme will give your users easy control and a variety of options for their theme. (It also protects you from having to use several checkboxes to toggle through different options for the same element!) I haven’t seen many theme makers include these as of yet, so I’m hoping this tutorial will help a few people out!

STEP ONE: Choose what you want to make a drop down list for. It can be for practically anything you can put a div around, but for this tutorial I’m going to make one that controls what font the blog title will be. I want the user to be able to choose between the fonts Helvetica, Trebuchet MS, and Georgia. (You can have as many options as you want, but I’m going to stick to only 3 at the moment!)

STEP TWO: Let’s start by writing the meta tags - remember, meta tags go within the <head> tag. To control my title font, my meta tags will look like this:

<meta name=”select:Title Font” content=”helvetica” title=”Helvetica”>
<meta name=”select:Title Font” content=”trebuchet_ms” title=”Trebuchet MS”>
<meta name=”select:Title Font” content=”georgia” title=”Georgia”>

Basically, you’re making one meta tag per selection option. I have three meta tags, because I want the user to be able to choose between three fonts. Each meta tag has this basic layout:

<meta name=”select:name for the select menu on the customization page" content="name you will use in the CSS to style the option" title="name for the selection option on the customization page">

Pretty easy, right?

STEP THREE: Now we’re going to work in the HTML, within the <body> tag. In your HTML, find the element you want to style. In my case, I want to style the title font, so I need to find the HTML for my title. This is what my title HTML looks like originally:

<div id=”title”>{Title}</div>

As you can see, I already have a div around it so I can style it. But I want the font to change respectively to what is in the drop down menu. So, I’m going to change the HTML to look like this:

<div class=”{select:Title Font}” id=”title”>{Title}</div>

All I did was take the name of my meta tag - {select:TItle Font} - and assign it to the element I want to style as a div class. It would also work if you applied it as a div id, but I’m going to apply it as a class since the title already had a div id assigned.

STEP FOUR: Last step! Let’s go to our CSS. Since we assigned the title element the div class of {select:Title Font}, we’re now going to add this to our CSS:

.helvetica {
font-family:’Helvetica’;
}

.trebuchet_ms {
font-family:’Trebuchet MS’;
}

.georgia {
font-family:’Georgia’;
}

Remember in step two, where we used meta tags? Within the content=”“ placeholder I told you to assign a name you would use to style the CSS. That’s where we’re getting the names for the classes I added in the CSS. Then, within the curly brackets, we add our stylings like normal. I only changed the font, but you could add as much CSS as you wanted to change other things like the color and size of the fonts.

When you go back to the Customization page, you should now have a fully functional drop down menu!

If you had any troubles or need help, please feel free to message me! And please like / reblog this tutorial if it helped you!

  1. stupid-lizard-themes reblogged this from sarahthemes
  2. halesofrp reblogged this from shutupofrp
  3. mustloveharrythemes reblogged this from sarahthemes
  4. thewisepotato reblogged this from aesthemes
  5. aesthemes reblogged this from boromihrs
  6. encirps reblogged this from meowthwrites
  7. aqua-amethyst-angel reblogged this from spookyrph
  8. spookyrph reblogged this from batgirlrph
  9. joshsrp reblogged this from halhanwrites
  10. halhanwrites reblogged this from psychictwinsrph
  11. psychictwinsrph reblogged this from jackirps
  12. berrykind reblogged this from cythemes
  13. diararchive reblogged this from elisionthemes
  14. wildimaginationrps reblogged this from shutupofrp
  15. ghxstk reblogged this from sarahthemes
  16. nogitusnes reblogged this from irmacoder
  17. meowthwrites reblogged this from callanofrp
  18. callanofrp reblogged this from jackirps
  19. alyssiaofrp reblogged this from kararph
  20. jackirps reblogged this from britoween
  21. ophiliae reblogged this from kingdomhoenn
  22. prismthemes reblogged this from sarahthemes
  23. irmacoder reblogged this from sarahthemes
  24. ambrosiathemes reblogged this from sarahthemes
  25. anevolvedmonkey reblogged this from themevillage
  26. themevillage reblogged this from sarahthemes
  27. elisionthemes reblogged this from sarahthemes
  28. elenagilbertrps reblogged this from alicatofrp
  29. fucking-resources reblogged this from evansyhelp
  30. sephxual reblogged this from sarahthemes
  31. sympatheticthemes reblogged this from legilimenthemes