Skip to content

Instantly share code, notes, and snippets.

@iainurquhart

iainurquhart/gist:1260686

Created October 4, 2011 01:08
Show Gist options
  • Save iainurquhart/1260686 to your computer and use it in GitHub Desktop.
Save iainurquhart/1260686 to your computer and use it in GitHub Desktop.
Download ZIP
example screensteps template
Raw
gistfile1.html
[-- START CONFIGURATION --]
web safe= true
web safe delimiter=_
text style= html
text encoding= utf8
font family = helvetica
newline = unix
media folder= images/@LESSON_NAME
image format=png
jpeg quality=85
step image position = top
max image width on side=400
max image height on side=
max image width when centered=580
max image height when centered=
[-- END CONFIGURATION --]
[-- START CONTENT --]
<!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">
<head>
<title>%LessonTitle%</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="ScreenSteps http://www.screensteps.com" />
<link href="css/modern-black-red.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/prettyPhoto.css" media="screen" rel="stylesheet" type="text/css" charset="utf-8" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
show_title: false
});
});
</script>
</head>
<body class="%FontFamily%">
<div id="wrapper">
<div id="LessonContent">
<div class="LessonHeader">
<h1 class="LessonTitle">%LessonTitle%</h1>
</div>
%LESSON_DESCRIPTION%
%LESSON_STEPS%
</div>
</div>
</body>
</html>
[-- END CONTENT --]
[-- START LESSON DESCRIPTION --]
<div class="summary">
%LessonDescription%
</div>
[-- END LESSON DESCRIPTION --]
[-- START STEP --]
<div id="step_%Index%" class="lessonStep %ImagePosition%">
%STEP_TITLE%
%MEDIA:IMAGE% %STEP_INSTRUCTIONS%
</div>
<div class="clear"></div>
[-- END STEP --]
[-- START STEP TITLE --]
<h2 class="StepTitle">%Title%</h2>
[-- END STEP TITLE --]
[-- START STEP INSTRUCTIONS --]
%Instructions%
[-- END STEP INSTRUCTIONS --]
[-- START MEDIA:IMAGE --]
<div class="image">
<img src="%source%" width="%width%" height="%height%" alt="" />
</div>
[-- END MEDIA:IMAGE --]
[-- START MEDIA:IMAGE FULL-SIZE --]
<div class="image">
<a href="%fullsize_source%" rel="prettyPhoto" class="image" target="_blank"><img src="%source%" width="%width%" height="%height%" alt="%StepTitle%" /></a>
<div class="caption"><a href="%fullsize_source%" rel="prettyPhoto" target="_blank">Zoom</a></div>
</div>
[-- END MEDIA:IMAGE FULL-SIZE --]
[-- START MEDIA:TEXT --]
<div class="image">
%text%
</div>
[-- END MEDIA:TEXT --]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment