resources & design

Resources blog. Angel, 14, China. I code, I write, and I sleep a lot. That's about it. Here, you'll find resources of all kinds, from writing to coding to photoshop! I hope you'll find something that will be useful for you.
01.02.03.04.05.06.
run by angel
paynex: “ UPDATES TAB 2 after dozens of messages asking for it it’s finally here, my second updates tab yay. again it suits for every theme and looks really nice but it may overlap sidebar/posts if they are close to the top left corner of the screen...

paynex:

UPDATES TAB 2

after dozens of messages asking for it it’s finally here, my second updates tab yay. again it suits for every theme and looks really nice but it may overlap sidebar/posts if they are close to the top left corner of the screen (may look bad but the tabs are still visible). remember you’ll need both the css and the html part so be careful when placing the code (you can’t just copy paste the whole thing from pastebin. read the instructions!!!!). and if you want to add more/delete tabs you have to change one margin-top value on the css. i have a mark there so just look up the new value from this part and change replace the old one with it and you are good to go. as always follow the rules and have fun!

→ live preview

↳ download with 1 tab, download with 3 tabs, download with 6 tabs, problems

- choose 1,3 or 6 tabs
- the tabs open and close when you click the numbers
- you can make them as long as you want to
- editing instructions on the coding

IF YOU WANT TO REMOVE/ADD TABS READ HERE THE MARGIN-TOPS YOU NEED TO CHANGE (more info on the codings)

10 tabs: -285px
9 tabs: -256px
8 tabs: -227px
7 tabs: -198px
6 tabs: -169px
5 tabs: -140px
4 tabs: -111px
3 tabs: -82px
2 tabs: -53px
1 tab: -24px

like/reblog if you use or like it, please

wonderfullythemes: “ Updates Tab #3 by wonderfullythemes This was coded ages ago, and is featured in my 24th and 27th themes, but I’d never released it separately, so here you go :) “ Preview in Theme #24 and Theme #27 Codes: • Link to bootstrap...

wonderfullythemes:

Updates Tab #3 by wonderfullythemes

This was coded ages ago, and is featured in my 24th and 27th themes, but I’d never released it separately, so here you go :)

Preview in Theme #24 and Theme #27

Codes: 

  1. Link to bootstrap (enables the icons) - paste above your meta tags
  2. CSS - paste above {CustomCSS}< /style >
  3. HTML - paste below < body >
Rules:
  • no stealing/redistributing/claiming as your own/interfering with the credit I’ve included in the code
  • like/reblog if using thanks c:
Features:
  • Hover over the lock icon to reveal your updates/about/quote/whatever
  • Mass icon list here!
  • Instructions of how decorate the text in the HTML code

Check out the +Theme Gang, +Theme Village, +thmresources and +HTML Wizards for more themes :)

paynex: “UPDATES TAB 1 my first updates tab. suits for every theme but may overlap sidebar while hovered (it isn’t really a problem but it might look a bit bad). remember you’ll need both the css and the html part. follow the rules and have fun! →...

paynex:

UPDATES TAB 1

my first updates tab. suits for every theme but may overlap sidebar while hovered (it isn’t really a problem but it might look a bit bad). remember you’ll need both the css and the html part. follow the rules and have fun!

→ live preview

↳ download css, download html, problems

- slides open while hovered
- you can make it as long as you want to
- editing instructions in the coding

READ HERE HOW TO ADD MORE TABS PLEASE

like/reblog if you use or like it, please

iamthemelocked: “ 3 lines hover updates tab (#11) by iamthemelocked / thewomvn STATIC / LIFE PREVIEW if the gif isn´t enough :) • the codes (left version, displayed above) : 1 | 2 | 3 • the codes (right version) : 1 | 2 | 3 HOW TO INSTALL • paste...

iamthemelocked:

3 lines hover updates tab (#11) by iamthemelocked / thewomvn

STATIC / LIFE PREVIEW if the gif isn´t enough :)
  • the codes (left version, displayed above) : 1 | 2 | 3
  • the codes (right version) : 1 | 2 | 3
HOW TO INSTALL
  1. paste code number 1 in the meta section of your theme (right at the top where you can see for example: <meta name=”color:Background” content=”#ffffff”/>). This is so that you can change the colours of the boxes without going into the code.
  2. paste code number 2 right above {CustomCSS}</style></head><body>
  3. paste code number 3 right under {CustomCSS}</style></head><body>

PLEASE LIKE / REBLOG IF YOU ARE USING IT! 

PLEASE LEAVE THE CREDIT IN IT!

ABOUT THIS TAB IN GENERAL
  • The original version has 3 lines with text boxes that appear upon hovering
  • If you want to add more or delete a few then you can do that easily in the code
  • All the colours are customizable without having to go into the code, just do it in your tumblr customizing menu
  • For inserting the text you need to go into the code though, just like with every other updates tab
  • You have the option of turning it off in your customizing menu if you don´t want to use it anymore, you don´t have to delete it from the code
IF YOU WANT TO CHANGE THINGS IN THE TAB:
  • Check my other updates tabs for reference, on all those posts there are explanations for most questions.
  • If you don´t find the answer to your question there, check the tutorials on my theme blog.
  • If you still have questions, request a tutorial here.
ADDITIONAL GADGETS

You want to have a colour spectrum to choose from?

Check this link.

You want to add colorful headers?

The tutorial is here.

You want to add a music player?

Find the detailed tutorial here.

You want to have a clock in your updates tab?

Check out this link.

FINAL WORDS

This updates tab is mine and mine alone.(thewomvn/iamthemelocked)

I spent a lot of time making it so I would really appreciate it if you:

1. left the credit where it belongs

2. directed others who ask for a tutorial for this updates tab to this post

3. didn´t claim it as your own, no matter how many changes you have done

4. didn´t steal the code or redistribute this updates tab in any way.

I will find out and I can assure you, it´ll not be pleasant for you.

I am always there for your questions, so check on my HTML and Themes blog if you want to know something or just ask your question there and I will make a tutorial for you.

PLEASE LIKE / REBLOG IF YOU ARE USING IT!

vitanica: “Updates Tab #2 Ok so I made these because I think most of the updates tabs are like “hover me and I will expand” so I decided to make one that you can click on it and magically a box appears lol okay I need friends. The preview, codes and...

vitanica:

Updates Tab #2

Ok so I made these because I think most of the updates tabs are like “hover me and I will expand” so I decided to make one that you can click on it and magically a box appears lol okay I need friends.

The preview, codes and how to use are here.

Please READ EVERYTHING BEFORE YOU ASK! I beg you sweetie. If you have problems installing please let me know! <3333

updates tab 01 by lunors

lunors:

I decided to release the updates tab I’ve had on my blog for a while.

Here is a screenshot of what it will look like. The “stats” tab hovers open to reveal stats and other updates.

image

This tutorial requires some basic HTML knowledge, but is easy to customize because I took the time to explain what some elements of the code are.

Here is the code: http://pastebin.com/2iXHcvgf

The music player needed for this updates tab can be found here: 

http://flash-mp3-player.net/players/multi/ 

You can always message me if you need/want help! Enjoy :o)

Note: PLEASE put credit in your FAQ! It’s not necessary but I would highly appreciate it.

the “how to decorate your updates tab” tutorial!

burntsam:

ok so a bunch of people were asking me how to make your updates tab pretty so here it is!

hope it helps!

please like if it helped! I really want to know if it did (or not shh)


ADDING A DIVIDER:

  • this is an example of a divider we will be making: image
  • this is very simple, you just need to paste this code wherever you want the divider to be.
  • to change the color of the divider, you just need to choose the color you like and type the code color where mine it’s #B0E2FF

image

here’s a good source for color codes

BORDER STUFF:

  • for the border part, go to “#ocehans{” (mine is like that, yours might be different, that’s not a problem though just look for something similar to this! )

image

  • now, we’re going to focus on this part

image

  • if you don’t want any border at all you just need to erase that line above, it’s that simple!
  • to change the type of the border, you have to replace where mine says “dashed”, to either “dotted” or “solid”.
  • to change the color, you just need to put the color code you’re happy with where mine says “bdbdbd”

ADDING A LINK:

  • to add a link in your updates tab you will need this code:

it should look like this:

image

  • if you want your link to be in a specific color, you have to paste this other code:

it should look like this:

image

ADDING A TEXT THAT MOVES:

  • I really didn’t know how to say that so for me it’s the text that moves ok.
  • you’ll only need to paste this code
  • if you want it to move faster or slower just change the number where it says 5 in mine!

ADDING A SYMBOL LINK THING:

  • ok! so this one is really easy. it took me a hell of a time to figure it out though but anyway here it is.
  • you just need to paste this code wherever you want the symbol to be!
  • oh and if you don’t want any specific color you just need to take out this part and you’re done!

image

DON’T FORGET : if it doesn’t work, try retyping the quotation marks.

HOW TO ADD MORE BOXES/TABS:

  • I hope this helps!

FIRST STEP:

  • first,you’ll want to find this code!
  • image
  • then, you’re gonna copy all that thing and change the number (next to #ocehans_) to the next available number of tabs you have.
  • for example, you have 5 tabs, you’re adding a new one, which will be then, 6! so you’ll change that numebr to 6.
  • remember to change the number in both parts, the first one and the hover part. otherwise it won’t work.

SECOND STEP:

  • first things first, you’ll need to copy this little guy
  • <div id=”ocehans”>
    <center>
    <div id=”ocehans1“>
    <div style=”font-size:8px;”>title 1</div> <div style=”padding-top:1px; text-transform:uppercase; opacity:.9; font-family: calibri; font-size:8px; line-height:10px; text-align:center; color:#b9b9b9;”>
    text 1 here



    </div>
    </div>
  • and change the number of the box (in bold) to the next available one you have!
  • then you’ll paste it after the other sections that you have!
  • voilà!

HOW TO MAKE IT WIDER

  • first, you’re going to look for this part:

image

  • then, you’re going to focus on this part:

image

  • then you just need to change the number (where mine says 85) to whatever number you’re happy with!

and if that’s not what you meant… I have another mini tutorial for you!

HOW TO MAKE A SECTION LONGER

  • first! find the section you want to make longer or shorter

image

  • now, you’re going to focus on this part:

image

  • change the number where mine says 70, to whatever number you’re happy with!
  • then you’re done, voilà!

EXTRA STUFF TO KNOW:

  • here’s some basic codes to know!

<b> text will be bolded <b>

<i> text will be in italics </i>

<strike> text will be striked </strike>

<u> text will be underlined </u>

LAST NOTE:

  • I really hope this helped you guys!
  • I’m no html expert but here’s basically everything i can remember for this tutorial!

send me requests! if you have any questions, just shoot me an ask! 

THIS POST WILL BE UPDATED WITH MORE “MINI” TUTORIALS

updates tab 02; by primrosetylers

primrosetylers:

So, ages ago, people asked for the updates tab from this theme. (And I’m sorry i kept forgetting about that.) Well, here’s a slightly updated version of that.

image

I N S T R U C T I O N S 

daenso:

some of you asked for the codes of my info box, so here you can find two codes you can easily install. it’d be cute if you credit me somewhere or link my blog if someone ask for codes, thank you.

dropbox pack (#1, #2)
optimized for chrome {pastebin + how to} 

—— if you don’t know how codes work please customize just the parts that have a /*customizable*/ on their right, this will prevent any possible huge mistake so you don’t have to mess up your code or reinstall it again :> enjoy!

don’t repost or claim as yours.
please like/reblog this post if you are gonna use one of them, thanks.

Updates tab 02 by eapdthemes

eapdthemes:

image

[ static preview ]

i was asked for the code of my current update tab aaaand here it is!

RULES
  • do not redistribute/claim as your own! i spent time coding so please show respect :)
  • you don’t need to credit me but it would be super duper amazing if you did
  • please like/reblog if you use!
  • drop me a message if you need help!
THEME ♥