theflow 2.0 theme tips and tricks @theflow-ideas-blog - Tumblr Blog

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!

Download theme - View demo site

#Free tumblr theme #theflowtheme theme #tumblr theme #free themes

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

#tips and tricks

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

#tips and tricks

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).

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.

#installing and updates

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.

#backgrounds and color

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.

#backgrounds and color

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.

#backgrounds and color

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.

#backgrounds and color

Using the header controls

With the new release of theflow 2.0 you now get more control over the header sections layout.

Header styles

Four different header styles are available to use. Remember to turn off any header styles you are not using; this will stop any conflicts and ensures the header you are expecting to see is in place.

1. Header Full Width – Places the logo and navigation in a straight line positioned to the top left corner of your page.

2. Header Center Aligned – The logo is centered with the navigation sits below it. This is the best option for those of you using an image logo; it also looks great with text logos.

3. Header left Aligned – Always sits in line with the left hand side of your posts. If the ‘Columns Full Width Mode’ (See post settings) is on it will adjust itself to always stay aligned.

4. Even though only three header style options are shown in the control panel by not selecting a header style the default header is applied.

Full width header

Center aligned header

Left aligned header

Default header

#header section

Hide header background color

One of the new features is the ability to hide the background color from the header section. This allows your logo and navigation bar to sit on top of either a background image or color.

This helps to remove some of the structural look to the page. Make sure your logo and navigation colors contrast with the background image/color so they can be easily seen.

#header section

Header fonts

Five header fonts are available to apply to your Tumblr site. The header styles use the Cufon font method to ensure the font always looks correct even on systems that do not natively support that font.

To ensure the site is quick to load it is important that you only have one header font switched on at any time. If the font you have switched on is not showing it is usually because you have also another header font switched on that is overriding it, again make sure only one font is selected at a time.

For consistency the header font style you use will also be applied to headers used in text posts, link posts and headers used in the ‘Show me more’ section.

You are not limited to the five header fonts, if do not select a header font the page will use either the main Tumblr font or one of the main text fonts (see the Main text fonts post).

League Gothic

Chunk Five

Lobster

Blackout

Linden Hill

#fonts

Header font drop shadow

To add interest to your logo you can also add a drop shadow effect. By selecting this option the drop shadow is applied adding depth to all text logos.

#fonts

Main text fonts

In addition to the Tumblr Theme Fonts you can also choose from one of four additional main text fonts.

If one of these is selected it will override the Theme Fonts as your main font. If you do not select a header font it will also be used in your logo, text, link post titles and ‘Show me more’ titles.

As with the header fonts only select one at a time for quick downloading and to ensure the correct font always shows.

#fonts

Columns

In theflows settings are six options that work together to allow you to create a different layout at the flick of switch.

Version 2.0 of theflow comes with 3 different column widths: small, medium and large. We have moved away from defining how many columns appear as another new feature ‘Full Width Mode’ means the amount of columns shown is dependent on how wide your browser window is.

#columns and infinite scroll

How columns full width mode works

When switched on this feature will automatically reflow your posts so they always fill the available space in your browsers window. If you resize the browser the page will recalculate what space is available and uses an animated process to reposition all posts.

Full Width Mode has a minimum starting width. For small posts this is four columns, for medium it is three columns and for large two columns. It is also the width of the image gallery (if turned on). Full width mode will go no smaller than this. Full width mode has no maximum width, it just keeps expanding.

Without Full Width Mode being switched on your posts will center align themselves.

It is advisable to set your maximum number of posts to 15 when using Full Width Mode.

Full width mode on

Full width mode off

#columns and infinite scroll

Trending Blogs

Recently Viewed Blogs

theflow 2.0 theme tips and tricks