Notational Velocity (nvAlt) Custom Stylesheet and Markup HTML

README.md

Usage

Copy these files to your ~/Library/Application Support/Notational Velocity/ folder

custom.css

/*------------------------------------------------------------------------------
@group Wiki Styles
------------------------------------------------------------------------------*/

body {
	font-family: Helvetica;
	background: #f8f8f8;
}

h1, h2, h3, h4, h5, h6 {
	border: 0;
}

h1 {
	font-size: 170%;
	border-top: 4px solid #aaa;
	padding-top: .5em;
	margin-top: 1.5em;
}

h1:first-child {
	margin-top: 0;
	padding-top: .25em;
	border-top: none;
}

h2 {
	font-size: 150%;
	margin-top: 1.5em;
	border-top: 4px solid #e0e0e0;
	padding-top: .5em;
}

h3 {
	margin-top: 1em;
}

p {
	margin: 1em 0;
	line-height: 1.5em;
}

ul {
	margin: 1em 0 1em 2em;
}

ul {
	margin-top: 0;
	margin-bottom: 0;
}

ol {
	margin: 1em 0 1em 2em;
}

ol ol {
	margin-top: 0;
	margin-bottom: 0;
}

ul ul,
ul ol,
ol ol,
ol ul {
	margin-top: 0;
	margin-bottom: 0;
}

blockquote {
	margin: 1em 0;
	border-left: 5px solid #ddd;
	padding-left: .6em;
	color: #555;
}

dt {
	font-weight: bold;
	margin-left: 1em;
}

dd {
	margin-left: 2em;
	margin-bottom: 1em;
}

table {
	margin: 1em 0;
}

table th {
	border-bottom: 1px solid #bbb;
	padding: .2em 1em;
}

table td {
	border-bottom: 1px solid #ddd;
	padding: .2em 1em;
}

pre {
	margin: 1em 0;
	font-size: 90%;
	background-color: #f8f8ff;
	border: 1px solid #dedede;
	padding: .5em;
	line-height: 1.5em;
	color: #444;
	overflow: auto;
}

pre code {
	padding: 0;
	font-size: 100%;
	background-color: #f8f8ff;
	border: none;
}

code {
	font-size: 90%;
	background-color: #f8f8ff;
	color: #444;
	padding: 0 .2em;
	border: 1px solid #dedede;
}

/* console */

pre.console {
	margin: 1em 0;
	font-size: 90%;
	background-color: black;
	padding: .5em;
	line-height: 1.5em;
	color: white;
}

pre.console code {
	padding: 0;
	font-size: 100%;
	background-color: black;
	border: none;
	color: white;
}

pre.console span {
	color: #888;
}

pre.console span.command {
	color: yellow;
}

/* @end */






/* @group Notational Velocity Default */

body,p,td,div {
	font-family: Helvetica,Arial,sans-serif;
	line-height: 1.4em;
	font-size: 14px;
	color: #111;
}
p {
	margin: 0 0 1.7em 0;
}
a {
	color: rgb(13,110,161);
	text-decoration: none;
	-webkit-transition: color .2s ease-in-out;
}
a:hover {
	color: #3593d9;
}
h1.doctitle {
	background: #eee;
	font-size: 14px;
	font-weight: bold;
	color: #333;
	line-height: 25px;
	margin: 0;
	margin-bottom: 10px;
	padding: 0 10px;
	border-bottom: solid 1px #aaa;
	height: 25px;
	overflow: hidden;
	text-shadow: 0 1px 0 #FFF;
	letter-spacing: -1px;
}

.footnote {
	font-size: .8em;
	vertical-align: super;
	color: rgb(13,110,161);
}
#wrapper {
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-box-shadow: inset 0px 0px 4px #8F8D87;
}
#contentdiv {
	position: fixed;
	top: 27px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	background: transparent;
	color: #303030;
	overflow: auto;
	text-indent: 0px;
	padding: 10px;
}
#contentdiv::-webkit-scrollbar {
	width: 6px;
}
#contentdiv::-webkit-scrollbar:horizontal {
	height: 6px;
	display: none;
}
#contentdiv::-webkit-scrollbar-track {
	background: transparent;
	-webkit-border-radius: 0;
	right: 10px;
}
#contentdiv::-webkit-scrollbar-track:disabled {
	display: none;
}
#contentdiv::-webkit-scrollbar-thumb {
	border-width: 0;
	min-height: 20px;
	background: #777;
	opacity: 0.4;
	-webkit-border-radius: 5px;
}

/* @end */



/* @group Lists */

/* Styling of list items
* This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
*/
ol li,
ul ol li {
	list-style-type: decimal;
}
ul li {
	list-style-type: disc;
}
ul ul li {
	list-style-type: circle;
}
ul ul ul li {
	list-style-type: square;
}
ol ol li {
	list-style-type: lower-alpha;
}
ol ol ol li {
	list-style-type: lower-roman;
}

/*dd p, dd pre, dd ul, dd ol, dd dl, */
li p, li pre, li ul, li ol,/* li dl, */
fieldset p, fieldset ul, fieldset ol,
blockquote p {
	padding-right: 0;
	padding-left: 0;
}



ul {
	list-style-position: outside;
}
li ul,
li ol {
	margin: 0 1.618em;
}
ul, ol {
	margin: 0 0 1.618em 0;
}


/* @end */


.line,.lastUnit {
	overflow: hidden; *overflow:visible;*zoom:1;
}
.unit {
	float: left;
}
.unitRight {
	float: right;
}
.size1of1 {
	float: none;
}
.size1of2 {
	width: 50%;
}
.size1of3 {
	width: 33.33333%;
}
.size2of3 {
	width: 66.66666%;
}
.size1of4 {
	width: 25%;
}
.size3of4 {
	width: 75%;
}
.size1of5 {
	width: 20%;
}
.size2of5 {
	width: 40%;
}
.size3of5 {
	width: 60%;
}
.size4of5 {
	width: 80%;
}
.lastUnit {
	float: none;
	width: auto;
	_position: relative;
	_left: -3px;
	_margin-right: -3px;
}


/* @group Definition Lists */

/* *
* http://www.css-101.org/articles/glossary-and-table-format/definition-list.php
*/

/*
* overflow and width will enclose the floats across browsers
*/
dl {
	width: 90%;
	margin: 20px auto;
	overflow: hidden;
	overflow: hidden; *overflow:visible;*zoom:1;
}
/*
* DTs are floated to the left (in all browsers)
* The margin is to make the vertical borders overlap
*/
dt {
	float: left;
	width: 18%; /*160px;*/
	clear:both;
	padding: 3px 3% 4px 0;
	padding-bottom: 15px;
	margin-right: -1px;
	border-right: 1px solid #999;
	position: relative;
}
/*
* DDs are floated to the right (in decent browsers)
*/
dd {
	float: left;
	width: 73%; /*519px; */
	padding:3px 0 15px 3%;
	border-left: 1px solid #999;
	margin-left: 24%;
	overflow: hidden; *overflow:visible;*zoom:1;
	float: none;
	width: auto;
	_position: relative;
	_left: -3px;
	_margin-right: -3px;
}

/*
* some extra styling for non IE 6/7 browsers
*/
dt:before {
	content: "";
	width: 30px;
	position: absolute;
	border-top: 1px solid #999;
	top: -5px;
	right: -15px;
}
dt:after {
	content: "";
	width: 5px;
	height: 5px;
	background: #333;
	border: 1px solid #999;
	position: absolute;
	border-radius: 6px;
	top: -8px;
	right: -4px;
}
/* @end */

template.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">

	<meta name="Format" content="complete" />
	<meta name="format" content="complete" />

	<style type="text/css">

	{%style%}

	</style>

</head>
<body>
	<div id="wrapper">

		<h1 class="doctitle">{%title%}</h1>

		<div id="contentdiv">
			{%content%}
		</div>

	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {
			$('a').attr('target', '_blank');
		});
	</script>

</body>
</html>