Logo

handcrafted code.

Unique themes

Each theme is carefully crafted by hand to suit your every need.

Explore themes

Nerdy blog

Great posts about coding, design and user experience.

reusing an old url

cyantists:

this is a very niche requirement but if you’ve ever moved blogs and are using your previous url this is a simple way to make your url redirect only for posts that are on your old blog*

1. paste this before </head> in the code of your new blog

{block:PermalinkPage}<script>$(document).ready(function(){
 var url = window.location.pathname;
 var urlno = url.split('/').join('').replace('post', '');
 var postid = parseInt(urlno, 10);
 if (postid < 000000000000) {
   window.location.replace('http://{Name}.tumblr.com' + location.pathname);   }
});</script>{/block:PermalinkPage}

2. on your old blog, go to the very last post you made and copy the post id (i.e. the number after /post/ in the url), increase this number by 1 and paste it where the long number is in the code above

*e.g. if i made a new blog with the url cyantists and this one became cyantists-archive, I would want all posts linked to this blog to come here rather than a ‘not found’ page on my new blog. this script would ensure that happens only with these posts and not any posts on the new cyantists blog.

if you want to see an example of this in action please message me

decodering:

League Mono

Free typeface for coders by Tyler Finck. Five weights, open source, monospace.

decodering:

Brutalist Framework

An open source framework for the brutalist web design trend.

Built by Brad Fogelstrom.

Brutalist web design is the anti-conventional approach to proper, modern web design principles. In essence, it harkens back to the days of a more primitive web.

[ github ]

hailthehelpful:
“ “ A big issue when it comes to accessibility in the RPC seems to be a lack of self-awareness. Help blogs, indies and writes blogs alike can all reblog a funny post about our font sizes, post sizes and icons progressively getting...

hailthehelpful:

A big issue when it comes to accessibility in the RPC seems to be a lack of self-awareness. Help blogs, indies and writes blogs alike can all reblog a funny post about our font sizes, post sizes and icons progressively getting smaller, but they can’t recognize when their own themes are suffering the same fate. 

To try and fix this disconnect, I’ve whipped up a page that acts as a live guide meant to help everyone become a bit more self-aware and recognize when a theme is inaccessible. On the page, you can compare what you should do to what you shouldn’t do when making and customizing themes.

If you’re willing to make a change and work toward the community being a more inclusive place, spread the word to your friends and give this post a reblog. If accessibility isn’t your aesthetic, just keep it moving. This post isn’t hurting anyone by offering help to those who need it and getting upset over people openly talking about the importance of accessibility is, well, ableist. 

So, let’s all work towards a more inclusive 2017!

CLICK HERE TO GO TO THE PAGE

Responsive Filterable And Draggable Grid System - Muuri

amazing-jquery-plugins:

Muuri.js is a powerful jQuery plugin used to generate a responsive, dynamic, animated, sortable, filterable grid layout for your modern web projects.

Demo

Download

image

decodering:

2017 Trendy Google Fonts Combinations

5 bright and modern pairings of free fonts, available via Google Fonts

Lightweight Masonry-like Grid Plugin For jQuery - grid.js

amazing-jquery-plugins:

Yet another ultra light weight (4.3kb) jQuery plugin for generating responsive Masonry-like layout that displays your cells in a grid in a surely nice way.

Demo

Download

image
riverbellthemes:
“Theme: Alcor [revamp] by Riverbell themes
A very versitile theme with a fixed sidebar and two post widths in two different layouts. Don’t forget to like or reblog if you are/plan to use this theme! ♥
“ver 2.0.0
» preview +...

riverbellthemes:

Theme: Alcor [revamp] by Riverbell themes

A very versitile theme with a fixed sidebar and two post widths in two different layouts. Don’t forget to like or reblog if you are/plan to use this theme! ♥

Features

  • 250/400px posts, single column or multiple columns (as many as the browser window fits)
  • 400px wide and 100% tall sidebar
  • Built in pop up boxes for about section, links and ask box* Search bar
  • 10 custom links and page links
  • Option to make background/sidebar image cover or pattern. The background can also be just one picture in either top or bottom right corner
  • Optional infinite scrolling
  • Option to hide captions
  • Optional grayscale images (will regain color when hovered upon)
  • Optional hide tags on permalink page
  • Light or dark reblog + like buttons
  • Three audio post player colours
  • Custom fonts from Google fonts
  • Social icons 

Rules

Do not steal, redistribute, remove credit or claim as your own. Alterations for personal use are ok!

Notes

Instructions for Google fonts and social icons are available in the live preview/theme documentation. Be sure to read those before asking questions!

Theme: Alcor [revamp] by Riverbell themes
A very versitile theme with a fixed sidebar and two post widths in two different layouts. Don’t forget to like or reblog if you are/plan to use this theme! ♥
“ver 2.0.0
» preview + code”
Features
• 250/400px...

Theme: Alcor [revamp] by Riverbell themes

A very versitile theme with a fixed sidebar and two post widths in two different layouts. Don’t forget to like or reblog if you are/plan to use this theme! ♥

Features

  • 250/400px posts, single column or multiple columns (as many as the browser window fits)
  • 400px wide and 100% tall sidebar
  • Built in pop up boxes for about section, links and ask box* Search bar
  • 10 custom links and page links
  • Option to make background/sidebar image cover or pattern. The background can also be just one picture in either top or bottom right corner
  • Optional infinite scrolling
  • Option to hide captions
  • Optional grayscale images (will regain color when hovered upon)
  • Optional hide tags on permalink page
  • Light or dark reblog + like buttons
  • Three audio post player colours
  • Custom fonts from Google fonts
  • Social icons 

Rules

Do not steal, redistribute, remove credit or claim as your own. Alterations for personal use are ok!

Notes

Instructions for Google fonts and social icons are available in the live preview/theme documentation. Be sure to read those before asking questions!

jQuery Plugin For Auto Grow Of Textarea On Typing - autoresize

amazing-jquery-plugins:

Just another jQuery plugin for auto scaling textareas that dynamically adjust the height of the normal textarea element to fit its content.

Demo

Download

image

Minimalist Multi-line Text Truncation Plugin For jQuery - trunc.js

amazing-jquery-plugins:

The simplest jQuery based text truncation plugin which truncates text to a specific number of characters with ellipsis.

Demo

Download

image

Tutorial: Color Theory for Themes

onlytalia:

I am an artist, I whisper to myself while editing my theme. No, I don’t really code. I’m amazed by the people who speak the language — I have only a rudimentary understanding of it. I can read and understand what’s there, but I can’t write it myself.

The best themes, however, can be destroyed by poor color choices. My background in art often informs how I color my themes, and it is always careful.

So with hopes of imparting some knowledge as to how you can use color theory to make any theme visually appealing, let’s begin. This only scratches the bare surface of color theory. For an introduction, here’s a link to the beginning of a series on Color Theory for Designers. Part 2 in particular deals with a lot of what I’m talking about.

What Makes a Good Theme?

  • Legibility
  • Ease of Access
  • Organization
  • Visual Appeal

These four things boil down to what I think make a good theme. Visual appeal, though, affects the other three, particularly legibility.

But we’re talking about color, right? 

Problem: Using Pure Hues as a Dominant Color

What are pure hues?

image

When picking a color, it’s going to be the top right hand color. Pure red. Pure blue. These colors are vibrant and loud and quite beautiful — when handled correctly. Pure hues are best utilized as accents with tones dominating the work.

Why?

image

Primary colors are so abused. Most traditional painters worth their salt will tell you that they rarely use color straight from the tube. They always mix these into values. Pure hues dominate everything they touch. Some artists wield these well (Hi, Mondrian) but many would not recommend working primarily with pure hues.

But Why Use Tones?

Tones (hue + gray) are beautiful. Most would think they seem muddy — but when well mixed, they can lend a great foundation for a theme. 

Let’s look at my current theme. Originally, the background was white and gray, but it felt too empty to me.

image

At first glance, it looks almost brown. It’s actually a violet.

image

I picked this color from the artwork I intended to use, after some adjustments. I wanted the art to be the focal point. A nice neutral tone is easy to look at and doesn’t draw too much attention to itself.

Another theme of mine:

image

Here, the colors are more saturated and closer to the pure hue. However:

image
image

Even here, I never used a pure hue. A pure red would’ve been far too harsh, even on a dark background. A you can see, they’re both similar in tone, but one less shaded and more tinted (the red) and the other is predominantly shaded (the blue).

Balancing these combinations in a theme is essential to visual appeal. An understanding of how primary, secondary, tertiary colors work together and complement one another is also vital.

image

Complementary colors are found opposite of one another on the color wheel. Blue to orange, violet to yellow, magenta to lime. That’s why we see them so much on sports teams and in advertising. Still, it is important to remember values with these.

For more on different types of Color Harmonies, read here.

Tones lend sophistication. They have nuance. They must be carefully chosen. And when it works well, you know it. Using a neutral tone allows other things on the theme to pop — accent colors (usually hues) do well here. 

image

Too many hues means you don’t know where to look. Our eyes are immediately drawn to these pure, pigmented colors, but when it’s overused, our eyes don’t know where to go. If you must use them, use them sparingly. A garnish for your theme, if you will.

If text ever makes you see double, you need to change it. This happens when contrast is too high. Let one color (or even black and white) tone down if you want to feature an accent. 

There must be balance.

Another thing we see often is this common trifecta:

Black, White & Pure Hue

While less offensive than overusing a pure hue, using black, white and a pure hue can also be painful. Ever try to read lime green text on a black background? Black and white themes are all well and good — they can be sleek and attractive — but beware giving a pure hue equal weight in such a theme.

The moral of the story for theme makers, editors and artists:

Don’t be afraid to get muddy. Explore neutrals and tones. Push yourself beyond the instinct to use pure hue on everything. Play with color balance and harmonies. You won’t always get a look you like, but you will learn to wield color responsibly.

Don’t know where to start? Take a look a palettes from COLOURlovers.

These are not hard and fast rules, but hopefully it will help you take more risks with your theme color choices a palette that is most pleasing.

New theme! The theme blog now has a new theme and a new theme page! Some old themes have been retired and in time some of them will be revamped.

New theme!

The theme blog now has a new theme and a new theme page! Some old themes have been retired and in time some of them will be revamped.