Carrie (carriep63) wrote in everything_lj,
Carrie
carriep63
everything_lj

Clean and Simple Template

This is a template based on the [s1]Clean and Simple style.


  • This layout has a header, sidebar and background.

  • It is centered in all resolutions.

  • You will need to have a website defined in your userinfo

  • These codes are only for the main journal view (LASTN). You may want to follow this tutorial to convert the layout for all page views

  • Here is a preview to this template





GLOBAL_HEAD<=
<style type="text/css">
<!--

/*
BACKGROUND ~ THE TEXT ALIGN CENTER PUTS THE
WHOLE TABLE IN THE CENTER OF THE PAGE
*/

body {
  background: #fff url(http://www.linktobackground.jpg);
  color:#6F6F6F;
  font-family:sans-serif;
  margin:0;
  margin-bottom:50px;
  text-align:center;
  }

/*MAIN PAGE LINKS*/
a:link {
  color:#000;
  background: transparent;
  }

a:hover{
  color:#888;
  }

/*
THE MARGIN TOP IS IN A DIFFERENT PLACE THAN ON OTHER LAYOUTS,
IT IS HERE IN THE TABLE OVERRIDE.
*/

table {
  width: 600px;
  border:1px solid #9F9F9F;
  margin-left:auto;
  margin-right:auto;
  margin-top:165px;
  }

/*
BAR THAT HAS YOUR USERNAME.
ADD DISPLAY:NONE; IF YOU DON'T WANT IT
YOU MAY PUT A BACKGROUND IMAGE HERE IF YOU WISH.
YOU NEED A HEIGHT AND WIDTH IF YOU DO THIS
*/

#topbar {
  background: #efefef;
  padding-right:10px;
  color: ;
  height: ;
  width: ;
  }

/*YOURNAME'S JOURNAL. DISPLAY:NONE; WILL HIDE THIS*/
#topbar h1 {
  margin-top: 5px;
  margin-bottom: 0;
  text-align: right;
  font-size: 1.5em;
  }


/*THIS IS HIDDEN. IT NORMALLY SAYS RECENT ENTRIES*/
/*REMOVE THE DISPLAY:NONE; TO SHOW*/
#topbar h2 {
  margin-top: 0;
  margin-bottom: 5px;
  text-align: center;
  font-size: 1.25em;
  display:none;
  }

/*SIDEBAR. YOU MAY HAVE A BACKGROUND IMAGE IF YOU WISH*/
#navbar {
  background: #CFCFCF;
  width: 25%;
  border-right:2px solid #EFEFEF;
  }

/*SIDEBAR PART OF TABLE*/
#navbar ul {
  list-style: none;
  padding:0;
  margin: 5px;
  }

/*TEXT IN SIDEBAR*/
#navbar ul li {
  margin: 2px;
  font-size:11px;
color:#9F9F9F;
  }

/*SIDEBAR LINKS*/
#navbar a{
  background: none;
  color: white;
  text-decoration: none;
  font-size:12px;
  }

#navbar a:hover {
  text-decoration: underline;
  color:#888;
  }

/*ENTRY AREA. BACKGROUND MAY BE TRANSPARENT IF YOU WISH*/
#mainstuff {
  width: 75%;
  background: #ddd;
  font-size:11px;
  line-height:14px;
  }

/*ICON AREA OF SIDEBAR*/
#userpic {
  text-align: center;
  margin: 10px;
  }

/*ICON IMAGE*/
#userpic img {
  border: 2px solid white ;
  background: none;
  }

/*ENTRIES (GO FIGURE)*/
#entries {
  margin: 0px;
  }

/*VIEWING MOST RECENT. DISPLAY:NONE; WILL HIDE.*/
#range {
  padding:6px;
  text-align:center;
  color:#AFAFAF;
  }

/*DATE AREA*/
.day {
  border-top: 1px solid white;
  clear: both;
  }

/*DATE TEXT*/
.day h3 {
  border-bottom: 1px solid #bbb;
  padding: 1px;
  margin: 0;
  font-size: 1.1em;
  text-align: center;
  color:#9F9F9F;
  }

/*THIS IS HIDDEN, IT'S A LINK AT THE BOTTOM OF THE PAGE*/
/*REMOVE DISPLY:NONE; TO SHOW*/

address {
  text-align: center;
  font-style: normal;
  font-size: 0.95em;
  display:none;
  }

/* TEXT OF ENTRIES*/
.entrytext {
  padding: 0px;
  text-align: justify;
  }

.entry {
  clear: both;
  }

.entrytext p, .entrytext ul, .entrytext ol, .entrytext table {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  }


/*SUBJECT AREA OF ENTRY*/
.entryheading {
  display:block;
  margin:0;
  text-align:center;
  color:white;
  background:#CFCFCF;
  border-top:1px solid white;
  border-bottom:1px solid #bbb;
  }

/*SUBJECT TEXT*/
.timestamp, .altposter, .subject{
  font-size:1.1em;
  }

/*FRIENDS PAGE*/
.altposter a {
  text-decoration: underline;
  }

.altposter img {
  border: 2px solid;
  background: none;
  }

/*COMMENT LINK AREA*/
.talklinks {
  font-size: .8em;
  text-align: center;
  margin-bottom: 15px;
  clear: right;
  padding:0px;
  background:#efefef;
  margin-top:5px;
  border-top:1px solid white;
  border-bottom:1px solid #bbb;
  }

/*COMMENT LINK TEXT*/
.talklinks a{
  text-decoration:none;
  }

/*MOOD AND MUSIC TEXT*/
.currents{
  font-size:.8em;
  color:#AFAFAF;
  }


/*HEADER IMAGE - MUST DEFINE WIDTH AND HEIGHT*/
.header{
  position:absolute;
  top:10px;
  left:50%;
  margin-left:-300px;
  width:600px;
  height:150px ;
  }


/*CALENDAR TABLE*/
table table{
  border:0;
  width:70%;
  background:#EFEFEF;
  }

/*CALENDAR DAY BOXES*/
table table td{
  border-right:1px solid #CFCFCF;
  border-bottom:1px solid #CFCFCF;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  }
-->
</style>
<=GLOBAL_HEAD


LASTN_WEBSITE<=

<!-- code for additional link. You may have as many of these as you like -->
<!-- these need to be in a list item tag as shown -->


<li><a href="http://www.example.com/yourpage.html"> name of link</a></li>
<li><a href="http://www.example.com/yourpage.html"> name of link</a> </li>


<!-- EXTRA WRITING. BE SURE TO PUT THIS IN A LIST ITEM TAG! -->
<li>This is a bunch of stuff that I am writing. The downfall to this is that it
will be pushing my icon down farther and farther. I am working on a way to
remedy this, but I don't know if it will happen.</li>


<!-- HEADER IMAGE. MAKE SURE YOU PUT THE HEADER CLASS IN THERE! -->
<img src="http://www.linktoyourheader.jpg" class="header">

<=LASTN_WEBSITE
Subscribe
Comments for this post were disabled by the author