Prelude : Reading throughhttp://atomsite.net/info/Themes.xhtmlmight 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":
- Create the folder "sample" in themes
- Copy the "settings.xml" from "themes/settings/settings.xml" and rename it to "sample.xml"
-
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 - When finishing up the theme, remember to change the screenshot,
homepage, author, contributor and dates (published, updated).
Note: Not needed in this stage.. - Log in to your Admin Dashboard, and choose the Sample Theme, and then open up your home page..
- You should see a very simple (yet still structured) text only
theme:
- Download this file :
(Shamelessly generated at http://bgpatterns.com/), and save it as "img/sample/background.jpg". (create the folder)
- Create the file "sample.css" in "css/sample/"
(again, the folder needs to be created)
Add the following to the created CSS file:body {
background : transparent url('../../img/sample/background.jpg') repeat fixed;
} - 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. - Copy the file "themes/default/Site.Master" to "themes/sample/" .
- Edit the copied "Site.Master" and add :<h3>I can has my custom sub sub title!</h3>
<h4>Even with dynamic content (Today == <%= DateTime.Now.ToString() %>)!</h4>
right after :<h1><a href="/"><%= Model.Workspace.Title %></a></h1>
<h2><%= Model.Workspace.Subtitle %></h2> - 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:
When using AtomSite in a subfolder
Change the following in the "Site.Master" to fix the link in the header:
| To Find | Replace with |
|---|---|
|
<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!
- Master Page
- General layout
- Navigation
- Search bar
- Footer
- Sidebar
- Blog Home
- Blog Listing
- Blog Entry
- Blog Comments (View)
- Blog Comments (Adding)
- 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:
<% 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
%7Cutmcsr%3D(direct)%7Cutmcmd%3D(none)%3B%2B__utmv%3D839334882.-%3B)