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
What version are you using?
Something that you might get asked when inquiring about support issues for your favorite RapidWeaver theme or plugin is, “What version of Product X are you using?”
That’s not always easily answered if you don’t know what you are doing or where to look. RapidWeaver plugins can offer up such information in the plugin browser in RapidWeaver if you happen to have RapidWeaver open, but there is no such mechanism for themes.
If you wouldn’t mind a little help grabbing the version details of both RapidWeaver plugins and themes, we have authored a possible solution on our parent blog. It’s a little bit of AppleScript that should make the acquisition of your product version numbers a little simpler.
Great Discounts for Summer Break
June is here and for many that means that school is out! That’s great for the kids but leaves many parents wondering what to do with their youngsters. You want them to continue to exercise their minds so they don’t loose their edge before a new school year in the fall.
Well if you are reading this then you must already have a passion for RapidWeaver, so why not share that passion with your kids this summer and embark on a creative web project together? Start a family blog detailing the daily events of their summer vacation, post a photo album of camping or fishing trips or help them build an online resume for that summer job.
Your kids get a break this summer and parents should too. To help get your family web project rolling we are offering a Summer Break discount to get your kids just the look they want for their website. From now until June 7th (23:59 EST) you get 25% off when you use the code: summerbreak. Use it on our entire catalog of themes and use it as many times as you need and get your kids started on a new creative web project today!
Discount code (25% off):
summerbreak
We’ve gone and hired us some help!
It has been a long time coming. We’ve been in need of help around here for quite some time and we have finally taken that step forward. It’s one thing to have a small legion of contract contributors to the seyDesign team like Varsis Studios, Vortex, Med Designs, etc… But when it comes to actually running all the operations around here, from customer support, to press releases, site upkeep, product development and product launch… for that, there is, for the most part, only me.
But today is different. Today I am very proud to announce that Chris Cifonie of DEVi8.design and the designer behind the very popular DEViANT RapidWeaver theme is now an official, part-time employee of seyDoggy. Over time Chris will be taking on the role creative director/webmaster but for now Chris’ primary role is to create the beautiful theme styles and the gorgeous demo sites for each product.
There is no question about it, Chris has a killer design style. If there was any doubt, Chris was the guy behind the Med Design Bubblegum styles. We’ve never received as many positive comments on our theme styles as we did with Bubblegum so clearly Chris has the touch.
We are looking forward to Chris’ help in the coming months. This now frees us up to work faster, harder and move forward with newer designs and greater updates. So welcome aboard Chris.
NEW THEME: Creamux with ExtraContent
Something old and something new… When we adopted the Varsis Studio theme library, one of the themes that was coming back home was the Creamy and Creamy Wide themes. When first looking at how to bring these two greats up to speed to todays RapidWeaver 4 standards I had a number of ideas in mind; combine the two, make it more flexible, add more features. Before long though, it became apparent that this wasn’t going to be a Creamy update, it was going to be a totally new theme, a complete rebuild from the ground up… it was going to be a complete redux… it’s seyDoggy Creamux!
We proudly present to you Creamux, our latest all new theme. Creamux is ExtraContent enabled, with width options, comprehensive color control, 10 custom headers (RWmultitool ready), background and header effects and font control. This theme stands out bold and pops to life with it’s excellent design and professional styling.
seyDoggy Creamux, is another Ultimate theme for RapidWeaver packed with many features. It includes numerous snippets, the custom headers used in the demo and the RWmultitool project files used to create some of the headers (which will help you create your own).
Features at a glance:
- 2 Extracontent Areas
- Multiple Widths
- RWmultitool Ready
- Logo Control
- 10 Custom Headers
- Sidebar Positioning
- Font control
- Highly Comprehensive Color Control
- and more…
Learn more about PlayMore at ExtraContent.info
Love PlayMore but need a little help? Head on over to ExtraContent.info for a quick and informative run down on the particulars of PlayMore’s 3 ExtraContent areas. Ryan Smith of RapidWeaver Classroom shows us how to do a number a really neat tricks with Loghound’s Pluskit and gives a quick once over of PlayMore all around. Check out the video now.
RapidWeaver Classroom Cross Promotion
Back on January 5th, our parent company, seyDoggy Web and Graphic Design, quietly launched ExtraContent.info in support of our recent launch of PlayMore. We would have liked to say something about it sooner but time simply just got away from us. ExtraContent.info is a community site intent on helping new users get the hang of ExtraContent enabled themes. We hope it will soon be filled with lots of great material soon.
But this brings us to the bigger point of this post. We have recently hashed out a cross promotional deal with RapidWeaver Classroom. You can get a 20% discount from your subscription with RapidWeaver Classroom when you sign up at the seyDesign Google Group. What’s even more incredible is that you get 50% off all seyDesign themes when you sign up for a membership with RapidWeaver Classroom! Put those two great offers together and you’re looking at a total of 70% savings! Woo-hoo!
NEW THEME: seyDoggy PlayMore, with ExtraContent
When we introduced our first ExtraContent enable RapidWeaver theme, Gotem, we had high hopes of the concept doing well among advanced users. We never imagined that it would take off as wildly as it did with all levels of user experience. This wide adoption rate gave us the confidence to take the idea further.
Gotem was a great proof of concept, but we knew we were after a bigger picture. Our latest theme, PlayMore takes the ExtraContent feature another step further with more flexibility, more control and more freedom. The ExtraContent areas, 3 of them, are now just a part of the fluid design of this exquisitely crafted RapidWeaver theme.
seyDoggy PlayMore, is another Ultimate theme for RapidWeaver and has lots of features. It includes numerous snippets, the original header graphic art (which I presume your wouldn’t want to use) and the RWmultitool project files used to create the headers (which will help you create your own).
Features at a glance:
- 3 Extracontent Areas
- Multiple Widths
- Rwwmultitool Ready
- Header height
- 10 Custom headers
- Sidebar Positioning
- Font control
- Highly Comprehensive Color Control
- and more…
ExtraContent Tutorials
Gary at RWT and SupportCasts.com was nice enough to put together a *eh-hem* human sounding screen cast (more human than our own) that further helps users understand the ExtraContent feature found in our latest theme, Gotem, a feature that we’ll likely see more of:
NEW THEME: seyDoggy Gotem, with ExtraContent
The Beatles once said, “I get by with a little help from my friends.” That is definitely the case with the technology behind the latest theme from seyDoggy, Gotem. Our latest RapidWeaver theme is a sophisticated, contemporary RapidWeaver theme of extraordinary beauty and capability. But it also sports a new technology called ExtraContent.
ExtraContent came about when a handful of 3rd party developers got together to address the need for more content spaces in RapidWeaver. While the content area and sidebar are ample space for the vast majority of RapidWeaver users, there are some who want more flexibility to add content in ways keeping with todays modern web designs.
ExtraContent was the solution agreed upon by these developers as an easy means of end users adding more content to their site, in developer designated areas of ExtraContent enabled themes. While these areas will vary from theme to theme, the process will be very much the same. These developers worked closely to come up with a solution that would give all users a common experience.
I want to give a special thanks to Guiseppe from (((Bonsai Studios))) and Gary from RWT for sharing a common vision with me. You can look for new ExtraContent enabled themes from them VERY soon.
Features at a glance:
- ExtraContent enabled
- Two ExtraContent areas
- 10 Custom headers
- RWmultitool Ready
- Split navigation
- Width control
- Header height control
- 3 background textures
- Dual sidebar control
- Choice of font style
- Color control
- and more…
