simple-jojo : Simple « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Simple

simple-jojo

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple Jojo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*  
Template Name: Simple Jojo
Version: 1.0
Author: My Green Corner
Author URI: http://www.mygreencorner.com/
*/

html, body {
  font-family: Georgia;
  border: 0;
  color: #C7C7C7;
  background: #1D211A;
}

body {
  background: url(simple-jojo-images/bg_top.jpg) repeat-x top;
}

body, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {
  margin: 0;
  padding: 0;
}

h1, h3, h4 {
  padding: 10px 0;
}

ul {
  list-style: none;
}

blockquote {
  font-size: 13px;
  line-height: 22px;
  padding: 10px 25px;
  margin: 0 auto;
  width: 430px;
  background: url(simple-jojo-images/quote.gif) no-repeat 0 15px;
}

blockquote p {
  font-style: italic;
  color: #979797 !important;
}

blockquote blockquote {
  width: 90%;
}

blockquote blockquote p {
  color: #CACACA !important;
}

a {
  text-decoration:  none;
  color: #4C772B;
}

a:hover {
  text-decoration: none;
}

a img {
  border: none;
}

/* Wrap */

#wrap {
  width: 905px;
  margin: 0 auto;
  padding-left: 11px;
  background: url(simple-jojo-images/menu_part_left.gif) no-repeat 0 105px;
}

/* Header */

#header {
  width: 100%;
  height: 141px;
  position: relative;
  font-family: Georgia;
}

#header h2 {
  font-size: 30px;
  font-weight: normal;
  padding-top: 25px;
}

#header h2 a {
  color: #E5F2CF;
}

#header h2 a:hover {
  color: #fff;
}

#header h2, #header p {
  padding-left: 20px;
}

#header p {
  font-size: 12px;
  font-style: italic;
  font-weight: bolder;
  color: #9EB47A;
}

/* Main Menu */

#header ul {
  height: 41px;
  position: absolute;
  top: 99px;
  background: url(simple-jojo-images/menu_part_right.gif) no-repeat right bottom;
  padding-right: 11px;
}

#header ul li {
  display: inline;
  font-size: 12px;
  font-family: "Trebuchet MS";
  font-weight: bold;
}

#header ul li a {
  display: block;
  float: left;
  background: url(simple-jojo-images/menu_rollover.jpg) no-repeat right top;
  line-height: 41px;
  color: #fff;
  padding: 0 22px;
}

#header ul li a:hover, #header ul li.current_page_item a {
  background: url(simple-jojo-images/menu_rollover.jpg) no-repeat right -41px;
}

#header ul:after {
    content: "."; 
    display: block;
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Subscribe */

#header img.subscribe {
  position: absolute;
  right: 96px;
  bottom: 57px;
}

/* Middle Wrap */

#bg_top {
  width: 100%;
  background: url(simple-jojo-images/bg_content.jpg);
}

#middle_wrap {
  width: 100%;
  background: url(simple-jojo-images/bg_content_top.jpg) no-repeat;
}

/* Content */

#content {
  width: 540px;
  float: left;
  padding-top: 10px;
  padding-bottom: 35px;
  padding-left: 30px;
  color: #C7C7C7;
}

#content img {
  padding: 1px;
  border: #4A4A4A 1px solid;
}

#content a {
  color: #AC6448;
}

#content a:hover {
  color: #C78F7A;
}

#content p a {
  border-bottom: #47413E 1px solid;
}

#content p {
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 10px 0;
  color: #C7C7C7;
  line-height: 21px;
}

#content h2 {
  font-family: Georgia;
  font-size: 25px;
  font-weight: normal;
  font-style: italic;
  padding: 35px 0 10px 0;
  width: 490px;
}

#content h2 a {
  color: #fff;
}

#content h2 a:hover {
  color: #B0B0B0;
}

#content ul, #content ol {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 25px;
  padding-left: 50px;
  margin: 10px 0;
}

#content ul li {
  list-style: square;
}

#content img.alignleft {
  margin: 10px 10px 10px 0;
}

#content img.alignright {
  margin: 10px 0px 10px 10px;
}

#content h2.heading_2 {
  background: url(simple-jojo-images/sidebar_underline.gif) repeat-x bottom left;
}

#content img.centered {
  margin: 10px auto 20px auto !important;
  display: block;
}

/* Post Details */

.post_details {
  width: 480px;
  height: 43px;
  padding-left: 50px;
  background: url(simple-jojo-images/bg_post_details.gif) no-repeat left top;
  margin-left: -50px;
  margin-top: -5px;
  margin-bottom: -10px;
  position: relative;
}

.post_details p {
  padding: 0 30px 0 0 !important;
  font-family: Georgia;
  font-size: 12px !important;
  font-style: italic;
  color: #97675A !important;
  float: left;
  background: url(simple-jojo-images/post_details_p_bg.jpg) no-repeat right top;
}

.post_details .comments {
  position: absolute;
  right: -60px;
  top: -19px;
  width: 34px;
  height: 31px;
  background: url(simple-jojo-images/post_details_comment.gif) no-repeat;
  font-size: 18px;
  font-family: Georgia;
  font-style: italic;
  text-align: center;
  padding-top: 6px;
  padding-right: 2px;
}

.post_details .comments a {
  color: #C7C7C7 !important;
}

.post_details .comments a:hover {
  color: #fff !important;
  text-decoration: none;
}

* html .post_details .comments {
  width: 34px;
  padding-left: 2px;
  padding-right: 0px;
}

.post_details a {
  color: #C19589 !important;
  border-bottom: none !important;
}

.post_details a:hover {
  text-decoration: underline;
}

/* More Entries */

.more_entries {
  padding-top: 5px;
  padding-bottom: 10px;
}

.more_entries h2 {
  font-size: 23px !important;
}

/* Comments (single.php and comments.php) */

.comments_wrap {
  width: 460px;
  margin: 30px 0 5px 10px;
  clear: both;
}

.comments_wrap a {
  color: #905640 !important;
}

.comments_wrap .left {
  width: 56px;
  float: left;
}

.comments_wrap .right {
  width: 358px;
  float: left;
  padding-left: 15px;
}

.comments_wrap .right a {
  text-decoration: none;
}

.comments_wrap .right a:hover {
  text-decoration: underline;
}

.comments_wrap .right h4 {
  font-size: 10px;
  font-family: "Lucida Grande";
  color: #5D5D5D;
  padding: 0;
  font-weight: normal;
}

.comments_wrap .right h4 b {
  font-size: 13px;
  color: #BEC7C7;
}

.comments_wrap .right p {
  font-size: 13px;
  line-height: 19px;
  padding: 10px 0;
}

/* Comments (form) */

#content form {
  margin: 30px 0 30px 10px;
}

#content form label {
  display: block;
  margin: 10px 0;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

#content form label input {
  padding: 3px;
  width: 180px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

#content textarea {
  margin-bottom: 10px;
  display: block;
  padding: 3px;
  font-size: 12px;
  border: #444444 1px solid;
  background: #383838;
  color: #B8B8B8;
  overflow: hidden;
}

#content form input {
  margin-top: 5px;
  border: #444444 1px solid;
  background: #383838;
  color: #B8B8B8;
}

/* Sidebar */

.author_box {
  width: 235px;
  background: #151419 url(simple-jojo-images/author_paper_top.jpg) no-repeat left top;
  margin-bottom: 10px;
}

.author_box_in {
  width: 202px;
  padding: 0 23px 0 10px;
  background: url(simple-jojo-images/author_paper_bottom.jpg) no-repeat left bottom;
  font-family: Georgia;
  font-size: 13px;
}

.author_box p {
  line-height: 20px;
  color: #C7C7C7;
}

#sidebar a {
  color: #AC6448;
  border-bottom: #3F363A 1px solid;
}

#sidebar a:hover {
  color: #C78F7A;
}

#sidebar {
  width: 235px;
  float: right;
  margin-right: 15px;
  padding-bottom: 30px;
  display: inline;
  padding-top: 21px;
  font-size: 12px;
  color: #7B7B7B;
}

#sidebar p {
  padding: 10px 0;
}

#sidebar h2 {
  display: block;
  font-family: Georgia;
  font-size: 27px;
  color: #fff;
  font-weight: normal;
  background: url(simple-jojo-images/sidebar_underline.gif) repeat-x bottom;
  padding-bottom: 1px;
  padding-top: 20px;
  margin-bottom: 10px;
  padding-left: 5px;
}

#sidebar ul {
  padding: 0px 0 10px 5px;
}

#sidebar ul li {
  line-height: 18px;
  padding: 4px 0 4px 13px;
  background: url(simple-jojo-images/li.gif) no-repeat 0 11px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #7B7B7B;
  position: relative;
  color: #C7C7C7;
}

#sidebar ul li ul {
  padding: 0 !important;
  margin-bottom: -5px;
}

#sidebar ul li a {
  color: #7B7B7B;
  border-bottom: #424242 1px solid;
}

#sidebar ul li a:hover {
  color: #9D9D9D;
}

/* writings (recent entries) */

#sidebar li span.wrap {
  width: 100%;
  display: block;
}

#sidebar li span.title {
  width: 185px;
  display: block;
}

#sidebar ul li span.date {
  font-size: 10px;
  color: #545353;
  width: 100%;
  clear: both;
  display: block;
}

#sidebar li span.comment {
  position: absolute;
  right: 0;
  top: 4px;
  width: 20px;
  height: 18px;
  text-align: center;
  font-size: 10px;
  padding-right: 0px;
  padding-top: 2px;
  background: url(simple-jojo-images/sidebar_span_a.gif) no-repeat left bottom;
}

#sidebar li a span.comment {
  cursor: pointer;
}

* html #sidebar li span.comment {
  width: 20px;
  height: 19px;
  padding-top: 1px;
  overflow: hidden;
}

/* Sidebar Search (widget) */

#sidebar form#searchform input {
  background: #383838;
  border: #444444 1px solid;
  color: #7B7B7B;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

#sidebar form input#s {
  width: 150px;
  margin-bottom: 5px;
  padding: 4px;
}

/* Widget (calendar) */

#wp-calendar {
  width: 95%;
  padding: 0 0 10px;
}

#wp-calendar caption {
  padding: 10px;
}

#wp-calendar th, #wp-calendar td {
  padding: 5px;
  text-align: center;
  background: #343434;
}

#wp-calendar td {
  background: transparent;
}

#wp-calendar td, table#wp-calendar th {
  padding: 3px 0;
}

#wp-calendar a {
  text-decoration: underline;
}

#wp-calendar a:hover {
  text-decoration: none;
}

/* Footer */

#footer {
  width: 891px;
  padding-left: 14px;
  background: url(simple-jojo-images/bg_footer.jpg) ;
  overflow: hidden;
  margin-bottom: 1px;
  position: relative;
  clear: both;
}

#footer ul {
  padding-top: 14px;
  width: 600px;
  overflow: hidden;
}

#footer li {
  display: inline;
  font-family: "Trebuchet MS";
  font-size: 11px;
  font-weight: bold;
}

#footer li a {
  display: block;
  float: left;
  padding: 0 14px;
  line-height: 25px;
  margin-right: 3px;
  color: #B09087;
}

#footer li a:hover, #footer li.current_page_item a {
  background: url(simple-jojo-images/footer_rollover.jpg);
  color: #fff; 
}

#footer p {
  width: 100%;
  clear: both;
  font-family: Georgia;
  font-size: 11px;
  color: #7F584E;
  padding-top: 13px;
  padding-left: 3px;
  width: 600px;
  line-height: 20px;
}

#footer p a {
  color: #8C6B62;
  border-bottom: #6B4A41 1px solid;
  position: relative;
}

#footer p a:hover {
  color: #AE948C;
  border-bottom: #6B4A41 1px solid;
}

#footer p.bot {
  position: absolute;
  right: 94px;
  bottom: 30px;
  display: block;
  width: 70px;
}

#footer p.bot a {
  border-bottom: #54413D 1px solid;
}

/* Fix */

#middle_wrap:after,
.comments_wrap:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <h2><a href="http://www.free-css.com/">Simple Jojo</a></h2>
    <p>Free CSS Blog Template</p>
    <ul>
      <li class="page_item current_page_item"><a href="http://www.free-css.com/">Home</a></li>
      <li class="page_item page-item-9"><a href="http://www.free-css.com/">Page 1</a></li>
    </ul>
    <a href="http://www.free-css.com/"><img src="simple-jojo-images/icon_rss.jpg" alt="" class="subscribe" /></a> </div>
  <div id="bg_top">
    <div id="middle_wrap">
      <div id="content">
        <h2><a href="http://www.free-css.com/">An image in a post</a></h2>
        <div class="post_details">
          <p>Posted on November 18, 2007, under <a href="http://www.free-css.com/">Uncategorized</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">0</a></div>
        </div>
        <p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
        <h2><a href="http://www.free-css.com/">Blockquotes again and again?</a></h2>
        <div class="post_details">
          <p>Posted on November 18, 2007, under <a href="http://www.free-css.com/">Uncategorized</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">0</a></div>
        </div>
        <p class="post_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
        <p>With some blockquotes too of course?</p>
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
        </blockquote>
        <p>and a suggestion by Steve Cooley for a blockquote within a blockquote:</p>
        <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
          <blockquote>
            <p>This is a blockquote within a blockquote</p>
          </blockquote>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit.</p>
        </blockquote>
        <h2><a href="http://www.free-css.com/">Ordered and Unordered lists</a></h2>
        <div class="post_details">
          <p>Posted on November 18, 2007, under <a href="http://www.free-css.com/">Uncategorized</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">0</a></div>
        </div>
        <p class="post_content">A post with lists:</p>
        <p><strong>Unordered List</strong></p>
        <ul>
          <li>Item one</li>
          <li>Item two</li>
          <li>Item three</li>
        </ul>
        <p><strong>Ordered List</strong></p>
        <ol>
          <li>Item one</li>
          <li>Item two</li>
          <li>Item three</li>
        </ol>
        <h2><a href="http://www.free-css.com/">A post with links and 3 pages within</a></h2>
        <div class="post_details">
          <p>Posted on November 18, 2007, under <a href="http://www.free-css.com/">Uncategorized</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">0</a></div>
        </div>
        <p>A link to the <a href="http://www.free-css.com/">main directory</a> page,&nbsp; combined with a link to main page of the <a href="http://www.free-css.com/">theme viewer</a> and perhaps a link to <a href="http://www.free-css.com/">google.com</a>.</p>
        <h2><a href="http://www.free-css.com/">An example of child categories</a></h2>
        <div class="post_details">
          <p>Posted on November 18, 2007, under <a href="http://www.free-css.com/">Child Category 2</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">0</a></div>
        </div>
        <p>This is posted in the child category 2 which sit under the child category.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.</p>
        <h2><a href="http://www.free-css.com/">Hello world!</a></h2>
        <div class="post_details">
          <p>Posted on October 4, 2007, under <a href="http://www.free-css.com/">Uncategorized</a>.</p>
          <div class="comments"><a href="http://www.free-css.com/">1</a></div>
        </div>
        <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
        <div class="more_entries">
          <h2>&nbsp; </h2>
        </div>
      </div>
      <div id="sidebar">
        <div class="author_box">
          <div class="author_box_in">
            <p>Welcome, ipsum dolor sit amet, consectetur <a href="http://www.free-css.com/">adipisicing elit</a>, sed do eiusmod tempor incididunt ut labo re et dolore magna liqua. Ut enim ad minim veniam, quis nostrud exercitation quis.</p>
            <p>Ut enim ad minim exercitation eacommodo <a href="http://www.free-css.com/">veniam quis...</a></p>
          </div>
        </div>
        <h2>Pages</h2>
        <ul>
          <li class="page_item page-item-9"><a href="http://www.free-css.com/">Page 1</a>
            <ul>
              <li class="page_item page-item-10"><a href="http://www.free-css.com/">Page 2 - child page</a></li>
            </ul>
          </li>
        </ul>
        <h2>Categories</h2>
        <ul>
          <li class="cat-item cat-item-6"><a href="http://www.free-css.com/">Child Category 2</a> </li>
          <li class="cat-item cat-item-1"><a href="http://www.free-css.com/">Uncategorized</a> </li>
        </ul>
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">November 2007</a></li>
          <li><a href="http://www.free-css.com/">October 2007</a></li>
        </ul>
        <h2>Meta</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Login</a></li>
          <li><a href="http://www.free-css.com/">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
          <li><a href="http://www.free-css.com/">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
          <li><a href="http://www.free-css.com/">WordPress.org</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
    <ul>
      <li class="page_item current_page_item"><a href="http://www.free-css.com/">Home</a></li>
      <li class="page_item page-item-9"><a href="http://www.free-css.com/">Page 1</a></li>
    </ul>
    <p>Copyright 2008, by <a href="http://www.mygreencorner.com/">My Green Corner</a></p>
    <p class="bot"><a href="#wrap">Back on Top</a></p>
  </div>
</div>
</body>
</html>








Related examples in the same category

1.simple-blue
2.simple-brown
3.simple-elegance
4.simple-personal
5.simple-solution
6.simple-type
7.simple 1
8.simple3column
9.simpleandsleak
10.simpleblog1-0
11.simplecorp
12.simplecurve
13.simpleelegance03
14.simpleevent
15.SimpleMin
16.simplepagedesign
17.simplepassage
18.simplepicture
19.simples
20.simplescheme-magazine
21.simpletex
22.simpleton
23.simpletwocolumn
24.simplex
25.simplified
26.simply_plain_v2