Theme Modification With CodeCutter
For some time now Chris from Varsis Studio has been working on a new RapidWeaver utility to allow users to quickly and easily modify the CSS in their themes. The idea was born out of my frustration with trying to support user modified themes. I asked Chris if he could make an application that could help users modify their themes the right way — in a non-destructive manner — and in such a way that users could keep their mods even after the themes developer updates or upgrades that theme.
Here is a quick look at what Chris has come up with. It’s code named “CodeCutter” for now. If you like the idea, please get on board and take the alpha out for a spin and help Chris get this application closer to completion.
The Video Transcript
[00:00:00] Hello, this Adam from seyDoggy.com. I want to give you a brief introduction to an exciting new application in the works at Varsis Studios. This new application is a RapidWeaver utility that will allow users to modify the style of their themes in a non-destructive manner and will also allow users to retain those modifications through future developer issued updates.
Theme Editing Today
Lets first look at how themes are modified today:
Hack the Theme
[00:00:25] The most common, and arguably most problematic way to modify a theme is to open the themes contents and edit the style sheets within. The success rate will often vary since the modifications placed in one file may or may not be overwritten by another file further down the line.
[00:00:41] If you look at these results you can see my font changes made to the blockquote were effective, but the color changes were not recognized in the blockquote, the h1 tag or the link.
Modifications done this way can cause a lot of damage to theme and may create havoc for the developer when supporting it in the future. In fact, lots of theme developers will not support modified RapidWeaver themes.
Custom CSS Box
[00:01:11] The second, more ideal approach is add custom css to RapidWeavers own CSS field. This will result in the most successful style modifications but they are not carried over from page to page, making it necessary to copy your custom css to each page in your site.
CodeCutter method
[00:01:32] So what’s the solution? Varsis Studios has come up with a way to browse your themes CSS code, modify it and save it to it’s own style sheet directly in the theme. The application is code named CodeCutter and is a RapidWeaver utility with one purpose in mind, to help you modify your themes the right way. Lets have a look.
[00:01:49] Upon opening Code Cutter you’ll notice some familiar buttons. Let’s start by selecting the theme we wish to modify.
[00:01:58] Notice how the left-hand column gathers all of the style sheets used within the theme. It does so in the order that they appear on a published site. This important for recognizing the style sheet hierarchy. You can either browse through each sheets entire contents, or by expanding the sheet you can chose each selector individually.
[00:02:17] Once you have found the selector you wish to change, simply click the “Add To CSS” button, and your selector is now copied to the lower panels. This is where your custom CSS sheet is created.
Make some changes… and those changes are reflected in the theme preview.
[00:02:39] Remember how those styles I added directly to the themes contents didn’t work? Notice that there is nothing getting in the way of them working in Code Cutter. Also notice that the changes now effect every page in your site.
Always in Sync
[00:02:59] But here is where the real power of CodeCutter comes into play. All too often users will modify a theme only to have those modifications deleted or overwritten the next time the developer updates their theme. CodeCutter is smart enough to sync your changes back up if it detects that you customizations have been lost!
[00:03:30] And here is the other beautiful thing about CodeCutter; remember I said it’s non destructive? This means that CodeCutter doesn’t modify your themes built in style sheets. This makes it easy for developers to still support their own themes. Your theme modifications can be found in a single, easy to identify, CSS file. This makes it quick and easy to rule out, or remove your modifications all together. Getting to the root of the problem is now as easy as flipping a switch.
Wrap up
[00:03:59] I hope you’re as excited about CodeCutter as I am. It has a way to go still and Varsis Studio is looking for testers to help make this app become a reality. If you are interested in getting involved please visit dev.varsisstudio.com
Work hard. Day and night if you have to. CodeCutter is the biggest thing since RapidWeaver.
Brilliant. This is a lot better than actually pushing Adam to have a nervous breakdown or tell me to screw off. : )
[...] news:: Theme Modification With CodeCutter http://www.seydesign.com/home/weblog/2009/12/08/theme-modification-with-codecutter/ [...]
Any chance you’ll be adding an interface like CSS Edit’s for those of us who can’t code.
While we are advocates of the app and are certainly responsible for igniting the spark for it’s creation, we can’t actually speak to what will or won’t be in the app in it’s final release.
You can certainly suggest the idea under feature requests on the developers website.
This is VERY clever. Congratulations to all concerned on what you have achieved so far. Hope progress is just as dramatic in 2000 and 10. You don’t need to work day & night though. I wouldn’t impose that on anyone. Ha!
Love it – what a great idea. I expect Code Cutter will be big, very big, in the RW community. Thanks.
WOW! This is the best thing since sliced bread….ok well at least since RW came out. CodeCutter is a great idea and I hope it succeeds. Being able to modify CSS on many or all pages is something RW has been missing. Thanks for your hard work Adam and Chris!