Progressive

A super awesome follower let me know that Tumblr actually added some undocumented features to allow theme makers to unnest reblogs without using Javascript. The post is here if you would like to check out how to implement this for your own themes. Since many of you have asked me to implement this, I’m rolling out out globally, it should hit your dashboards as soon as Tumblr accepts the changes.

Since this is a fairly major change, I won’t be adding an option to choose if you prefer the old style as it will be too hard for me to maintain both versions in the future, but if you prefer the old style you can message me and I’ll send you a link to the code with the old style of reblogs. There may be some bugs as the changes are pretty drastic, please let me know if you find any and I will try fix it right away.

For the logo, really small is a pretty relative term :P Its set to be 5 times the base font size of the browser, so if you are blind, it’s possible that you have set it to a larger font and will see it larger. If you would like to adjust the size, I can give you a code snippet that will increase it if you let me know what dimensions you would prefer. It’s a bit odd that it’s not showing up, if you send a screenshot of how you set it in the admin panel I can try identify what’s happening.

First, go to Edit Appearance and turn on ask. It should automatically show up after that, if not, add a page!

http://progressivetheme.tumblr.com/post/145229210967/hi-is-there-any-way-to-add-links-to-the-theme-i

try add an additional menu item to make the menu show up! 

The way it’s done on the theme is just a skin for tumblr’s own search feature! I don’t have any implementation details on how it works since Tumblr staff wrote that logic. The theme search is functional (i’ve tested it on this blog for keywords like accessibility, color, etc, and it’s turned up results), it’s just that Tumblr’s search is notoriously bad and vague and we’re stuck with it. :( If you want people to find certain content easily, I suggest linking to a specific tag page, like /tagged/art!  Sorry I couldn’t be more help. :( I may rewrite it so that it searches blogs for tags instead.

See this theme in action  |  Install this theme

Progressive is a Tumblr theme built with the idea of “progressive enhancement” in mind, a web development concept that promotes the idea that everyone should be able to access basic content and functionality, regardless of what device you are using.  I noticed that there were a lot of people concerned about accessibility on Tumblr, but very few themes that actually implemented accessibility best practices, so this is my attempt to make a meaningful contribution! Below is the list of features this theme offers:

One column theme

Responsive (looks good on all screen sizes)

Custom avatar, upload any size and it will crop to fit

Choice between custom gradient background or custom image background, see this post for some color theme inspiration

Able to adjust post/header background transparency

Everything is a custom color

Custom google fonts available

Google Analytics and Disqus support

Search (tags only or default search)

Support for all post types

Support for localization

Scroll between pages with the J (previous) and K (next) keys 

Here are some options I came up up with for color schemes! Obviously, you are free to choose your own, I just wanted to show you that beautiful color schemes can still have all the main text be WCAG Compliant with appropriate levels of contrast for partially sighted users. :)

#1 Pastel Color Scheme (Cream, Pink and Mint)

Background Gradient Top: #f8edd1

Background Gradient Middle: #d88a8a

Background Gradient Bottom: #c5cfc6

Header and Footer Text Color: #474843

Header and Footer Background Color: #ffffff

Post Text Color: #474843

Post Accent Text Color: #707065

Post Background Color: #ffffff

Decoration Color: #d88a8a

Content Background Opacity: 1

#2 Bright Color Scheme (Navy, Green and Pink)

Background Gradient Top: #113f8c

Background Gradient Middle: #61ae24

Background Gradient Bottom: #d70060

Header and Footer Text Color: #474843

Header and Footer Background Color: #ffffff

Post Text Color: #333333

Post Accent Text Color: #08295e

Post Background Color: #ffffff

Decoration Color: #d70060

Content Background Opacity: 0.85

#3 Night Color Scheme (Purple, Pink, Blue)

Background Gradient Top: #180529

Background Gradient Middle: #350c3c

Background Gradient Bottom: #143866

Header and Footer Text Color: #ffffff

Header and Footer Background Color: #ffffff

Post Text Color: #ffffff

Post Accent Text Color: #ede5f3

Post Background Color: #ffffff

Decoration Color: #8824df

Content Background Opacity: 0.05

Below is a list of all the options in the theme and how to configure them:

Logo

This shows up as a circular image on the top of the page. If you don’t want it to show up, don’t include an image.

Background Image

Upload a background image here if you wish. If you do not upload a background image, the gradient options will be used instead, you can have only one or the other.

Background Gradient

Top, Middle and Bottom refer to the part of the page the color will be on. The colors will automatically be blended together as a gradient for your background, or, you could choose three identical colors for a flat background.

Header and Footer Colors

Refers to the text and background colors of the header (banner at the top) and footer (optional section with a line of text and or social media buttons)

Post Text Color

Refers to the main text color for all the body copy on your posts.

Post Accent Text Color

The color for secondary elements in the post, such as the title, tags, dates, and etc.

Post Background Color

Color for the box behind the post.

Decoration Color

Color for all the decorations, including the underline color, divider color, search bar color

Apply Header and Footer Background Color

You might want your post to have a background but not the header and footer. Turn it off here!

Enable Search

Turning on this option will show a search bar in the header.

Set Search to Search Tags

If you have banned search engines from indexing your blog, the regular search will not work! Turn this option to have the search search your blogs tags instead of relying on Tumblr default search.

Enable Social Media

Turning this on will show your social media icons in the footer.

Enable Footer

Turning this on will show the footer.

Google Fonts

Type the name of the Google fonts as presented on the Google Fonts site, eg. “Open Sans”, “Lato”, “Raleway”. The headline font will be used for the site title and post titles, and the body font will be used everywhere else.

Content Background Opacity

This is a value ranging from 0 - 1, with 0 being completely transparent and 1 being completely opaque. This toggles all the backgrounds on your posts/footer/header.

Social Media URLS

Enter a URL here to have a social media icon show up in your footer. All URLs should begin with HTTP or HTTPS.

Footer Text

Optional text underneath your social media icons belongs here. If you would like to credit this theme, that would be great, but it’s not required. :)

Google Analytics ID

If you want to install Google Analytics, paste your tracking ID here. It should be a line of text similar to “UA-000000-01”.

Disqus Shortcode

Hello everyone! I primarily built this Tumblr theme “Progressive” because I noticed that there were a lot of people concerned about accessibility on Tumblr, but very few themes that actually implemented accessibility best practices.

Below is a list of accessibility related features I’ve included in this theme, I hope other theme creators on Tumblr choose to implement these as well so everyone can all have a better internet experience*~*~*

“Skip to content” link so that users with screen readers can choose to skip the header text to the blog content

Uses relative font sizing (rem units), which respects the users preference while keeping a legible base-font-size (and avoids the really small font problem as seen on a lot of tumblr themes, i can’t read most people’s blogs tbh)

100% responsive, will adjust itself to look decent on any screen size.

Focus styles so that keyboard only users can easily find their position on the page.

Semantic HTML5 elements and elements with proper ARIA roles that allow for screen reader users to better navigate the page

Obvious link styling so that people can easily distinguish links in the body of a post

Default color scheme is WCAG compliant, which means that it meets the color scheme meets the  minimum contrast level to be easily viewed by most users. Even if you choose not to use this theme, I highly suggest checking to make your your color scheme works with this online tool.

Screen reader specific labels such as alt text on icons.

Implementation of the {TagsAsClasses} tag, which means that all post tags show up as CSS classes so that people who might want to block certain tags can easily do so by blocking the class element with an adblocker/some other blocking program.