How do change an HTML/CSS from a blog into a personal website?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Lady Gray
    New Member
    • Oct 2010
    • 3
    #1

    How do change an HTML/CSS from a blog into a personal website?

    I downloaded a CSS template to make a section of my website, but the CSS/HTML is for a blog, rather than for a personal website. I'm wondering how to change all that so that it still looks the same, but without the characteristics of a blog?

    Here's the CSS:
    Code:
    /*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
	margin: 0;
	padding: 0;
}

body {
	background: #FBE8E8 url(images/img01.jpg);
	text-align: justify;
}

body, input, textarea, select {
	font: normal small Georgia, "Times New Roman", Times, serif;
	color: #662C14;
}

h1, h2, h3 {
	margin-bottom: 1em;
	font-weight: normal;
}

h1 {
	font-size: 2.2em;
}

h2 {
	font-size: 1.7em;
}

h3 {
	font-size: 1.3em;
}

p, blockquote, ul, ol, form {
	margin-bottom: 1.5em;
}

blockquote, ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-right: 3em;
	font-style: italic;
}

ul {
	list-style-type: square;
}

a {
	color: #662C14;
}

a:hover {
	text-decoration: none;
}

hr {
	display: none;
}

.hr {
}

img.left {
	float: left;
	margin: 0 15px 15px 0;
}

img.right {
	float: right;
	margin: 0 0 15px 15px;
}

/* Wrapper */

#wrapper {
	padding: 20px 0;
	background: url(images/img02.jpg) repeat-x;
}

/* Header */

#header {
	width: 700px;
	height: 160px;
	margin: 0 auto;
	background: url(images/img03.gif) no-repeat;
}

#header h1, #header h2 {
	margin: 0;
}

#header h1 {
	padding-top: 40px;
	text-align: center;
	font-size: 4em;
}

#header h2 {
	text-align: center;
	font-size: 1em;
	font-style: italic;
}

#header a {
	text-decoration: none;
}

/* Content */

#content {
	width: 700px;
	margin: 0 auto;
	background: #FBE8E8 url(images/img04.gif) repeat-y;
}

/* Blog */

#blog {
	float: right;
	width: 424px;
	padding: 50px 20px 0px 16px;
	background: url(images/img06.gif) no-repeat;
}

/* Post */

.post {
	margin-bottom: 20px;
	padding-bottom: 20px;
	background: url(images/img08.gif) no-repeat center bottom;
}

.post .title {
	margin-bottom: 15px;
	padding-left: 15px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}

.post .title a {
	text-decoration: none;
}

.post .title a:hover {
	text-decoration: underline;
}

.post .date {
	margin-top: -30px;
	padding-right: 15px;
	text-align: right;
	font-size: x-small;
}

.post .entry {
	padding: 20px 15px 10px 15px;
	line-height: 1.8em;
}

.post .meta {
	margin-bottom: 2em;
	padding: 0 15px;
	text-align: right;
	font-size: x-small;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 204px;
	padding: 50px 16px 0px 20px;
	background: url(images/img05.gif) no-repeat;
}

#sidebar ul {
	margin: 0;
	list-style: none;
}

#sidebar li {
	margin-bottom: 20px;
}

#sidebar li ul {
	padding-left: 5px;
	line-height: 1.4em;
}

#sidebar li li {
	margin: 0;
	padding-left: 12px;
	background: url(images/img07.gif) no-repeat left center;
}

#sidebar h2 {
	margin-bottom: 15px;
	padding-left: 5px;
	border-bottom: 1px solid #D3B6AF;
	text-transform: uppercase;
	font-size: small;
	font-weight: bold;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search h2 {
}

#search form {
}

#search #inputtext1 {
}

#search #inputsubmit1 {
}

/* Archives */

#archives {
}

/* Categories */

#categories {
}

/* Blogroll */

#blogroll {
}

/* Meta */

#meta {
}

/* Footer */

#footer {
	width: 700px;
	margin: 0 auto;
	padding-top: 43px;
	background: url(images/img09.gif) no-repeat;
}

#footer p {
	margin: 0;
	padding: 20px 0;
	text-align: center;
	font-size: x-small;
	color: #FFFFFF;
}

#footer a {
	color: #FFFFFF;
}
    And, here's the HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : The Manor
Version    : 1.0
Released   : 20070331
Description: A two-column fixed-width template. Suitable for blogs and small business websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>The Manor by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
	<div id="header">
		<h1><a href="/">The Manor</a></h1>
		<h2><a href="http://www.freecsstemplates.org/">by Free CSS Templates</a></h2>
		<hr />
	</div>
	<div id="content">
		<div id="blog">
			<div id="post-1" class="post">
				<h2 class="title"><a href="#">Welcome to The Manor!</a></h2>
				<h3 class="date">March 26, 2007</h3>
				<div class="entry">
					<p><strong>The Manor</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 Licens</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em><strong>Enjoy :)</strong></em></p>
				</div>
				<p class="meta">Posted in <a href="http://www.pdphoto.org/">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>
				<div class="hr">
					<hr />
				</div>
			</div>
			<!-- end #post-1 -->
			<div id="post-2" class="post">
				<h2 class="title"><a href="#">Sample Tags</a></h2>
				<h3 class="date">January 31, 2007</h3>
				<div class="entry">
					<p>A one-sentence paragraph followed by a blockquoted paragraph.</p>
					<blockquote>
						<p>&ldquo;Nam et orci et leo iaculis tempor. Duis ante ante, pretium sit amet, feugiat ut, semper ac, nisl. Praesent eget mauris. Duis in pede. Vestibulum nec libero.&rdquo;</p>
					</blockquote>
					<h3>Heading Level Three</h3>
					<ul>
						<li>Proin eu ligula ut est congue malesuada.</li>
						<li>Nunc eleifend felis nec purus.</li>
						<li>Duis sodales urna sit amet nulla.</li>
					</ul>
					<h3>Ordered List</h3>
					<ol>
						<li>Donec fringilla leo eget erat.</li>
						<li>Nunc condimentum cursus lorem.</li>
						<li>Cras sodales venenatis metus.</li>
					</ol>
				</div>
				<p class="meta">Posted in <a href="http://www.pdphoto.org/">Uncategorized</a> | <a href="#">Edit</a> | <a href="#">1 Comment &raquo;</a></p>
				<div class="hr">
					<hr />
				</div>
			</div>
			<!-- end #post-2 -->
		</div>
		<!-- end #blog -->
		<div id="sidebar">
			<ul>
				<li id="search">
					<h2>Search</h2>
					<form id="form1" method="get" action="#">
						<div>
							<input id="inputtext1" type="text" name="inputtext1" value="" />
							<input id="inputsubmit1" type="submit" name="inputsubmit1" value="Search" />
						</div>
					</form>
				</li>
				<!-- end #search -->
				<li id="archives">
					<h2>Archives</h2>
					<ul>
						<li><a href="#">March 2007</a></li>
						<li><a href="#">February 2007</a></li>
						<li><a href="#">January 2007</a></li>
						<li><a href="#">December 2006</a></li>
						<li><a href="#">November 2006</a></li>
					</ul>
				</li>
				<!-- end #archives -->
				<li id="categories">
					<h2>Categories</h2>
					<ul>
						<li><a href="#">Uncategorized</a> <small>(6)</small></li>
						<li><a href="#">Condimentum Cursus</a> <small>(28)</small></li>
						<li><a href="#">Praesent Sit Mauris</a> <small>(14)</small></li>
						<li><a href="#">Leo Iaculis Tempor</a> <small>(23)</small></li>
						<li><a href="#">Dignissimos Ducimus</a> <small>(19)</small></li>
					</ul>
				</li>
				<!-- end #categories -->
				<li id="blogroll">
					<h2>Blogroll</h2>
					<ul>
						<li><a href="#">Lorem Ipsum Dolor</a></li>
						<li><a href="#">Tempor Leo Iaculis</a></li>
						<li><a href="#">Cursus Dignissimos</a></li>
						<li><a href="#">Ducimus Condimentum</a></li>
						<li><a href="#">Praesent Sit Mauris</a></li>
					</ul>
				</li>
				<!-- end #blogroll -->
				<li id="meta">
					<h2>Meta</h2>
					<ul>
						<li><a href="#">Site Admin</a></li>
						<li><a href="#">Logout</a></li>
						<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
						<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
						<li><a href="http://www.freecsstemplates.org/" title="Designed by Free CSS Templates.">Free CSS Templates</a></li>
					</ul>
				</li>
				<!-- end #meta -->
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both; height: 1px;"></div>
	</div>
	<!-- end #content -->
	<div id="footer">
		<p>Copyright &copy; 2007 The Manor. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
	</div>
</div>
<!-- end #wrapper -->
</body>
</html>
    So, just to be clear, I'd like to know how to change the Archives/Categories/Blogroll/Meta menus into working navigation menus on the left side of the main body. Also, I only need the first section of the 'blog;' not three. Thank you so much to anyone who can help. <3
    Tags: None
    • JKing
      Recognized Expert Top Contributor
      • Jun 2007
      • 1206
      #2
      Have you made any attempt to do this for yourself(aside from downloading a free template)? Or are you just looking for free work?

        Comment

        • Lady Gray
          New Member
          • Oct 2010
          • 3
          #3
          I don't know anything about CSS and am basically fumbling my way through the HTML bit of it. It's a trial and error process for me, where I change something small, save it, then look at it as a local file to see if I managed to change what I wanted to.

          I did manage to figure out a way to make the layout work for me; I just changed the title of "Archives" to "Navigation " and the "Blogroll" to "Links." It wasn't exactly what I wanted, but the links work and it looks the way I wanted it to, so I suppose it's a temporary fix for now.

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Originally posted by Lady Gray
              I don't know anything about CSS and am basically fumbling my way through the HTML bit of it. It's a trial and error process for me, where I change something small, save it, then look at it as a local file to see if I managed to change what I wanted to.

              I did manage to figure out a way to make the layout work for me; I just changed the title of "Archives" to "Navigation " and the "Blogroll" to "Links." It wasn't exactly what I wanted, but the links work and it looks the way I wanted it to, so I suppose it's a temporary fix for now.
              As you seem to have figured out, you only need to edit a few minor things to make the change. It would be very beneficial for you to learn a little more about HTML and CSS though. For your needs W3school's tutorials would be a great place to start.

              Thanks, Death

                Comment

                • Lady Gray
                  New Member
                  • Oct 2010
                  • 3
                  #5
                  @ Death-

                  I have gone over quite a few of the tutorials on W3school already, which is probably why I've managed to not mangle things too terribly badly.

                  I suppose I'll just have to take a weekend and go into everything in-depth so I have a better idea of what I'm doing.

                  Thank you so much for your help!

                    Comment

                    Previous template Next
                    Working...