Go extra large with theflow

Download theme - View demo site

The new update sees the introduction of double sized posts. Just tag a post with tfbigger to double the size of individual posts. Use it to highlight or just show off your posts in a larger format

The ever popular font BEBAS has been added as a header font.

Even better display logic for iPad users

Disqus has been fitted

Get your copy today, its FREE to download and will make your blog look fitter than Usain Bolt!

Get theflow 2.0

Download theme - View demo site

Developing a dark textured theme

Creating a moody theme is possible by using dark colors that are slightly adrift from each other and one bright tone to give a lift.  An example of this is Work Sucks  which this blogs colors scheme was based on.  

How to do it

We are going to apply a background texture and a background color to create the fabric like background and apply a full width header option. After installing theflow 2.0 open up the customize theme section and apply the following settings:

Color codes (hex codes)

  • Background Color = #000000
  • Highlite Color = #3D88C1
  • Highlite Hover Color = #1269AB
  • Trim Color = #141414
  • Navigation Text Color, Navigation Text Hover Color, Logo Color = #FFFFFF
  • Text Color, Navigation Hover Background Color = #747474

Creating a clean theme

Many blog owners like the clean uncluttered approach.  This works really well with fashion imagery, food and blogs where you want to keep a color theme running through it.  An example of this is the Six Forty Seven blog.

How to do it

The clean look and feel comes from removing the drop shadows and header background and using light colors with a contrasting text color. After installing theflow 2.0 open up the customize theme section and apply the following settings:

Color codes (hex codes)

  • Background Color, Navigation Text Hover Color = #FFFFFF
  • Trim Color = #F3F3F3
  • Highlite Color = #A3A3A3
  • Highlite Hover Color = #747474
  • Navigation Text Color, Navigation Hover Background Color, Logo Color, Text Color = #545454

You can download the user guide here or use the following post on this page to help you get the most from your version of theflow 2.0

Installing your theme

Installing your theme is easy to do, just follow the instructions below.

  • Go to the Theme Cloud download page and click the ‘Copy your theme code’ button. The theme code will get copied to your computers clipboard. If you’re using an iPad or old browser you’ll need to perform a manual copy (CTRL + C).
  • Login to your Tumblr dashboard then select which blog you wish to apply the theme to.
  • Select ‘Customize theme’.
  • Now press ‘Edit HTML’.
  • You might be shown some code or it may appear grey with some numbers on the left hand side. This is a Tumblr issue but we’ll get around this.
  • Click anywhere in the grey area to the right of the numbers.
  • Press and hold the ‘CTRL’ button and whilst held down press the letter ‘A’ For Mac users the ‘CTRl’ key is called the ‘Command’ key.
  • Now press the delete key, all old code will be removed.
  • Click your cursor again anywhere in the grey area to the right of the numbers.
  • Press and hold the ‘CTRL/Command’ button and whilst held down press the letter ‘V’.
  • Your new code has been pasted, now to update.
  • Press the ‘Appearance’ button followed by the ‘Save’ button.
  • To remove old settings and add the new ones press the ‘Close’ button.
  • You should be back on the dashboard page, select your blog followed by ‘Customize theme’.
  • Your themes new controls should now be available, use the following guide to make your theme totally unique.

Applying color to your theme

To enable you to make your theme unique theflow 2.0 has 9 color settings.

The colors for your theme can be set using the color picker which is activated by clicking the colored square next to the relevant setting.

The Tumblr color picker is a little clunky to use so we would suggest using Adobe’s online color tool ‘Kuler’ to create color schemes and color codes, you can find it at http://kuler.adobe.com

Kuler has a vast range of pre-made color schemes that you can use to design your Tumblr site or you can create your own. For ease of use you can copy and paste the color codes for example 970000 from the Kuler site in to your control panel.

To make your site appealing to your visitors we do not recommend using too many colors. An ideal color scheme would contain three colors with some variation of tone.

What do the different color settings do?

1. Background Color – This control will fill the pages background with color as well as the background of the ‘Show me more’ section. Please note a background image will override the background color in the main page.

2. Highlite Colour – The highlite color is applied to many areas of the web site, this helps give a consistent color scheme. These areas are:

  • Image gallery buttons
  • Like, reblog, source, lightbox, permalink and notes buttons
  • Text links
  • Show me more hover
  • Audio and link post hover

3. Highlite Hover Color – This color is used when your visitors hover their mouse over an object. The object will change from the highlite color to the highlite hover color giving positive feedback that the object should be clicked. For this reason it is a good idea to use a different color or tone to the highlite color

4. Navigation Text Color – This is the color of the main navigation text.

5. Navigation Text Hover Color – The color of the main navigation text when the mouse is hovered over it.

6. Navigation Hover Background Color - This is the color that shows behind the navigation text when the mouse is hovered over a link. It should be in contrast to the Navigation Text Hover Color. In the above example a red background is used with white text.

7. Trim Color – The Trim Color setting is used in many areas providing contrast and shape to objects on the page. It gives the background color to the following sections:

  • Header
  • Image gallery
  • All post’s
  • Footer
  • Show me more sections

8. Logo Color – If you use a text logo in the header section it can be colored using this setting.

9. Text Color – The main text areas and their accompanying headers use this color setting.

Using background image textures

In addition to the normal Tumblr controls of adding an image or a background colour you can also add two different textures. These are applied over the top of a background color.

The two textures add interest to your theme when you don’t have a background image. In general the rule of thumb is to apply a light texture to light or bright colours and the dark one to bold or deep colours. This is not always the case so experiment with them.

The background textures will alter the background colors you use so select a texture first then apply the color. Black (#000000) with the dark texture looks great as does a light grey (#f0f0f0) with the light texture, but you are not limited to these, bright and matt tones also benefit from the textures.

Remember to turn off the texture you are not using, if the dark texture is on it will over-ride the light texture.

Background image options

Once you have uploaded a background image using the background upload button you have 3 options to help format the image.

Background full width

Use this option to make your background image fill the screen from left to right. If the browser is resized the image will be resized to always touch the left and right edge of the browser window.

This option will not make the image stretch from top to bottom. The images depth will be in proportion to the images width. If your images are not very deep to begin with, you can also turn on the ‘Background Tiled’ option.

It is always advisable to use this option if you are using an image like a landscape. Remember people viewing your Tumblr site have different width browsers and screens. Switching the full width option on will mean they always see the entire image.

Background tiled

The Background Tiled option will take your image and repeat it from left to right then top to bottom. It works well with patterns and textures.

Background fixed

By applying this option your background image will sit still when your content is being scrolled. This can be used in conjunction with the other two background image options. Patterns can be a little over powering to the eye when not fixed. Large or repeated images can also benefit from being fixed.

1 2 3 4 5  Next page >

 
Close submit section
 
Close ask section
 
Close ask section

Uh Oh - The requested page is not there!

Sorry we could not find it, try visiting the home page.