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)
Keep reading

No title available

❣ Chile in a Photography ❣

PR's Tumblrdome
Sweet Seals For You, Always
d e v o n
dirt enthusiast
Mike Driver

Janaina Medeiros
Xuebing Du

titsay
AnasAbdin
Cosmic Funnies

No title available
Acquired Stardust
almost home
RMH
I'd rather be in outer space 🛸
let's talk about Bridgerton tea, my ask is open
Peter Solarz
🪼
seen from Australia

seen from Finland

seen from Spain
seen from France

seen from Australia

seen from Germany

seen from United States

seen from Finland
seen from Netherlands
seen from South Africa

seen from Russia
seen from United Kingdom
seen from United States

seen from United States

seen from Malaysia

seen from France

seen from Australia
seen from Saudi Arabia
seen from Philippines

seen from Türkiye
@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)
Keep reading
The Ultimate Guide to Becoming a Web/Front-End Developer
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
I’ll probably make another one of these for learning the LAMP stack and/or Node.js in the future, so those will most likely be very helpful as well.
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!
Preview / Code
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
check out thethemegang | thehtmlhotties | htmlheroes for more incredible themes ( ◠‿◠)♡
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:
- Please be sure to follow my rules! - If you need any help with this theme please let me know. There are a lot of options and I know that it can be confusing.
↓ 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.
please like or reblog first before you use it & keep the credits intact. enjoy! :)
just peachy~
#ffc781 #ffdcb1 #ffe7cb
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.
Slideshow from slidejs and inspiration from Reach Records.
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
let me know if there are any glitches! feedback is awesome
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.
Read More
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.
If you run into any issues or problems with the codes or tutorial provided, then message me as soon as possible. If you are using this tutorial, I’d appreciate it if you reblogged it. uwu
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.
Keep reading
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.
Keep reading
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.
SIMPLIFICA | OTAMA | CORADIUM | BARON NEUE | BROWNIE | LOT | CHOPLIN | SEQUI | KOMODA | CUTEPUNK | FARRAY | HIPSTELVETICA | HIGH TIDE | ANDERS | ORANIENBAUM | LANDSCAPE | ONTWERP | SALOME
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.
Keep reading
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>
6. Then it works! hope this tutorial helps! :)