From Wordpress Theme to Graffiti Theme in X Easy Steps

I recently decided I'd better come up with a theme for my website that reflected my personality.  While I absolutely love the Gulf Coasting theme for Graffiti CMS, I was excited to make something more my own.  Being a bit of a designer plebeian, I spent numerous days browsing free CSS templates and free Wordpress themes to see what tripped my proverbial trigger.  The Wordpress themes seemed to be more in line with the type of blog site I'm running so I narrowed down my searches in that respect.

Instrumental in my preparation, research and education were the following excellent blog posts from some of my peers:

 

So I finally decided on the Green Bug Theme by Shrihari  & Nitrogen Designs as follows:

 

image

 

I downloaded and unzipped the zip file to my local machine and set to work using a mixture of Terri's and Karthik's techniques.  (Note: there was some trial and error involved before I came up with the following methodology that worked best for me - aka a sometimes airhead)

 

Getting Started

Using my local installation of Graffiti CMS, I went into the Admin section beneath Presentation/Themes and chose to Create a New Theme.  I gave it a name (GreenBug) and selected it as the current theme.

 

The first thing I did was to remove the custom.css, the ie6.css and the ie7.css files.  Then I copied the content from index.view, layout.view and post.view into their own little html files that I could play with in Visual Studio  (I found this was more helpful later for figuring out which macros to put where later in the process, but for more information, there is a page on macros at the Graffiti CMS Website).  I modified these filenames with an "_old" appendage so I would not get them confused with the actual template files.

 

Now, you can use the editor built into the Graffiti admin section, but I found that I preferred to use Visual Studio - ESPECIALLY for the style.css file.  So I navigated to my theme Folder - <GraffitiRoot>\files\themes\GreenBug and opened style.css, layout.view, index.view and post.view in Visual Studio. 

 

I then deleted everything in style.css, index.view and post.view, and commented out what was in layout.view (I could have deleted it too since I had a backup, but this was easier for seeing what macros to plug in - I later deleted that section too).  I went to the unzipped GreenBug Wordpress Theme folder and copied all of style.css and used that to replace my theme's style.css that I had open for editing.  I also copied the images directory into my theme's images directory.

 

Next, I went to the Wordpress Preview Link (you can find it in the link to the WP Green Bug Theme in the image above) and launched the theme in preview mode.  I don't like to dig through the various PHP files in a WP theme, so instead,  I hit my handy dandy Right Click/View Source button in Firefox and copied the entire source and pasted it into my layout.view.  A great deal of this would be moved out later on in the process, but this was the easiest way to incrementally test if the site was rendering correctly in both IE and Firefox.

 

So I saved my style.css and layout.view and looked at the site (if done correctly, it will look just like the Wordpress Preview Site). 

 

It's All In My Head

So next I began with the head tag and replaced it with the following:

 

    <head>
        <title>$title</title>
        $macros.Style("style.css","screen")
        $macros.Head()
    </head>

 

Next, in layout.view, I replaced the static page title and tagline items with the macro values (hint: you can see these in the code that was commented out for reference).  I had to add my own css in here for the tagline as there was not such an item in the WP theme.

 

The navbar code was gravy too, since this particular WP theme used a simple styled UL.  Graffiti uses list items for the menu.  I dug through the html and found the class for the menu and pasted in the macro.  I then created a style declaration in style.css for my RSS button (that Rss URL is set up in Site Settings) and popped in that macro as well as follows:

 

  <divid="menu">
    <ul>
         $macros.NavBar()
    </ul>
    <ahref="$urls.Rss"target="new"><span> </span></a>
  </div>

 

 

On The Side

The items in the sidebar were a tiny bit trickier, but not too bad.  I wanted my search box to go in my right side nav, but this WP theme did not accommodate a search.  So I looked in my theme collection (in the Graffiti Control Panel) and found one with a search and grabbed that html and macro from it's layout.view.  I then  returned to layout view and added an extra div at the top for my search form, and pasted that html into the div. I styled it the same as the divs for the static sidebar items that were below.  The macro for rendering the side widgets treats the widget content as Unordered Lists.  The syntax to pop the before and after html/class declarations took a bit of getting used to, but it wasn't too hard  (I'm separating it into 4 lines here to ease viewing, but I have it on one line):

 

$macros.RightSideBar("%{beforeWidget='<div class=\"ltop\"> </
div><div class=\"lmid\">', 
afterWidget='</div><div class=\"lbot\"></div>', 
beforeTitle='<h2>', afterTitle='</h2>'}")

 

In the previous example, I was just making sure the top and bottom divs got declared by putting that html in there.  I also was able to style the widget headers.  I just used the static divs as an example.

 

After saving and previewing the site again, I removed all the static divs I'd pasted in from the WP source and tested one more time for good measure.  Once satisfied, I decided I wanted to pull that side menu bar out into its own view in case I decided to customize it later.  That was quite simple.  I just created a sidebar.view in the Graffiti Theme Admin and then opened it up in Visual Studio.  I then cut and pasted the div for my search box, and the above macro into sidebar.view, then put LoadThemeView() macro  into layout.view where it was previously as follows:

 

$macros.LoadThemeView("sidebar.view")

 

The same can be done to the header and footer portions of the theme, if the author so desires.  I did not pull those sections out for this theme.

 

 
 

Stuck In The Middle With You

For the middle post preview content, I took a similar approach as above; I found the portion of static html that had the first div for a post item, and copied out one of the divs.  I then pasted that into my index.view file.  Index.view holds the post previews.  I returned to layout.view and commented out the remaining static preview divs and put in the section to grab the post previews as follows:

 

$childContent

 

Upon saving and refreshing my site again, I now saw the ONE post preview I'd pasted into index.view.  This is where I was happy to have saved the original index.view before getting into my theme.  I simply compared the two files to figure out what to pop into the place of static content in my new index.view  It was easy to figure out the different cases for no posts vs. posts and the other Chalk code in the page, but again, refer to the GraffitiCMS site if necessary.

 

The next page I needed to address was the page that lists the full post and has the form for comments

 

My Head on a Post

This process was again, very similar to what I'd done so far.  I had to return to my WP Theme Preview and click on a Post to see how they'd laid out the post page.  I again, did a View Source on that page.  I scrolled down into the middle and copied out the div that contained the post body, comments and form to add a comment.  I then pasted that static html into my post.view file and saved it.  There was nothing more to do to layout.view because that all got wired up with the insertion of all the macros I'd done in previous steps.  I took a minute to test my site and clicked on the Post Preview Titles to confirm that the actual Post page looked as it should.

 

As I'd done with the previous items, I returned back to the original layout.view_old that I'd backed up when I began.  I kept the divs in tact copied the individual macro items from that page and popped them into my static html where appropriate in post.view.  I had to be careful to get all the static links replaced - I'd overlooked a couple.  Once again, I saved and previewed the site and VOILA!  When I clicked on a post preview from the home page, the entire post showed stylized in my new post.view page.  I tested the links and adding a comment and worked out a couple of little issues there and all that was left was the footer.

 

Finishing Up

in the backup version of layout.view I'd saved, there was some dynamic content for the footer, but for this version of the theme, I decided to just credit the original WP authors.  Again, I just replaced the <footer> div in layout.view to do this.

 

Tweaks

After I was satisfied that I'd gotten pretty darn close to the original WP theme, I went back and added some tweaks.  I added the board background, and monkeyed around with some of the font colors and sizes  All in all I don't think it's bad for a first pass!

 

Want a Copy??

Anybody is welcome to

Download this Theme Here

and modify it.  (I believe the original WP authors would still like their credit for the design) 

To install into GraffitiCMS, just upload the GreenBug.xml file found in the zip file.

 

Enjoy!

kick it on DotNetKicks.com

August 06 2008 Dana Coffey 4 Comments Filed under: Graffiti CMS
Tagged as: , , ,

4 Comments and Trackback(s)

Leave a Reply

 
© Crazeegeekchick.com | Theme design by Dana Coffey | Powered by GraffitiCMS