riverbellthemes

[riverbellthemes]

reusing an old url

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

[riverbellthemes]

League Mono

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

[riverbellthemes]

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 ]

[riverbellthemes]

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

[riverbellthemes]

Responsive Filterable And Draggable Grid System - Muuri

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

[riverbellthemes]

2017 Trendy Google Fonts Combinations

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

[riverbellthemes]

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

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

[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 + code

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!

[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 + code

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!

[riverbellthemes]

jQuery Plugin For Auto Grow Of Textarea On Typing - autoresize

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

Demo

Download

[riverbellthemes]

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

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

Demo

Download

[riverbellthemes]

Tutorial: Color Theory for Themes

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?

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?

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.

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

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:

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

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.

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. 

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.

[riverbellthemes]

Test fonts online with Typecast

Test how Google Fonts look together with Font Pair

The Psychology of Fonts

The Psychology of Color in Logo Design

Making font combinations that work

Practical Typography

Color pickers and color palette generators

Pattern libraries: subtlepatterns | thepatternlibrary 

Simple Sharing Buttons

Image hosts: eky.hk | postimage | imgur | tinypic | screenshot.net | pasteboard 

Test if your website is responsive

50 Beautiful Minimalist Website Designs for Inspiration

Websites with stock photos that are actually pretty: pexels | pixabay |lifeofpix | splitshire | placeimg/ | stocksnap.io | unsplash | gratisography | adobe stock | MORE

[riverbellthemes]

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.

[riverbellthemes]

An alternative to font-awesome

icons other than font-awesome?  yep - they do exist - and here is a particularly lovely alternative.  vector linear icons ( from linearicons.com ).  the icons are ‘lighter’ in appearance than font-awesome and would be great for more minimalist style themes.

let’s be honest, the fact that they have a sun and moon linear icon ( as well as all of the standard ones you might like to use - home/mail/arrows/etc. ) they also have a poop icon - so i was sold…

how to use – ( you can use SVG or font versions, font works just fine on tumblr and can by styled with your usual css! )

Icon Font

if you want to use icon fonts, paste the following link to your HTML’s <head>:

<link rel=“stylesheet” href=“https://cdn.linearicons.com/free/1.0.0/icon-font.min.css”>

to insert the icon;

<span class=“lnr lnr-poop”></span>

refer to the cheat sheet for a list of all available icons.

[ note// remember to retype the quotation marks if copy/pasting the links from here or it won’t work! ]

more examples…

[riverbellthemes]

Un-nest tumblr captions, a plugin by @magnusthemes​ & @neothm​

A.K.A theme-makers coming together to save each other’s days. As we realised most of us had trouble with the parsing (or lack thereof,) of tumblr’s captions, we came up with a solution to “un-nest” them from their typical blockquotes pilling up inside one another, and therefore coded a light (1.7 KB) plugin able to separate them neatly into their own parts.

Demo | Download the minified code

Or you can play around with it on Codepen.

Usage and options under the cut!

Keep reading