Full size preview
Shades of Grey Layout- right click save

About the Layout

Note: Internet Explorer users will not see the text shadows, box shadows, but minus these small differences the layout has been tested and works in Firefox, Safari, and Internet Explorer 6.0 and above.

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.
• Layouts have a clean design in order to allow for the most customization and not overwhelm the content.
• Credits for the images are included on the layout.

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Image and Font Credits

The coins and coffee beans pictures are from www.publicdomainpictures.net. The coffee cup picture are from http://www.freepixels.com. The beach picture is courtesy Photos8.com (http://www.photos8.com). The social networking icons are from this pack and are used according to the terms of use.

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Image and Font Credits

The images are either ones I created or are from NASA. According to the NASA terms of use images may be used for websites. The social networking icons are from this pack and are used according to the terms of use.

Download PSD

About the Layout

Terms of Use

• This layout may be used for personal noncommercial use in accordance with the terms listed below.
• Please provide a link back to LiterarySpring.com. Do not claim credit for the layout.
• Do not distribute this layout without my express written consent.
• Do not hotlink.
• The layout may not be used for a pornographic website, a website that defames or libels an individual or group, or a “hate” website that promotes hatred based on race, ethnicity, religion, sexual orientation, country of origin, or physical or mental handicaps.

Image and Font Credits

The Macbeth picture is a public domain picture. The social networking icons are from this pack and are used according to the terms of use.

Tumblr is a microblogging platform that is excellent for short posts. Just as television has not displaced listening to music, Tumblr does not displace the need for WordPress or other blogging platforms, but for some types of posts it is the better choice.

It is Free

While you can pay for custom themes or extras such as promoting your blog, Tumblr can be fully utilized for free.

It is Easy

For many users the biggest advantages of Tumblr is its ease-of-use. There are a wide variety of free themes most of which allow for some customization. There are also a variety of apps along with the ability to post by email or phone making it easy to update your Tumblr even when you are away from your computer. The Tumblr user interface is simple. There are seven buttons with one for each type of post. The buttons are logically labeled in non-technical language and the rules are clear. Tumblr also includes an optimized layout for viewing on a mobile device. Unlike many sites, Tumblr makes it easy to delete your blog.

There are numerous free Tumblr themes. Choosing and customizing themes is easy. The customization options for themes varies radically. If you are using a free theme it is good to check the customization options as well as the look of the theme. The Theme Customization options are listed under Appearance.

Tumblr allows a user to create multiple Tumblr blogs under the same account. Thus, you can create a blog for your photography, one for your love of reading, and one for sharing silly stories about your pet.

Just a Quick Post…

Tumblr is particularly suited for the times when Twitter is not enough, but WordPress, Moveable Type, or another full blogging platform are more than you need. Whether it is the link you wanted to share, but which you also wanted to include your thoughts beyond the Twitter character limit, the one picture or texture you wanted to post, the long quote you wanted to share, or the video you just posted on YouTube, Tumblr provides a good platform.

Tumblr also allows for pages separate from posts. Many layouts automatically include these pages in the menu. These are good for “About” pages and for providing more information about the subject of the blog.

The Social Side

One of the challenges of having a blog is getting people to visit it. Tumblr makes it easy to “Like” a post or reblog a post. Following a blog only requires clicking the Follow button. The posts will then appear in a feed. As with Twitter, there is a search function to find posts and others who have similar interests. You can promote your blog for free by being recommended or you can pay to have your blog featured in the Directory.

The Customizations for the social side of Tumblr can be found under “Community” and “Advanced”. Tumblr has good integration with Twitter. Your Tweets can be imported into Tulmblr and you can have send your Tumblr posts to Twitter. Tumblr also has Facebook integration. Tumblr includes several additional options for promoting your Tumblr blog and RSS customization options.

Tumblr allows for group blogging with multiple Tumblr users able to submit posts which can them be approved or denied.

Can I have some privacy, please?

Tumblr is primarily intended for public posts and your primarily blog is public. However, you can create a password protected blog using the same account.

Category Options and Rules

All categories include options for tags, publication date in case you do not want to publish immediately or wish to initially publish privately for editing purposes, the option for a custom URL, and a box to check if you wish to allow Photo replies.

A Text post is similar in format to a blog post with an optional title and the content of the post. A photo post gives you the ability to upload a photo and include an optional caption. A quote post has separate boxes for the quote and the source, thus, easily allowing quotes to be formatted differently than regular text. A link post can include just the URL or also include a title and caption. A chat post works similar to a quote post in that it allows a chat to be formatted differently than a regular text post. The audio post is similar to the photo post with the option to upload an audio file or use an externally hosted audio file and an optional description. Audio files have extra rules and only allow MP3s, one audio post per day, and have a limit of 10 MB. Video posts can be embedded from external sources (ie YouTube) in which case you simply paste the Embed tag. There is also room for an optional caption. Alternately, you can upload five minutes worth of video a day with each file being less than 100 MB.

Advanced Use

While Tumblr is excellent for those with limited or no design and programming knowledge, it also has enough options for those who are more comfortable with design.

Tumblr blogs can easily be embedded in your blog simply by copying and pasting the available code. This allows for additional control over the layout. It also allows you to keep a blog on Tumblr for the social networking and other advantages while easily having it integrate into your website. Tumblr offers additional API information.

Helpful Links

• Tumblr Help
• Creating a Custom HTML Theme
• API
• Themes
• Content Policy
• Privacy Policy

My Tumblr Blog Knot of Light is focused mobile device resources particularly app reviews and iPhone wallpapers.

Full size preview
Download Scrapbook Layout- right click save

About the Layout

Note: Internet Explorer does not yet support css3. As a result Internet Explorer users will not see the text shadows, box shadows, but minus these small differences the layout has been tested and works in Firefox, Safari, and Internet Explorer 6.0 and above.

Terms of Use

This work by http://www.literaryspring.com is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Full size preview
Clean Layout with Data Table- right click save

About the Layout

Note: Internet Explorer does not yet support css3. As a result Internet Explorer users will not see the text shadows, box shadows, and the hover over the data table and upper navigation will be slightly different, but the layout has been tested with Internet Explorer 5.5 and above and still works with only these minor differences.

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.

Full size preview
Elastic CCS3 Layout- right click save (see no below)

About the Layout

Note: Internet Explorer does not yet support css3 drop shadows. Otherwise the layout works in Firefox, Chrome, Safari, and Internet Explorer 6.0 and above.

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.

Full size preview
Elastic CCS3 Layout- right click save (see no below)
Elastic CCS3 Layout with IMAGES- right click save (see note below))

About the Layout

Note: Internet Explorer does not yet support css3 gradients, drop shadows, and other components of the layout above. The first download is for a layout that will, thus, look significantly different in Internet Explorer. The second download is for a layout that uses images for gradients and, thus, the layout looks similar in Internet Explorer to the way it looks in standards compatible browsers (ie Firefox, Safari, Opera, etc)

Terms of Use

• You may use the css3 layout linked to above with attribution (http://www.literaryspring.com).
• You may use up to 80% of the css without attribution.

The CSS listed below is a slight variation of the CSS I used for the quote box in this layout. As you can see the CSS that controls even a small part of the design can become quite lengthy. When you add in the rest of the typography and structure and the CSS can look overwhelming.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
text-shadow: 2px 2px 2px #000;
background-color: #300;
border: solid 1px #333;
-moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
}

Break It Down

• CSS for the text color color: #ffc;
• CSS for the font-size: font-size: 3em;
• CSS for the font-family: font-family: Baskerville, Garamond, Palatino, Georgia, serif;
• CSS for the font-weight: font-weight: bold;
• CSS for aligning text: text-align: center;
• CSS for the text-shadow: text-shadow: 2px 2px 2px #000;
• CSS for the background color for the paragraph: background-color: #300;
• CSS for the border around the paragraph: border: solid 1px #333;
• CSS for the text shadow: text-shadow: 2px 2px 2px #000;
• CSS for the shadow around the paragraph box:
  -moz-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
-webkit-box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
box-shadow: 5px 5px 0 rgba(72, 72, 72, .5);
• CSS for making rounded edges around the paragraph box
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
• Code for the padding between the text and the edge of the box padding: 5px

Only Use the CCS You Really Need

Taking Out the CSS3

If you need to design a site that looks the same in all browsers you need to take out the CSS3 which is not yet universally supported most notably by Internet Explorer. Below is the CSS without the CSS3. While CSS3 has some wonderful uses the fact it exists does not mean one always needs to use it. Look at your design and decide whether it really does need a drop shadow for the box, a shadow for the text, and rounded corners. Having made quote boxes before in some case the CSS3 helps. In other cases a drop shadow can easily be eliminated without sacrificing clarity and for some designs sharper edges look better than round ones.

p.quotebox {
color: #ffc;
font-size: 3em;
font-family: Baskerville, Garamond, Palatino, Georgia, serif;
font-weight: bold;
text-align: center;
background-color: #300;
border: solid 1px #333;
padding: 5px;
}

Reevaluate the Necessities

• Does the font need to be bold or is the font you are using thick enough that you can remove font-weight: bold
• Should the text be aligned to the center? Sometimes in narrow columns left aligned text is better and, thus, you can leave out text-align: center.
• If all you want is a drop quote you do not need background-color: #300; or border: solid 1px #333;
• For the box shadow in the original code, rgba was used in order to adjust opacity. If you prefer hex and are not adjusting opacity then use hex.

In Conclusion: Other Methods to Handle CSS

Often the best design or the best design for an element is complicated and takes a substantial amount of CSS to accomplish. There are a lot of websites and it pays (often literally) to stand out. However, especially when you are starting out vast amounts of CSS can be intimidating. Comments in the CSS file help and the more experience you have the more you can easily find the specific CSS you needed. Clearly laid out CSS also helps. However, even with these additional tricks for both the design itself and your own sanity in dealing with the CSS it is a good idea to break down the CSS you have and only use what you actually need.