Simple CMS with Linq to SQL

There are some images in this theme, but you can grab those on the mod portal theme page.
Create a style.css in the Content folder of your project and add the following…

/* Common */
body
{
	font-family: "Segoe UI" , Tahoma, Sans-Serif;
	font-weight: normal;
	font-size: medium;
}

/* Screen */
@media screen
{
	/* Reset */
	body, div, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, select, ul, li, table, td, th, hr
	{
		margin: 0;
		padding: 0;
		border: 0;
	}
	body
	{
		font: normal 81% Sans-serif,tahoma,verdana;
		background: #E8EAEF;
		text-align: center;
		padding: 0 0 20px 0;
		color: #575757;
	}

	div.page
	{
		text-align: left;
		width: 90%;
		min-width: 800px;
		max-width: 1300px;
		background: #fff;
		margin: 20px auto 0 auto;
	}

	div.header
	{
		min-height: 100px;
		position: relative;
	}

	div.header, div.body, div.footer, div.columns, div.meta, hr
	{
		clear: both;
	}

	div.content
	{
		float: left;
		display: inline;
		width: 80%;
	}

	div.sidebar
	{
		float: right;
		display: inline;
		width: 20%;
	}
	div.extras
	{
		float: right;
		width: 28%;
	}
	
	div.posts
	{
		width: 70%;
		padding: 0 10px 0 0;
		color: #575757;
		float: left;
	}
	
	div.welcome
	{
		background:#eee;
		padding:0;
		margin:5px;
	}
	
	div.post
	{
	}
	div.palt
	{
		background: #efefef;
	}

	div.columns
	{
		margin: 20px 0 0 0;
		display: block;
		background: #444;
		color: #eef;
		font-size: 90%;
	}

	div.column
	{
		width: 24%;
		float: left;
		min-height: 40px;
	}
	hr
	{
		height: 1px;
	}
	div.columns hr
	{
		background: #444;
		color: #444;
	}
	div.content hr
	{
		background: #fff;
		color: #fff;
	}
	div.footer
	{
		background: #444;
		color: #ccc;
		font: normal 75% Verdana, Helvetica, Sans-serif;
		text-align: center;
		text-transform: uppercase;
	}

	h1, h2, h3, h4, h5, h6
	{
		padding: 5px 10px;
	}
	h1, h2, h3, h4
	{
		font-weight: normal;
	}
	h1
	{
		display: block;
		font-size: 210%;
		padding: 5px 10px 0 10px;
		border: 0;
	}
	h1 a
	{
		color: #575757;
		text-decoration: none;
	}
	h1 span
	{
		font: bold 110% Times;
		color: #99f;
	}
	h2
	{
		font-size: 180%;
		padding: 10px;
		color: #777;
	}
	h2.articletitle
	{
		padding: 10px 10px 0 10px;
	}
	h3
	{
		font-size: 150%;
		padding: 10px;
	}
	ul.forums li h3
	{
		font-size: 130%;
		padding: 5px 0 0 10px;
	}
	ul.forums li h3 a
	{
		color: #555;
		text-decoration: none;
	}
	div.sidebar h3, div.extras h3
	{
		padding: 6px 0 5px 6px;
		margin: 0 7px;
		border: 0;
		background: #eef;
	}
	div.extras h3
	{
		margin: 10px 0 5px 0;
	}
	div.posts h3
	{
		padding: 5px 0 0 10px;
		border: 0;
	}
	h4, div.segment h4
	{
		font-size: 140%;
		padding: 10px 10px 5px 10px;
		line-height: 90%;
	}
	div.post h4
	{
		padding: 10px 10px 0 10px;
	}
	h4.pages
	{
		word-spacing: 10px;
		padding: 20px 10px;
	}
	h4 a
	{
		color: #575757;
		word-spacing: normal;
		text-decoration: none;
	}
	h4.pages a:hover
	{
		color: #333;
	}
	
	p.meta, div.postmeta p
	{
		font-size: 85%;
	}
	div.postmeta p a
	{
		color:#444;
	}
	p.loginmeta
	{
		float: right;
		display: inline;
		color: #eee;
		font-size:83%;
		word-spacing:5px;
		padding: 8px 10px;
	}
	p.loginmeta span, p.loginmeta a
	{
		word-spacing:normal;
	}
	p.powered
	{
		color:#E8EAEF;
		word-spacing:normal;
		line-height:200%;
		padding:10px;
	}
	a, div.post h4 a:hover, ul.topics li h5 a, ul.list li a
	{
		color: #55f;
	}
	p.loginmeta a
	{
		color: #eee;
		font-size:110%;
		text-decoration: none;
		font-weight: bold;
	}
	p.powered a
	{
		color:#444;
	}
	strong.curr
	{
		font-size: 140%;
	}
	span.loginlabel
	{
		color: #ccc;
		font-weight: bold;
		font-size: 90%;
	}
	
	ul.options
	{
		padding:10px 0;
		list-style:none;
	}
	
	ul.options li
	{
		padding:2px 10px;
	}
	
	ul.topics li h5, div.content h5, ul.list li
	{
		font-size: 100%;
	}
	ul.topics li h5 span
	{
		font-size: 85%;
		font-weight: normal;
		display: block;
	}
	ul.topics li h5 span a
	{
		font-weight: bold;
		color: #333;
		text-decoration: underline;
	}
	ul.posts li
	{
		clear:both;
		background:#eee;
	}
	ul.posts li h5
	{
		background: #555;
		color: #fff;
	}
	ul.posts li h5 a
	{
		color: #fff;
	}
	ul.posts li div.entry
	{
		padding:5px 10px;
		line-height:200%;
		margin:0 0 0 150px;
	}
	ul.posts li div.info
	{
		float:left;
		width:145px;
		padding:5px;
		clear:both;
		text-align:center;
		background:transparent;
	}
	ul.posts li div.info span
	{
		display:block;
	}
	ul.posts li div.info span.ct,
	ul.posts li div.info h6
	{
		font-size:85%;
		padding:5px;
	}
	ul.posts li div.info span a
	{
		font-weight:bold;
		text-decoration:none;
	}
	ul.posts li div.info span.ct a
	{
		color:#444;
	}
	ul.list a, h5 a
	{
		text-decoration: none;
	}
	ul.list li a, ul.list li span
	{
		font-weight: bold;
		padding: 2px 5px;
		display: block;
	}
	ul.list li span strong
	{
		color: #55f;
	}
	div.extras h5
	{
		font-size: 120%;
		padding: 3px 0;
	}
	div.extras h5 a
	{
		color: #eef;
		font-weight: normal;
	}
	div.post h4 a:hover
	{
		text-decoration: underline;
	}
	p
	{
		padding: 5px 10px 20px 10px;
		line-height: 200%;
	}
	div.post p.data, div.meta p.data, ul.posts li p.functions
	{
		padding: 0 10px 5px 10px;
		font-size: 80%;
		text-transform: uppercase;
		color: #555;
	}
	div.post p.data a, div.meta p.data a
	{
		text-transform: none;
		text-decoration: none;
		color: #55f;
		font-size: 110%;
		font-weight: bold;
	}
	div.post p.data span, div.meta p.data span
	{
		display: block;
	}
	div.postform p
	{
		line-height: 150%;
		padding: 5px 10px;
	}
	div.header p.info
	{
		font: normal 90% verdana,sans-serif;
		text-transform: uppercase;
		padding: 5px 10px;
	}
	a img
	{
		border:0;
	}
	div.nav
	{
		background: #444;
		min-height: 40px;
		border: 5px solid #fff;
		border-width: 0 0 5px 0;
	}
	div.content div.nav
	{
		float: right;
		min-height: 34px;
	}
	div.nav ul li
	{
		float: left;
		padding: 6px 0;
		position: relative;
	}
	div.content div.nav ul li
	{
		border: 3px solid #fff;
		border-width: 0 3px 0 0;
	}
	div.content div.nav ul li ul li
	{
		border: 0;
	}
	div.nav ul li a, div.nav ul li span
	{
		padding: 6px 10px;
		display: block;
		color: #999;
		text-decoration: none;
	}

	div.content div.nav ul li a, div.content div.nav ul li span
	{
		padding: 3px 10px;
	}
	div.nav ul li span
	{
		color: #ccc;
	}
	div.nav ul li a:hover, div.nav ul li span:hover, div.nav ul li.active a
	{
		color: #fff;
	}

	div.nav ul li ul
	{
		display: none;
	}

	div.nav ul li:hover ul, div.nav ul li ul:hover
	{
		display: block;
		width: 200px;
		position: absolute;
		top: 30px;
		left: 0;
		background: #222;
		border: 1px solid #222;
	}
	div.content div.nav ul li:hover ul, div.content div.nav ul li ul:hover
	{
		top: 30px;
		left: -124px;
	}
	div.nav ul li:hover ul li ul, div.nav ul li ul:hover li ul
	{
		display: none;
	}

	div.nav ul li ul li:hover ul, div.nav ul li ul:hover li ul
	{
		display: block;
		top: 5px;
		left: 190px;
	}
	div.nav ul li ul li
	{
		float: none;
		padding: 4px 0;
		display: block;
		position: relative;
	}
	div.nav ul li ul li a, div.nav ul li.active ul li a
	{
		display: block;
		padding: 4px 10px;
		color: #bbb;
		position: relative;
	}
	div.nav ul li ul li a:hover
	{
		color: #fff;
	}

	div.columns p
	{
		line-height: 150%;
		padding: 4px 10px 25px 4px;
	}
	div.columns fieldset ul
	{
		list-style:none;
	}
	
	div.entry p
	{
		padding:0 0 20px 0;
	}
	
	div.signature
	{
		padding:10px;
		margin:20px 10px 10px 10px;
		background:#eee;
		color:#555;
		font-size:80%;
		max-height:100px;
		overflow:hidden;
	}
	div.signature p
	{
		padding:0;
		line-height:normal;
	}
	
	ul.posts li.original div.signature
	{
		background:#feb;
	}
	ul.posts li.alt div.signature
	{
		background:#fff;
	}

	ul.topics, ul.posts, ul.forums
	{
		margin: 5px;
	}

	ul.forums li
	{
		float: left;
		width: 47%;
		margin: 0 3px 0 0;
	}

	ul.topics li, ul.posts li
	{
		margin: 0 0 3px 0;
		background: #eee;
		line-height: 150%;
	}
	ul.posts li
	{
		margin: 0 0 10px 0;
	}
	ul.posts li div.entry
	{
		background:#fff;
		min-height:150px;
	}
	ul.posts li.alt
	{
		background:#fff;
	}
	ul.posts li.alt div.entry
	{
		background: #efefef;
	}
	ul.posts li.original
	{
		background: #ed9;
	}
	ul.topics li.hot, ul.posts li.original div.entry
	{
		background: #fea;
		color: #444;
	}
	ul.topics li.sticky
	{
		background: #fc9;
	}
	ul.topics li.locked
	{
		background: #f44;
	}
	ul.topics li a
	{
		text-decoration: none;
	}
	ul.topics li.hot a:hover
	{
	}
	ul.topics li.sticky a, ul.topics li.hot a
	{
		color: #444;
	}
	div.columns p, div.columns h5
	{
		padding: 5px 10px;
	}
	div.nav ul, div.columns ul, ul.topics, ul.posts, ul.roll, ul.list
	{
		list-style: none;
	}
	ul.list
	{
		margin: 0 0 10px 0;
	}
	ul.roll li
	{
		padding: 5px;
		line-height: 160%;
		font-size: 90%;
		margin: 0 0 5px 0;
		background: #555;
		color: #ccc;
		min-height: 100px;
	}
	ul.list li
	{
		padding: 2px 0 2px 7px;
	}
	ul.roll li img, ul.forums li img
	{
		border: 3px solid #999;
		margin: 3px;
		float: left;
	}
	div.post img.icon
	{
		float: right;
		margin: 10px;
		border: 5px solid #aaa;
	}
	div.columns li
	{
		padding: 2px 0;
	}
	div.columns ul li ul
	{
		margin:0 0 0 30px;
	}
	div.columns li a
	{
		padding: 2px 10px;
		border-bottom: 1px solid #555;
		display: block;
		text-decoration: none;
		color: #ccc;
	}
	div.columns li a:hover
	{
		color: #eee;
	}

	div.columns h5, div.columns fieldset legend
	{
		
		margin:0 10px;
		padding:10px 0 30px 0;
		display:inline;
		clear:both;
		line-height:1.6em;
		font-size:140%; font-weight:normal;
	}

	form
	{
		display: block;
	}
	div.nav form
	{
		float: right;
		display: inline;
	}
	fieldset
	{
		padding: 5px;
		margin: 10px;
		display: block;
		border: 5px solid #eee;
	}
	div.nav form fieldset
	{
		border: 0;
		padding: 0;
		display: inline;
	}
	div.columns fieldset
	{
		padding: 0;
		margin: 0;
		border: 0;
	}

	legend
	{
		font-size: 130%;
		padding: 5px;
	}
	div.columns fieldset legend
	{
		padding:0;
		margin:0;
		border:0;
	}
	
	input, select, textarea
	{
		font: normal 100% sans-serif,tahoma,verdana;
		color: #444;
	}
	input[type^='text'], input[type^='password'], textarea
	{
		padding: 2px;
	}
	div.nav input
	{
		font-size: 90%;
	}
	select
	{
		padding: 3px;
		margin: 0 4px;
		border: 1px solid #777;
	}
	div.postform select
	{
		margin: 0;
	}
	div.postform label
	{
		font-size: 110%;
		display: block;
	}
	div.postform label span
	{
		font-size: 80%;
	}
	div.columns input[type^='text'], div.columns input[type^='password'], div.columns textarea
	{
		border: 0;
		display: block;
	}
	div.postform input[type^='text'], div.postform input[type^='password'], div.postform select, div.postform textarea
	{
		width: 200px;
		border: 1px solid #777;
	}
	div.postform textarea, div.postform input.tags
	{
		width: 99%;
		overflow: auto;
	}
	div.columns textarea
	{
		width: 100%;
	}
	div.nav ul li input[type^='text']
	{
		width: 30px;
	}

	input[type^='button'], input[type^='submit'], input[type^='reset']
	{
		padding: 3px 5px;
		cursor: pointer;
		color: #444;
		font-weight: bold;
		border: 1px solid #444;
		background: #eef url('img/back_0.png') center left repeat-x;
	}

	div.columns input[type^='button'], div.columns input[type^='submit'], div.columns input[type^='reset'] 
	{
		width:100px;
	}

	div.postform input[type^='button']:hover, div.postform input[type^='submit']:hover, div.postform input[type^='reset']:hover input[type^='button']:hover, input[type^='submit']:hover, input[type^='reset']:hover
	{
		color: #395e7e;
		border-color: #395e7e;
		background-image: url('img/back_1.png');
		
	}
	div.nav input[type^='button'], div.nav input[type^='submit'], div.nav input[type^='reset']
	{
		padding: 0;
		background: #444;
		color: #bbb;
	}
	div.nav input[type^='button']:hover, div.nav input[type^='submit']:hover, div.nav input[type^='reset']:hover
	{
		color: #fff;
		border-color: #555;
	}
	div.sidebar input[type^='text'], div.sidebar input[type^='password'], div.sidebar textarea
	{
		width: 80%;
		display: inline;
		border: 1px solid #aaa;
	}
	label.error
	{
		color: #fff;
		background: #f33;
		padding: 2px;
	}
	div.postform label.error
	{
		max-width: 350px;
	}
	div.columns label.error
	{
		font-weight: bold;
	}
	input[type^='text'].error, input[type^='password'].error, textarea.error
	{
		color: #f33;
		background: #fea;
	}

	div.sidebar input[type^='text'].error, div.sidebar input[type^='password'].error, div.sidebar textarea.error, div.postform input[type^='text'].error, div.postform input[type^='password'].error, div.postform textarea.error
	{
		color: #000;
		border: 1px solid #f33;
	}
	div.sidebar input[type^='text'].error, div.sidebar input[type^='password'].error, div.sidebar textarea.error
	{
		display: block;
	}

	/* Tags */
	p.tags
	{
		line-height: 230%;
	}
	a.tag
	{
		color: #666;
		padding: 5px 3px;
		text-decoration: none;
	}
	a.tag:hover
	{
		color: #55f;
		background: #eef;
	}
	a.x1
	{
		font-size: 11px;
	}
	a.x2
	{
		font-size: 12px;
	}
	a.x3
	{
		font-size: 13px;
	}
	a.x4
	{
		font-size: 14px;
	}
	a.x5
	{
		font-size: 15px;
	}
	a.x6
	{
		font-size: 16px;
	}
	a.x7
	{
		font-size: 17px;
	}
	a.x7
	{
		font-size: 18px;
	}
	a.x8
	{
		font-size: 18px;
	}
	a.x9
	{
		font-size: 19px;
	}
	a.x10
	{
		font-size: 20px;
	}
	a.x11
	{
		font-size: 21px;
	}
	a.x12
	{
		font-size: 22px;
	}
	a.x13
	{
		font-size: 23px;
	}
	a.x14
	{
		font-size: 24px;
	}
	a.x15
	{
		font-size: 25px;
	}

	table.itemgrid
	{
		width: 100%;
		margin: 10px;
	}
	table.itemgrid th
	{
		background: #eef;
		padding: 3px 5px;
	}

	table.itemgrid td
	{
		padding: 3px;
	}
}

/* Portable device */
@media handheld
{
	body
	{
		background: #fff;
		color: #444;
	}
	div.sidebar, div.extras
	{
		display: none;
	}
}

/* Printer specific */
@media print
{
	body
	{
		background: #fff;
		color: #444;
	}
	div.sidebar, div.extras
	{
		display: none;
	}
}

I think this is a reasonably comprehensive theme that will allow your project to grow over time. At the same time, it gives you a lot of options to play around with.

Now that that’s done, we need to go into the Views > Shared folder and edit the Site.Master file to match the following…

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head runat="server">
	<title>
		<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
	</title>
	<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="page">
		<div class="header">
			<h1><a href="">Simple<span>CMS</span></a></h1>
			<p class="info">“A basic demonstration project”</p>
			<div class="nav">
				<ul>
					<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
					<li><%: Html.ActionLink("About", "About", "Home")%></li>
				</ul>
			</div>
		</div>
		<div class="body">
			<div class="content">
				<asp:ContentPlaceHolder ID="MainContent" runat="server" />
			</div>
			<div class="sidebar">
				<asp:ContentPlaceHolder ID="Sidebar" runat="server" />
			</div>
			<div class="columns">
				<div class="column">
					<asp:ContentPlaceHolder ID="Column1" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column2" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column3" runat="server" />
				</div>
				<div class="column">
					<asp:ContentPlaceHolder ID="Column4" runat="server" />
				</div>
				<hr />
			</div>
			<div class="footer">
				<p>
					Copyright © 2010</p>
			</div>
		</div>
	</div>
</body>
</html>

Notice we’ve significantly added to the screen realestate by splitting it up to many sections. But don’t worry, we don’t need to use all of them at once.

Onward to step 3…

Advertisement

8 thoughts on “Simple CMS with Linq to SQL

  1. Pingback: Simple CMS with Linq to SQL part II « This page intentionally left ugly

  2. Pingback: Forum Tables « This page intentionally left ugly

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s