A while ago I stumbled across the GetSimple CMS. At the time I was working on developing my own CMS, which now exists only as a contacts application, because I found that Chris Cagle had done a bunch of work that would save me A LOT of time.
So I've been using it for about a year so far and I thought it was about time that I give back.
Two Themes in One
Change the css file in inc.start.php from style1.css to style2.css. Style2.css changes the layout to allow for longer nav items. Both styles are as responsive as each other.
Responsive
The theme is a responsive design with a 320px and up philosophy. That basically means that if you took out all of the @media calls in the CSS document. It would only render the mobile version. So browsers which do not support @media calls such as, IE 7 and below, will render the mobile version and not dynamically respond to the screen size.
HTML5 Boilerplate
That said, if a user comes to your site in IE6, or another seriously depreciated browser, they will receive an update message notifying that they should update. This is an inherent part of the HTML5 Boilerplate that is cooked into this theme. That means modernizer.js is also part of the theme allowing HTML5 objects to be rendered properly in old browsers.
Multiple Theme Pages
This theme comes with some extras that really help it stand out. First of all it comes with the following pages:
- Template.php (1-3 column layout)
- 2-column.php (1-2 column layout)
- 404.php (Set this as your default 404 page at /data/other/404.xml in template field) - Blog.php (Blog tile index page)
Code for image thumbnails
<ul class="thumbs">
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/desert.jpg" /></li>
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/sunflower.jpg" /></a>
</li>
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/jungle.jpg" /></a>
</li>
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/sun.jpg" /></a>
</li>
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/pelicans.jpg" /></a>
</li>
<li>
<a class="fbox" href="javascript:;"><img src="/data/uploads/blog/flamingo/landscape.jpg" /></a>
</li>
</ul>Style2 - add your tagline
For style2 you need to add a component and label it "tagline". Just enter in the text you wish to appear as your tagline, hit save and it will appear next to the site name you have given for your site (top left - mine is Portfolio & Blog).
Last but not least, charts
<dl class="chart">
<dd>
<p class="yellow" style="width:92%">
<span class="label">Illustrator<span class="value">92%</span></span>
</p>
</dd>
<dd>
<p class="pink" style="width:84%">
<span class="label">Photoshop<span class="value">83%></span>
</p>
</dd>
<dd>
<p class="yellow" style="width:80%">
<span class="label">InDesign<span class="value">80%</span></span>
</p>
</dd>
</dl>