Erik Zaadi

The tales of a developer with passion for dad jokes

Creating a theme for AtomSite, a quick walkthrough

Published - 2010-06-20 | 3min

Prelude : Reading throughhttp://atomsite.net/info/Themes.xhtml might help if anything here is not understood.

Small disclaimer: I’m under no circumstances a good designer, hence the “estetics” of the sample..

It might be needless to say, but I do recommend having a local copy of AtomSite available to test the theme until it’s mature..

Getting Started:

Let’s say we want to create a template called “Sample”:

  1. Create the folder “sample” in themes

  2. Copy the “settings.xml” from “themes/settings/settings.xml” and rename it to “sample.xml”

  3. Open up the xml, and change the following tags to the following values:

Tag Name Tag Value atom:title Sample Theme atom:content This is the Sample Theme’s description… atom:id tag.atomsite.net,2008:themes,sample

  1. When finishing up the theme, remember to change the screenshot, homepage, author, contributor and dates (published, updated).

Note: Not needed in this stage..

  1. Log in to your Admin Dashboard, and choose the Sample Theme, and then open up your home page..

  2. You should see a very simple (yet still structured) text only theme:

  3. Download this file : 

(Shamelessly generated at [http://bgpatterns.com/](http://bgpatterns.com/)), and save it as _"img/sample/background.jpg"._ (create the folder)
  1. Create the file “sample.css” in “css/sample/" (again, the folder needs to be created)
Add the following to the created CSS file:

1
2
3

body {
    background : transparent url('../../img/sample/background.jpg') repeat fixed;
}
  1. Refresh the browser with the home page, and voila! , you get a new lovely background.

_So what happened here? _AtomSiteautomagically picks up the CSS file, since it’s named the same as the theme.

Notice the path to the image, this is very important, since you’d typically only use your own images, and the best place to put them is in your themes designated image folder.

Ok, You’re a CSS Ninja, you know how you could “re-skin” everything with CSS only, which is fully possible, since AtomSite adds id’s to the body per page and component.

My CSS Fu can be disputed, and from what I’ve experienced so far, I’ve usually needed to alter the HTML markup to generate the desired result.

  1. Copy the file “themes/default/Site.Master” to “themes/sample/" .

  2. Edit the copied “Site.Master” and add :

1
2

<h3>I can has my custom sub sub title!</h3>
<h4>Even with dynamic content (Today == <%= DateTime.Now.ToString() %>)!</h4>

right after :

1
2

<h1><a href="/"><%= Model.Workspace.Title %></a></h1>
<h2><%= Model.Workspace.Subtitle %></h2>
  1. Refresh, and you’ll see the new sub sub, and sub sub sub titles (pun intended).

YUI or not to YUI

AtomSite uses the YUI CSS framework reset. Although it’s a very powerful framework, I have to admit that I personally prefer writing my own or using blueprintcss. To disable the YUI framework in your theme, remove the following line from the file “Site.Master” in your theme folder:

1

<link rel="stylesheet" type="text/css" href="<%= Url.StyleHref("reset-fonts-grids-2.7.0.css") %>" />

When using AtomSite in a subfolder

Change the following in the “Site.Master” to fix the link in the header:

To Find Replace with

1
2

<h1><a href="/"><%= Model.Workspace.Title %></a></h1>
<h1><a href="<%= Url.Content("~/)"><%= Model.Workspace.Title %></a></h1>

Testing

Nothing can replace good testing, here’s the usual list of tests I run to ensure that the theme is ready

Very Important:always check each task both authenticated as an admin, as a user and not authenticated!

  1. Master Page
1. General layout


2. Navigation


3. Search bar


4. Footer


5. Sidebar

  1. Blog Home

  2. Blog Listing

  3. Blog Entry

  4. Blog Comments (View)

  5. Blog Comments (Adding)

  6. Sidebar Widgets

Test the theme in all browsers (Chrome, Opera, Firefox, Safari), and even non browsers as IE..

ThemeExtensions

I’ve written a plugin to AtomSite which exposes Html and Url Helpers that saves some time when developing / porting a theme.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<ul>


<% foreach (var status in Model.Statuses){ %>
<li><span class="entry">
<%= Html.ThemeExtensions().Social.MakeTwitterContentClickable(status.Text)%>
<a class="date" href="http://twitter.com/<%= Model.Statuses.First().User.ScreenName %>/statuses/<%= status.Id %>" rel="nofollow"><%= Html.DateTimeAgoAbbreviation(status.CreatedAt)%></a></span>
</li>
<% } %>
</ul>

You can download or fork the source code here.

More samples

The source code for AtomSiteThemes might help, besides the AtomSite code there, it also includes all custom themes I’ve ported from Wordpress so far, grab it here.

Sample theme from this post : Preview | Download

If you found this interesting, [Porting Wordpress themes to AtomSite] will be available soon..

Enjoy!

Erik

Share on: