Theme Styleguide

This page is to list different styles used on the site in order to keep the format consistent and re-use elements.

Displaying Images

Images should be aligned using alignleft, aligncenter or alignright. To stop a image blending into the background, use class of bordered: Screenshot_heidijoycegardens

Comparing images

<div class="clearAfter" style="width:570px;margin:0 auto 20px auto">
<div class="alignleft" style="width:265x;padding-right:5px;border-right:1px dashed black;text-align:center">
<h2>Tutorial end product</h2>
<p><img src="http://www.bitvolution.com/wp-content/uploads/2009/11/aBlankCanvas1.png" alt="aBlankCanvas" title="aBlankCanvas" width="255" height="168" class="alignnone size-full wp-image-433" />
<br />Click to enlarge</p>
</div>
<div class="alignleft" style="width:300px;padding-left:5px;text-align:center">
<h2>Real-world example</h2>
<p><img src="http://www.bitvolution.com/wp-content/uploads/2009/11/anonBlankCanvas-300x168.png" alt="a non-blank Canvas" title="a non-blank Canvas" width="300" height="168" class="alignnone size-medium wp-image-346" />
<br />Click to enlarge</p>
</div>
</div>

Tutorial end product

aBlankCanvas
Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Lists

If you don't want bullets, use: <ul class="nobullets"> Tick list: <ul class="tickList">
  • hello
  • Goodbye
Styled number list: <ul class="styledList">

  1. Thing A - Hello.

  2. Thing B - Goodbye.

Displaying sourcecode and CLI commands

Code one-liners

Use <code>Remember to manually use &lt; and &gt; for angle brackets!<code>. Result: Remember to manually use &lt; and &gt; for angle brackets!

CLI commands

Use a span with class "iconTerminal". e.g. <span class="iconTerminal">sudo apt-get install msttcorefonts</span>: sudo apt-get install msttcorefonts

References to file names

Use normal italics e.g. <em>/home/yourhome/gimpTesting/drawShadow.pl</em>: /home/yourhome/gimpTesting/drawShadow.pl

References to commands, instructions, actions etc

Use a span with class "demoCom". e.g. <span class="demoCom">instruction goes here</span>: Create a new image: File->New. Select the "Bucket fill tool" Shift+b

References to settings and parameters

Use a span with class "demoSetting". e.g. <span class="demoSetting">setting goes here</span>: Image size: 960 x 60, Fill with Transparency