Story Template #1 - Basic Dark
Content Rating: GA
Published: 2011-01-06 23:52:01
Tags: layout, template, story



Summary:
A basic dark layout for regular story entries.

Author´s Notes and Disclaimers:
As with all my templates, this is free for anyone to use or modify for their own work.
Chapter 3
| Previous Chapter | Next Chapter


This template uses only the CSS styles of the page to create a basic layout for stories.

It's a very simple style that changes only the styles applied to the body HTML tag and the MainBlock default style to create a black background for the overall page; while the actual block where your story goes is given a slightly lighter background color, and the font for everything is changed to white.

To use this style, copy and paste the following into the Styles block for an entry:

body { background-color:#000000; }

.MainBlock { background-color:#404040; 
color:#FFFFFF;
margin-left:50px;
margin-right:50px;
padding:10px;
}
Suggestions for editing this style:
  • You can change the background color of the sides by changing the "background-color:" value in the body style.
  • Likewise, you can change the background color of the box where the text is by changing the "background-color:" value on the .MainBlock style.
  • Want an image for your background instead of a solid color? All you need to do is replace the "background-color:" style with "background-image:url(LINK TO YOUR IMAGE HERE);"
  • The text color can be changed by putting a different value for the "color:" style in the .MainBlock style.

  • You might notice some of these styles showing up in the Style Browser, so I hope between that and my additional explanations here it will help you craft custom layouts that meet your needs. Thanks for dropping by, feel free to drop me a line via comments, email, or the forums if you have any questions!
    Score It:

    (1 = lowest, 5= highest)
    Chapter 3
    | Previous Chapter | Next Chapter
    Report Abuse