theme 101
- theme 101 part 1 - basic html, styling body, styling and positioning posts
- theme 101 part 2 - the padding function, the margin function, permalinks, tags and styling
- theme 101 part 3 - styling general links, styling bold and italic, styling blockquotes, images
- theme 101 part 4 - styling sidebar, navigation links, headings and pagination
- theme 101 part 5 - index and permalink pages, float, post info, styling asks and quotes.
- theme 101 part 6 - adding images, backgrounds, sidebar graphics, etc.
- theme 101 part 7 - container theme, scrollbar, overflow, hover effects.
coding and theme tutorials
installation;
quick tips;
general theme styling;
- how to center a container theme
- how to make your container adjust to page/screen height
- how to use ‘pseudo-elements’ in your theme for ::first letter, ::before, ::after styling of titles etc!
- how to add a hover updates/description
- how to add hover effects to any theme element
- adding and styling <hr> / horizontal lines in themes
- how to add a search box
- how to add borders to theme objects, e.g. curved blockquotes etc.
- how to add fancy borders to theme objects e.g. images, gradients etc.
- how to change post sizes to something other than the tumblr defaults
- how to ‘tilt’ a theme element ( 3D perspective )
- how to make a ‘shaped’ ( circular or teardrop ) portrait icon with css
- how to use ‘calc’ to position and resize fonts and theme objects depending on page size
- how to center theme elements horizontally and vertically
custom fonts and text effects;
- how to add custom fonts to your theme - google fonts
- how to add a ‘glow’ or ‘shadow’ effect to text on your blog
- how to add font-awesome icons to your theme
- an alternative to font-awesome – linear icons
editing links, tags and permalinks;
- how to style your links in a vertical column or horizontal list
- how to make ‘scattered’ links
- how to add ‘hover links’ ( using symbols and tooltips )
- how to rotate/spin links ( or other objects )
- how to add ‘images’ as links
- how to change your ‘like/reblog/via/source’ etc to hover symbols
- how to make internal links/menus/internal navigation on a page
- how to make ‘blurred’ links
- how to add a ‘gradient’ effect to text, titles or links
- how to make hover tags and slide down hover tags
- how to make a sliding background on hover links
- how to move your permalinks (date, reblog, via, source + tags) to the side of your posts
- how to animate theme objects using keyframe animations
- how to make your ‘hashtag’ symbol a different colour from your tags
- how to add post notes (likes & reblogs) to your permalink pages
popups;
- how to add ‘popups’ - a detailed tutorial
- how to style popups - adding link styles and info etc.
- how to style popups - styling & moving the text/images/title within a popup.
- how to style popups - adding images/icons to make a verses or relationships popup.
- how to insert an image as a popup link
- sliding tabs within a popup
- how to make styled titles for your pages and popups
- how to add ‘hanging’ backgrounds to your popups
theme backgrounds, images and graphics;
- theme backgrounds - how to position them
- how to make a background ‘fit’ or ‘cover’ the whole screen
- how to add a background to other parts of your theme
- how to make a container theme background ( photoshop + code )
- how to make an image ‘overlap’ a container
- greyscale images ( with colour on hover )
- greyscale fix for firefox
- how to add a portrait/icon to your theme
- how to add images/gifs/backgrounds up to 5mb in size to your theme
- adding ‘particles’ to your theme & how to add a background to particles ( orbital theme )
- adding a dust/particle background to your theme
- free tiled textures and pattern backgrounds
theme photos and photosets;
music players;
- how to style audio posts in your theme
- billyplayer & dropbox tutorial - music players for blogs…
billyplayer & kiwi6 tutorial - music players for blogs… OUTDATED- flashplayer & dropbox - single track music player
simicolon player - no flash music player ( love this! ) NO LONGER AVAILABLE
other and misc;
- basic html + theme stuff - adding links/images/music players, changing text styles etc.
- adding ‘particles’ to your theme & how to add a background to particles ( orbital theme )
- adding a dust/particle background to your theme
- the lazy coders guide
- how to get a url to unsert images/gifs into custom pages or custom themes
- how to add images/gifs up to 5mb to your theme
- how to make a static preview for your theme
- theme colour options - hex/rgba/gradients and opacity
- how to add scrolling/marquee text
- how to make a page for your asks/submit
- how to add switches to your themes for customisation
- how to remove the ‘via’ and ‘source’ default from posts
- how to make sure ’<pre>’ text doesn’t overflow your post box
- how to animate theme objects using keyframe animations
- how to add custom small cursors to your theme
- how to remove tumblr’s default ‘via’ and ‘source’ links
- how to remove the ‘reblog’ link from pages
- how to make a text box which reveals different text on hover
- how to make a ‘fade in on click’ section
- how to add an affiliates section
- how to reverse/mirror text or reverse text direction
- how to style <strike> and <del> text
- how to animate posts or theme objects on scroll
- how to use a ‘span’ to change the style of text within a div
- how to hide post captions on your index page
- how to add meta tags or customisation options to your theme
other tumblr tutorials
my graphics and edits
photoshop resources and tutorials
icons
- icon borders - .png files to be dragged and dropped on top of your icons - no fuss
- more icon borders and overlays
gif pack overlays
- how to overlay a gif onto an image ( from a gif pack! )
- fire/sparkles gif pack
- HUD/tech gif pack #1
- HUD/tech gif pack #2
- HUD/tech gif pack #3
- HUD/tech gif pack #4
- powers gif pack
- dust/particles gif pack
- slow-motion flowers/blooms gif pack
- hearts and arrows gif pack
- mini squiggle/paint gif pack
- stars/space gif pack
- ink drops gif pack
- watercolor/ink gif pack
- ink/paint gif pack
- animated/comic style clouds/smoke
- animated/comic style flames/fire
- molten gif pack
- tech / particle gif pack
- smoke / fog gif pack
textures and psds
icon tutorials
- bloody huge icon tutorial
- making pattern overlays for icons and graphics
- creating custom shape icons
- creating custom shape gif icons
- making circular icons
- icons with ‘hanging’ objects or personalisation
other graphic tutorials
- how to overlay a gif onto an image ( from a gif pack! )
- how to make a container theme background ( photoshop + code )
- creating a ‘torn’ image effect
- making ‘skull’ effect Halloween icons/graphics
- another gif tutorial
- making gif overlays on graphics
- making a transparent ‘signature’ graphic
- making promo graphics
- changing eye colour on your graphics
- changing hair colour on your graphics
- FREE graphic and image editing software
reblogged tutorials and resources
+ coding [ + reblogged resources ]
+ fonts [ + reblogged resources ]
+ photoshop [ + reblogged resources ]
+ other [ + reblogged resources ]