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
patrionus: “ Theme 05: New Romantics by patrionus / aurathemes Static Preview | Code • 500px posts • Home, ask and 3 other custom links • Topbar with 70x70 circular icon • Dropdown links on blogtitle click • Optional sidebar on-scroll and pop-up...

patrionus:

Theme 05: New Romantics by patrionus / aurathemes

Static Preview | Code

  • 500px posts
  • Home, ask and 3 other custom links
  • Topbar with 70x70 circular icon
  • Dropdown links on blogtitle click
  • Optional sidebar on-scroll and pop-up ask
  • Fully customizable colors

Please like / reblog if using and feel free to message me if you have any feedback, problems, or questions! :)

titanthemes: “ theme #33 - preview | code • Header Image • 400 Size Posts • 5 Default Header Links • Grid Theme + Infinite Scroll ”

titanthemes:

theme #33 - preview | code

  • Header Image
  • 400 Size Posts
  • 5 Default Header Links
  • Grid Theme + Infinite Scroll

[UPDATED] Basics of Single-size Multi-Column Themes

ettudis:

ettudis:

This tutorial will cover how to make themes with more than one column in which the posts are nested (aka. Grid theme), in particular, themes in which the columns are in only one specified width. 

image

I have not yet made a theme in which the column sizes change thus I do not how to do it, but the script are the same, you probably just need to add extra features to the script so perhaps you can figure it out on your own. 

Anyways, let’s get started. 

The Concept

We are going to use one div layer to wrap ALL the content, and then another div layer to wrap each post. Then, we use the CSS element, float:left; so that each post is stacked next to each other. The Masonry script will be used so that the post becomes nested. So we’re going to seperate this tutorial into three main ideas:

  • The HTML: set-up
  • The CSS: making things stack into columns
  • The script: incorporating masonry to make it nester

The HTML

In my tutorial series, I mentioned there were two ways to set up the posts block, one with tables and another with div layers. However, in those lessons, I also mentioned to not put div layers around the post blocks (only inside) since it interrupts with the infinite scrolling script by cody sherman.

Well, scrap all that. It won’t matter since we’re not using the same infinite scrolling script. We’ll be working with div layers and you’ll need two. One will be outside the post block, to wrap around all posts, and the other, will be for each individual post (inside the post block). Similar to this…

<div id ="content">{block:Posts}
   
<div class="container"> 

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}        
{Body}
{/block:Text} ...

Please, please, PLEASE use your own wrapper (div layer) IDs.

The CSS

In the CSS, you want to make the content wrapper be big in accordance to the number of columns you want and the size of your columns. For example, you plan to have 400px wide posts (container wrapper), and want two columns, you would need at last 800px width for your content wrapper. Make sure you take into consideration, the margin and padding of your layers (ie. if you had 5px margins, your content wrapper should be about 820 or more,). Just trial and error until you get the right look! 

Next, you need to make sure your container wrapper is floated to the left:

.container{

float:left;

}

The Script

Next, you are going to incorporate the script so that it displays the way you want it to. 

First, you need to include to external script links (place codings anywhere between <head> and </head>. One link is to jquery and the other is to the masonry script. 

<script type="text/javascript" src="https://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="https://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

Then, you need to include the basic script required for the masonry:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

The important parts are bolded, replace with the names of your wrappers/div layers. 

Ta-da! You’re basically done. This all you need for masonry to work. Simple, eh? Though I think most people are familiar with multi-columns in combination with infinite scrolling, but the above code DOES NOT include infinite scrolling, so you will need to add in pagination codes (explained here). 

There are many other options, code that customizes the masonry, you may include (add after itemSelector : ‘.container’,) as well as other methods, effects that you can add to masonry, such as infinite scrolling which I will explain here. 

Masonry with Infinite Scrolling

First, you need to add a link to a masonry-specific infinite scrolling script. 

<script src="https://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>

And so, we have the basic script:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

So, you need to add additional codes to render infinite scrolling:

<script type="text/javascript">
 $(window).load(function () {
 $('#content').masonry(),
$('.masonryWrap').infinitescroll({ 
itemSelector : ".container", 
 navSelector : "div.navigation",
 nextSelector : ".navigation a#next",
 bufferPx : 10000,
 extraScrollPx: 10000,
 loadingImg : "",
 loadingText : "",
 },
 function() { $('#content').masonry({ appendedContent: $(this) }); 
});
 });</script>

For some reason not specified on the site, it is necessary to include all those options (buffer, loading text and images, next page selectors) for infinite scrolling to work. As well, additional HTML (for the next/previous pagination codes) is needed:

<div class="navigation">
{block:Pagination} 
{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>{/block:NextPage}
{block:PreviousPage}<a style="float:left" href="{PreviousPage}">? Newer</a></p>{/block:PreviousPage}
{/block:Pagination}
</div>

But since we’re working with infinite scroll and do not want pages, we can just use CSS to hide the codes:

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation {display:none!important;} 

Now, because everyone has different screen resolutions, people with bigger screens meet a problem. Sometimes, the content at first will not reach the bottom of the window on bigger screens, and since infinite scrolling relies on the whole scroll aspect, the next page content will not load (since no scrolling is in effect).

To prevent this, I add an extra div layer with no content inside the div layer…

<div id ="over"></div>

And specify a certain height in the CSS so that it will stretch the screen.

#over{
height:2000px!important;
position:absolute;
top:0px;
left:0px;
width: 100%;}

So in the end, you will have the following for your masonry with infinite scrolling codes:

  • infinite scrolling script
  • jquery script
  • masonry script
  • basic masonry initial codes (with infinite scrolling method and options)
  • navigation HTML
  • navigation CSS

The End

I think I’ve covered all the basics. If you have any questions, feel free to ask, though I did not develop this script nor am I too familiar with it, so I can’t guarantee thorough answers. My advice is to TRIAL AND ERROR! Good luck, and happy coding!

UPDATED WITH INFINITE SCROLL FIXES. I am so silly, I always make so many stupid small mistakes that really shouldn’t happen in the first place.

The reason why the codes weren’t working was because I forgot to include the blocks that renders the tumblr variables for the pagination (ex: {block:Pagination}, {block:NextPage} etc etc).

Without it, tumblr won’t read for the following pages, and thus, infinite scrolling won’t work because what the infinite scrolling script does is uploads the codes for the next page. *SMACKS SELF* That was silly.

excolo:

theme-hunter:

RESOURCE ROUND-UP #3

jQuery (Tumblr) Photoset Grid (linked to here as well)

Koken (not tumblr related but for anyone planning on hosting a site or alike)

Lorem Pixel (I’m sure everyone is familiar with Lorem Ipsum, this is the image placeholder)

Coffitivity (my personal favourite - recreates a coffee shop vibe to help creativity)

CSS Beautifier

Imageloader.js

CSS Only Alternative to the Select Element

Custom Google Background (not theme related but I’m sure we have a lot of Google/Chrome users)

Wow this resource round-up is great. I’m definitely loving JS photoset grid and Koken!

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

cocorini: “Tags List Page: Cheri “ Preview: HERE | Download: HERE How to install blog pages: Tutorial Credit: str-wrs for the sliding feature tutorial Notes: The tags are in sections so you can organise them! The coding is pretty huge but I’ve tried...

cocorini:

Tags List Page: Cheri

Preview: HERE | Download: HERE
How to install blog pages: Tutorial
Credit: str-wrs for the sliding feature tutorial

Notes: The tags are in sections so you can organise them! The coding is pretty huge but I’ve tried to include a lot of liner notes as guidance on how to use this page. That’s one page theme done from my checklist. (＾ω＾)

senj0ugahara:

A lot of people have been asking me about how I got the snowfall on my tumblr page. Here’s the code I use with speed adjusted: 
<script type="text/javascript" src="https://static.tumblr.com/57iv3tl/DNFmwu7uo/snowstorm.js">this.animationInterval = 60;
</script>

Copy all of the above code, and paste it above the </body> tag in your code (tip: use ctrl+f on your keyboard to find </body>). You may need to refresh the page a couple times to see the changes, and may need also retype all the quotation marks (if they appear slanted). The cool thing about this code is that the snow stays for a little while once it reaches the bottom of your blog, and then “melts” so it doesn’t start blocking the page like many other codes. Enjoy! I found the original code here.

izumi-badass-firelord: “ germanottaaa: “ im bored of life and everything so i decided to make a post of everything. like a ref list of workouts, studying help, writing, drawing… etc! this will literally take me hours i s2g STUDYING; • a way to high...

izumi-badass-firelord:

germanottaaa:

im bored of life and everything so i decided to make a post of everything. like a ref list of workouts, studying help, writing, drawing… etc! this will literally take me hours i s2g

STUDYING;

  • a way to high marks and be on tumblr the same time.
  • science translated to english :)
  • collection of studying mixes
  • selfcontrol and various pomodoro method site blockers are extremely helpful when you know you need to shut down your access to distracting websites
  • simplynoise, mynoise, rainymood, coffitivity, soundrown, simplyrain,naturesoundplayer, naturesoundsforme are good background voices 
  • a site that would explain to you literally anything
  • organizing your time, studying strategies.. etc
  • study skills
  • how to google
  • learning how to revise
  • improving your revision skills
  • learn geography 
  • shop books online
  • alt. to wikipedia
  • final exams guide
  • get motivated to study
  • tips for a productive study break
  • when should I go to bed?
  • microsoft word equivalent
  • free online books
  • more free books
  • can’t do your homework?
  • “no homework” excuses
  • how to get unblocked internet in school (chrome only)
  • words to make you seem more intelligent
  • emotions vocabulary  

WRITING;

  • how to write a kickass essay
  • alternatives to “said”
  • alternatives to “whispered”
  • tip of my tongue
  • Read any book (apparently)
  • writing fantasy stories
  • character flaws
  • writers block (1) (2)
  • writing a death scene
  • bio help
  • degrees of emotions
  • writing ref
  • music to help you write

ART; 

  • painting tutorial
  • colour palette (1) (2) (3) (4) (5) (6)
  • drawing clothe folding
  • avoiding drawing the same face
  • draw ice
  • anatomy help
  • free drawing program (1) (2)
  • sai brushes (1) (2) (3) (4) (5) (6) (7) (8)
  • draw hair
  • drawing ref
  • dont know what to draw?
  • draw 3D room tut
  • drawing eyes
  • lip tutorial
  • how to draw jeans
  • how to draw arms
  • expression tutorial
  • drawing hair and fur
  • drawing cats
  • pose reference blog [its actually a blog full of references i-]
  • download photoshop
  • paint blood
  • color blender
  • draw hands
  • hands 2
  • photoshop help (1) (2) (3) (4) (5)
  • remove backgrounds from images online
  • clouds
  • brush setting ref (SAI)
  • kissing ref 
  • how to draw curls
  • realistic woman body ref
  • draw knees
  • draw feet
  • shadow help
  • male body
  • lips ref
  • contouring and highlighting
  • draw wings
  • change images using blur (PS)
  • gray
  • hat ref
  • glowing stuff
  • pastel colors
  • draw grass
  • eyeliner ref

MAKEUP;

  • eyeliner
  • punk rock makeup
  • disney eye makeup
  • coverup tattooes
  • how to apply blush
  • 6 makeup tips
  • ombre eyeliner
  • what makeup complements my complexion?
  • what makeup suits you?
  • lipstick tricks
  • how to do your makeup with a spoon

HAIR;

  • messy bun tutorial
  • different ways to braid
  • three-braid updo
  • waterfall braid
  • how to fishtail
  • romantic curls
  • braid + bun updo
  • how to do pastel hair
  • 8 ways to wear a bow
  • 4-strand braid
  • braided bun
  • braided headband
  • dutch braid crown
  • pin curls!
  • how to contour
  • everyday makeup routine
  • lipstick using crayons
  • eyeliner ref wow
  • filling in eyebrows
  • banana facial mask (moisturizes)
  • strawberry facial mask (acne prone skin)
  • avocado facial mask (dry skin)
  • yogurt facial mask (sensitive skin)
  • list of oils to add to your face masks
  • already made masterpost :*

FOOD;

  • hot chocolate using nutella -gasp-
  • 4 different smoothies
  • chocolate chip cookies
  • tastiest starbucks drinks
  • best grilled cheese
  • winter sore throat tea
  • best chocolate cake
  • apple pies (mini aw-)
  • extra fancy garlic bread
  • french bread pizza
  • pIE
  • muffin in a mug
  • how to make nutella fudge
  • lavender lemonade wow
  • 15 pound homemade snickers bar
  • make candy crystal meth
  • Macaroni and cheese in a mug
  • cheap & healthy snacks
  • Every Starbucks drink and pasty
  • deliciousfood
  • vegans

MOVIES/TV-SHOWS;

  • tv shows masterpost hola
  • movie masterpost
  • scary movies
  • movies to watch when you’re sad
  • when to pee during a movie
  • jennifer lawrence movies master list
  • glee season 1,2,3,4 + 5
  • ja’mie private school girl
  • adventure time master list
  • supernatural
  • doctor who
  • pirates of the carriben series
  • walking dead season 1,2,3 + 4
  • american horror story season 1 + 2
  • a list of over 900 movies with links

MUSIC/AUDIO; 

  • white noise
  • coffee shop
  • all the music you’ve reblogged
  • stay happy
  • concentrate
  • listen to the rain
  • GET HYPED
  • fireplace
  • play piano

FREE BOOKS;

  • textbooknova
  • reddit
  • bookboon
  • textbookrevolution
  • math textbooks
  • ebookee
  • freebookspot
  • free-ebooks
  • getfreeebooks
  • bookfinder
  • oerconsortium
  • gutenberg project
  • ebook3000
  • readanybook
  • free audio books
  • masterpost of books wow

BORED?;

  • answer trivia questions and give people rice
  • make a a giant squid pillow!
  • make your own acapella band
  • live ocean
  • pokemon secret base
  • read creepy wikipedia articles
  • read more creepy wikipedia articles 
  • disney lies/ urban legends (probs not real like-)
  • this will take you to a cool place
  • your online garden
  • sand art online
  • wow just open it omg
  • cool websites for wasting time (1, 2, 3 )
  • how to help someone who is suicidal
  • make a blanket nest
  • click daily to give free food to an animal shelter
  • 2500 Japanese emoticons 
  • homemade wax
  • gift ideas for cat lovers
  • moss graffiti
  • make a flower crown
  • night vale monopoly
  • learn how to survive a zombie apocalypse
  • how to play ‘sherlock’
  • supernatural workout
  • learn a new language!
  • learn london slang
  • take personality tests
  • watch this video
  • make gifs
  • see what its like to live on minimum wage
  • watch great vines
  • make glitter out of salt
  • make dip-dyed shoes
  • learn to read korean in 15 minutes
  • how to make origami
  • color matching game
  • fun sites masterpost
  • how to be an adult
  • check your postlimit
  • make a wand
  • find out if a website is safe
  • make a font from your handwriting

SELF-HELP;

  • materpost
  • emergency compliment
  • cute yahoo answers
  • calming manatee
  • calming gif
  • coping skills and distractions
  • draw a stickman
  • daily puppy
  • guided relaxation
  • the thoughts room
  • go to a quiet place
  • cut something instead of yourself
  • let it out
  • self injury recovery masterpost
  • free hugs
  • coping skills & distractions
  • make a comfort box

CLOTHING;

  • 1000+ reference

BACKGROUNDS;

  • nature/scenery
  • literally everything
  • a little from everything
  • tile/repeating/pattern background
  • gradient
  • halloween

PIXELS;

  • cool pixel blogs (1) (2) (3) (4) (5)
  • christmas
  • halloween

HTML;

  • make a theme tutorial

FUCKING HELPFUL THANKS FOR SAVING MY LIFE

maxeirons: “ iv. sideways; by maxeirons ↳ static preview | code Features: “ 500 px posts 520x200 px header four custom links optional captions and reblog button ” Please like/reblog this post if you are using this theme! ”

maxeirons:

iv. sideways; by maxeirons

     ↳    static preview | code

   Features:

500 px posts
520x200 px header
four custom links
optional captions and reblog button

Please like/reblog this post if you are using this theme!

maraudersmaps: “Film table #01 [Download] - [ Live Preview ] “ • Click on the poster to see the film’s info. • Film posters: 180 x 257px • Star rating from zero to five (it includes half filled stars) • Important:• How to install • How to add a new...

maraudersmaps:

Film table #01
[Download] - [ Live Preview ]

THEME ♥