Discover Top Posts Tagged with #spoons meter

Popular Recent

I always want to get http://lizzledpink.tumblr.com/post/82727166329 this, especially when I’m low on spoons, but even on highter spoons I’m so HTML terrible. Even though it’s typed step by step,. ugh

#spoons #spoons meter

Spoons Meter v2

Preview:

You’ll be able to choose the colors, the size of the spoons, if the spoons are centered or not, and the number of spoons from your theme customization options! Thanks @anaarthemes for the inspiration!

I’ll add more description to this post later. Right now, I just want to get it out there.

Grab the code from here, or under the read more! (I recommend the link.)

#spoons meter

Tutorial + Code: Built-in battery meter

This tutorial is going to show you how to get a battery meter like this:

without using images or JavaScript. You’ll be able to change the size and color of the battery, as well as how full/charged it is, from the theme editor menu.

This is a tutorial, but you can use any of the code here in your own theme, whether you’re releasing it or not.

The first step is to put Font Awesome into your theme code. Thanks to MaxCDN this is super easy--all you have to do is put this text:

in between your <head></head> tags. Be sure to put it above <style type=“text/css>! It should look something like this:

Now you can use Font Awesome wherever you want in your theme.

The second step is to create a div for your battery meter. I like to put mine in the sidebar, but you can put yours in a separate box if you want. We’ll also add an FA icon, done with the code “fa fa-iconname”. This will all be done in the <body></body> section.

This code alone will give you an empty battery meter the same color and size as the text of the sidebar.

Now that you have your battery meter, you can go about making it more customizable. The first thing we’ll do here is make it so you can change how full the battery meter is. We’ll do this with selections, which means we have to go up to the section above <style type=“text/css”> again to make some options.

On the theme editor screen, this shows up as:

Now we have to make it so these options can actually change what the battery looks like. Go back to the batterymeter div and change “battery-0″ to “{select:battery level}”.

Now we can change the battery level from 0% to 75% just using our theme menu.

You now have a functioning battery meter. The only things left to do are customizing the color and size (which are totally optional). The easiest way to do this is to use options just like we did for the battery level. I’m going to code it so you can customize the size and color from the menu, as well as hide or show the battery.

In the <head> section, our options will look like this:

And now you have a customizable battery meter that you can edit from the menu.

If you don’t want to copy all this down, the code is right here. Make sure to put everything in its proper section.

#battery meter #spoons meter #(since it's the same concept)#rsrc #tutorials

I added a Spoons Meter to my blog ... it's currently 2 of 5 so pls just google it instead of asking, it's not hard to find

thanks

#spoons meter #low on spoons

Tutorial + Code: Built-in battery meter

This tutorial is going to show you how to get a battery meter like this:

without using images or JavaScript. You’ll be able to change the size and color of the battery, as well as how full/charged it is, from the theme editor menu.

This is a tutorial, but you can use any of the code here in your own theme, whether you’re releasing it or not.

The first step is to put Font Awesome into your theme code. Thanks to MaxCDN this is super easy--all you have to do is put this text:

in between your <head></head> tags. Be sure to put it above <style type=“text/css>! It should look something like this:

Now you can use Font Awesome wherever you want in your theme.

This code alone will give you an empty battery meter the same color and size as the text of the sidebar.

On the theme editor screen, this shows up as:

Now we have to make it so these options can actually change what the battery looks like. Go back to the batterymeter div and change “battery-0″ to “{select:battery level}”.

Now we can change the battery level from 0% to 75% just using our theme menu.

In the <head> section, our options will look like this:

And now you have a customizable battery meter that you can edit from the menu.

If you don’t want to copy all this down, the code is right here. Make sure to put everything in its proper section.

#battery meter #spoons meter #(since it's the same concept)#rsrc #tutorials

#spoons meter

Trending Tags

Recently Viewed Tags

#spoons meter