Aesthemes

7x7 icons

Here are some icons I made for my theme.

They’re free to use (credit not needed)

They’re transparent

You may change the colors in ps, ms paint, pixlr etc. (Remember to save in .png or .gif format)

EDIT 09/07/15: NEW VIDEO & NEW CHANNEL! How to Learn to Code // Check it out, I hope you find it helpful!

As I’ve been playing with learning code and graphic design for a little while now, I’ve noticed my affinity for playing with website design and development. Thus, I’ve done my research and compiled an “Ultimate Plan” for how I’m going to learn the skills necessary to become a developer and find a career in this field. I am going to be learning each of these concepts in the exact order that I have organized the courses. This list was originally going to be made for myself in a Google spreadsheet, however, I decided that it would be helpful for others to access as well. Oh, and all of these courses are completely free! Enjoy! :)

Edit: I forgot to set all the links to open in a new window, so don’t forget to hold Ctrl or Command while clicking the link! :P

Step One: HTML/CSS

Tuts+ 30 Days to Learn HTML & CSS

Udemy Learn HTML5 Programming From Scratch

Codecademy HTML/CSS // Web Developer Skills: Make a Website, Make an Interactive Website

Udemy Intro to Web Development: HTML

Levelup Tuts Sass Tutorials

Step Two: Javascript

Khan Academy Intro to JS

Codecademy Javascript

Khan Academy Advanced JS: Games and Visualizations

Programmr JS Exercises, Examples, Projects

jsdares

Step Three: jQuery

Tuts+ 30 Days to Learn jQuery

Programmr jQuery Course

Codecademy jQuery

Tuts+ jQuery UI 101

Step Four: AngularJS

W3schools AngularJS Tutorial

Revillweb Learn AngularJS in 30 Minutes

Tuts+ Hands-On Angular

Programmr AngularJS

Step Five: MySQL

Udemy MySQL Database for Beginners

Tutorialspoint MySQL

Step 6: CoffeeScript (Optional, kinda…) 

Levelup Tuts Coffeescript Tutorials

Postmodern

info: All in One Page, showing a very unique blogroll / faq + ask / about / and links page, all easily customizable. All customizations on this page must be at the user’s discretion, but it has a wonderful and unique interface. Please view the preview for a full understanding of the theme!

Theme 02 by baekstel: Teardrop

세상이 다 무너져 버리고;

static preview | pastebin | freetexthost

500px posts

gradient background (choose the gradient yourself!)

keep the title short

recommended length of desc is 3 lines long

5 custom fading links with circle hover

Theme 23 - neonbike themes

Preview | Code

Features:

- 400px or 500px posts - Left or right sidebar - Up to 4 custom links - Each link comes with a dropdown menu of icons so you can choose which Icon you want to appear next to each link - Custom colors - Choose from 6 fonts: Arial, Courier, Inconsolata, Montserrat, Asap, and Fredoka One. - Custom Background Image - Stretch background option (image will stretch to fit entire window) - Hide Captions Option - Hide description option (description will be removed from sidebar) - Optional post shadows - Optional border around the entire page (seen in first image) - Option to have the post info/permalink only show up on hover - Grayscale posts option.

Notes:

↓ redirect page 01 by stratfor-d

windows-inspired redirect page that you can use when you’ve changed your url. btw you can play around with the ’window’. just click on it then drag it anywhere on the screen. lol

pink → live preview | code

blue→ live preview | code

gray → live preview | code

purple → live preview | code

credits to the owners of the backgrounds.

just peachy~

helium — preview / code

a (fansite) theme with… too many options

features:

9 post widths ranging from 300px to 540px

optional slideshow with 5 images, autoplay is optional

layout options, optional sidebar boxes, caption and tag options

infinite scrolling, manual load, or regular pagination

back to top link, search bar, fixed navigation

notes:

manual load only works if infinite scroll is checked as well

video resizing and soundcloud scripts by shythemes

The max amount of images in the slideshow is five. If you know how to add more, feel free to.

If the slideshow images are too small in height, there will be an odd white space. Either try to get images that are the same height, or select a lower slideshow height.

The schedule and members boxes must be edited manually. Forgive me.

thyme : preview one / preview two / code

an old theme of mine that I’m finally getting around to publish–hopefully it works for writing-heavy blogs, as that was my intention!

features:

10 post widths from 250px to 540px

3 custom links

optional popup with space for blurb and links (all labeled in the code)

caption display options (inline / default / hidden)

optional tags on index page, optional hover info

customizable font and font size

infinitescroll / manual load / pagination

notes:

video resizing script by @shythemes

manual load works only if ‘infinite scroll’ is selected as well

TUTORIAL: All-In-One Effect for Themes and Pages

The “tabs” or “all-in-one” effect is commonly used in All-In -One pages. Recently, I have also seen it used for themes. While trying to figure out how to replicate this effect, I couldn’t find a tutorial on tumblr, so I decided to make one.

Within this tutorial I will show you each of the codes used to create the effect (HTML, CSS, and jQuery) as well as explain how you can use them and change them. 

At the end of the tutorial there is a base code for an all-in-one theme and an explanation for how to turn it into a code for pages. 

Semi-transparent Music Player (from my Aqua Theme) :

Paste this beneath <style type=“text/css”>

Change the background-color and the margins in the “melody” tag.

Change the color of the music icon in the “reverberate” tag.

Paste this beneath <body>

Make sure your using this extension for this player.

If you don’t know how to generate your music code, go here.

CODING PAGES; a basic walkthrough by azurethemes/salazhar An anon requested I create a tutorial on coding pages, but the thing is, I cannot teach you that. Pages should be entirely your own and there are so many different styles, and there are even much more I haven’t discovered yet. Every page can be and is done differentlyThis post will just cover the basics and I will be providing links to several tutorials and websites for inspiration so you can create your own pages with your own style.

TUTORIAL » How to use the isotope javascript filter

Example 1 / Example 2 (Basic)

Difficulty:  ★ ★ ☆ ☆ ☆ Requested By: asschlinthemes Notes: This is used a lot in fanfics pages, tv schedules & network themes. Really simple once you get the hang of it!

Feel free to request a tutorial! 

I’m going to be telling you specifically how to make THIS PAGE.

I was looking for fonts recently and fell in love with many, so I figured I’d compile all my favorites. Some of them require a tweet or Facebook post to download. All credit goes to their respective makers. 

USING ICONS FROM FONT AWESOME; a tutorial by azurethemes/salazhar I’ve gotten a few asks on how I added icons on my main blog. I got them from Font Awesome and I thought I could make a tutorial on how to apply them to your blog. The difficulty depends on your knowledge on HTML and CSS, but it suggest you you should know the basics of of both. 

this is a simple tutorial on how to do custom fonts for themes (with the use of Google Fonts). 

these fonts are applicable to most of the browsers (IE, Firefox, Chrome, Safari) so it’s really helpful.

Here’s the steps on how to do it (Please read this carefully because instructions should be followed for it to work)

1. Go to this page and look for the font you like; i already compiled most of the fonts i like, if you want more options you can go to google fonts.

2. There are two links below the font title, the first one with the <link href=“…”> and the second one with the “font-family:”;“

3. Copy the first one and paste it in the html section of your theme, anywhere will do but i recommend you place it after the <head> section. ***HERE’S THE CRUCIAL PART*** when you copy the link, you can see a space between the ’<’ and the ‘link’, remove that. if you don’t it wouldn’t work properly!

4. Now for the second link, place it in the CSS portion of the code. here’s a sample of that:

#title{ font-family: 'Font Goes Here', cursive; font-weight: 100; }

this is just a sample, replace the ones inside with the second link you got and the div section you want to place the font with.

5. If you go after the <body> section you could see that if we place text in the div section, it would look different. here’s a sample:  

<div id="title">SOME TEXT HERE.</div>