in General

PyroCMS Theme Development

Over the last few days, when time has allowed, I have slowly converted a sites design over to a PyroCMS theme.What I’ve done so far has been pretty easy and I found myself wondering why others haven’t done this.

So far here’s what I’ve done.  I viewed the source of the site I wanted to convert and copy and pasted it over to the appropriate folder for my theme in my PyroCMS install (there’s a bit more to setting up a theme, and I’ll cover that in another post).  Once I’d done that I could view the content on the site.  But it wasn’t styled, so I pulled over my styles and then took a peak.  Looked better, but there were a few pieces of navigation that was missing.  It took me a bit of time to figure this out, but eventually I did.  It was because those pieces of navigation had an image element in them.  In this case I was able to replace the image element with a solid color.  If you are going to have an image element in a style, the best way I believe to do this is to put it in your header.  The reason I say this is two fold.

  • CSS files are not parsed by PHP
  • In order to get the image to show up, from your CSS, you’d have to hard code the path in your CSS file which would cause an endless amounts of nightmares because themes can be installed in one of two places (well technically three)

At this point I started taking apart the default.html file that I’d copied over and creating partials.  If you’re familiar with how PHP includes you’ll be right at home with the partials. Even if you aren’t it won’t take you very long to pick them up.

Lastly a couple of other notes about putting together a theme.

  • For your items that are going to be in the header of your site and exist throughout the site use the asset tag.  As I understand it when the theme is in production the asset tag will minify the CSS (hopefully decreasing the load time if the site)
  • For images that are crucial to the site and you’ll be bundling with the theme use the theme tag.  Seems pretty obvious now, but for awhile I was trying to use the asset tag and it wasn’t going to work.

Happy Coding.