©

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. blogfactorie reblogged this from neonbikethemes
  2. lmmatures reblogged this from sarahthemes
  3. awwkatie reblogged this from sarahthemes
  4. halesofrp reblogged this from skellyofrp
  5. mustloveharrythemes reblogged this from sarahthemes
  6. thewisepotato reblogged this from aesthemes
  7. aesthemes reblogged this from boromihrs
  8. encirps reblogged this from hepburnwrites
  9. aqua-amethyst-angel reblogged this from spookyrph
  10. spookyrph reblogged this from batgirlrph
  11. joshsrp reblogged this from halhanwrites
  12. halhanwrites reblogged this from psychictwinsrph
  13. psychictwinsrph reblogged this from jackirps
  14. berrykind reblogged this from cythemes
  15. diararchive reblogged this from elisionthemes
  16. wildimaginationrps reblogged this from skellyofrp
  17. ghxstk reblogged this from sarahthemes
  18. nogitusnes reblogged this from irmacoder
  19. hepburnwrites reblogged this from callanofrp
  20. callanofrp reblogged this from jackirps
  21. alyssiaofrp reblogged this from kararph
  22. jackirps reblogged this from britoween
  23. ophiliae reblogged this from kingdomhoenn
  24. prismthemes reblogged this from sarahthemes
  25. irmacoder reblogged this from sarahthemes
  26. ambrosiathemes reblogged this from sarahthemes
  27. anevolvedmonkey reblogged this from themevillage
  28. themevillage reblogged this from sarahthemes
  29. elisionthemes reblogged this from sarahthemes
  30. elenagilbertrps reblogged this from alicatofrp
  31. fucking-resources reblogged this from evansyhelp
  32. sephxual reblogged this from sarahthemes