Story Template #6 - Lava Flow
Content Rating: GA
Published: 2011-07-10 16:54:21
Tags: template, layout, story



Summary:
A narrow-width style for regular story type entries.

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


This template uses only the CSS styles of the page to create a basic layout for stories. I call it the "Lava Flow" style, as the basic colors I picked are supposed to be reminiscent of black lava rock and magma.
It's a simple style that changes only the styles applied to the body HTML tag, MainBlock, Summary, and Authornote default styles. It uses a large number of various border CSS styles to create the effects around the main block, summary, and author's note sections.
To use this style, copy and paste the following into the Styles block for an entry:
body { background-color:#202020; }

.MainBlock { background-color:#c01600; 
color:#ffdc63;
margin-left: 250px;
margin-right: 250px;
padding:10px;
border-left-color: #d86b60;
border-left-style: solid;
border-left-width: 7px;
border-right-color: #6e0a00;
border-right-style: solid;
border-right-width: 7px;
}

.summary { border-top-color: #d86b60;
border-top-style: solid;
border-top-width: 2px;
border-left-color: #d86b60;
border-left-style: solid;
border-left-width: 2px;
}

.authornote { border-right-color: #6e0a00;
border-right-style: solid;
border-right-width: 2px;
border-bottom-color: #6e0a00;
border-bottom-style: solid;
border-bottom-width: 2px;
}
Suggestions for editing this style:
  • You can change the width of the "flow" by changing the values for the "margin-left:" and "margin-right:" attributes in the .MainBlock style. Higher numbers will make it more narrow, while smaller numbers will make it wider.
  • You can change the background color 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:" attribute in the .MainBlock style.
  • You can modify the color and width of the left, right, top, and bottom borders individually, by changing the values for "border-top-color:", "border-top-width:", "border-left-color:", "border-left-width:" and so on.
  • 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 12
    | Previous Chapter
    Report Abuse