• Share a link to this article:

Theme modification first steps

ThemeFlood themes are strong and adapt well to being customised. This is one of the reasons people love using them so much and keep coming back to our themes! Unlike some other companies, theme customisation is an aspect of theme usage we actively encourage and support. There really are thousands of possibilities open to you, including adding new elements, changing the position of existing elements and deleting elements which are surplus to your requirements. You can even control whether particular elements are shown or hidden on certain screen sizes. Customising themes can be a big time and money saver, and allows you to create page designs more to you or your clients liking. Generally it's assumed you already have some basic knowledge of HTML and CSS code, but having said that, RapidWeaver themes are a great place to start learning these new skills! Customisations can be as simple or as advanced as you want them to be.

In essence a RapidWeaver theme is an HTML template with CSS and Javascript code applied. You can find out a bit more about the physical structure of a theme on this page. ThemeFlood themes are robust and therefore they respond very well to receiving modifications. In all honesty, the details relating to theme editing could easily fill an entire book, and indeed whole eBooks have been written in the past, covering aspects of theme modification. So this section of the wiki will just cover the basic frequently asked questions which are often raised by ThemeFlood theme users.

It's strongly recommended that you always work from a duplicated / renamed version of the theme at all times (see the Theme Management article for details). This way if you mess things up, you can easily return back to the original theme again.

Modifying RapidWeaver themes takes skill, practice and perseverance. This chapter only offers a brief insight and detailed information can be sourced online or via books. If you are making heavy modifications to a theme, it's important you retest the theme through a variety of web browsers, to ensure it still displays and functions correctly. ThemeFlood offers a complete theme modification and testing service for customers; more information of which is available on request.

Tools needed

If you're modifying the HTML, CSS or Javascript in a theme; a plain text or code editor is essential. There are many available for Mac, ranging in price from free to several hundred dollars. TextWrangler is a very proficient free code editor, which supports all the basics like search / replace, copy / paste and syntax colouring very nicely. Paid alternatives like Espresso, Coda and Sublime are all fondly liked by many web developers and approach code editing from slightly different angles.

For images, an image editing app is very useful. Although you can do most basics with Preview.app, this is hardly a feature-rich option for many people. Applications like Photoshop, Pixelmator, Acorn, Seashore and Gimp provide ample features to perform all necessary image editing and saving tasks. As always, you'll find differences in the price, feature set and interface of these suggested apps.

Skills needed

There are very few books or online guides that will successfully teach you everything you need to know about customising themes or more general web design topics. Part of the problem is that web technologies are continually evolving and moving forward. Therefore if you are new to this sort of thing, it's wise to start with some of the more basic editing tasks and approach things with a trial and error attitude. Things are unlikely to work perfectly first time! At the very least, you should ideally know the differences between HTML and CSS, identify what some of the basics do and have a careful eye for comments or patterns in source code. Beyond that, you can bring along any other knowledge you already have.

Websites like W3schools, CSS Tricks and Code Academy have some terrific resources available for 'newbies' - and are certainly the envy of older designers and developers who had to learn without these brilliant websites!

The theme contents

A RapidWeaver theme is basically a folder. Code, settings, files and graphics required by a theme live inside a package called MyTheme.rwtheme or similar. If you are planning to modify the theme or add new elements to it, the 'theme contents' (package) is where you normally need to go.

In RapidWeaver 5 and less, themes are stored in ~/Library/Application Support/RapidWeaver/ where '~' is the name of your home directory.

Because RapidWeaver 6 and greater are sandboxed apps, themes are now stored in a different location deeper within your file system. But you can still easily access the theme contents from within any version of RapidWeaver. Just right-click the theme preview icon in RapidWeaver and select Reveal Contents from the popup window.

Reveal contents

The theme contents is revealed in a Finder window, from where you can access all the files and folders which comprise of the theme.

The theme contents

Once you are inside the theme contents, there are a number of different tasks you can do. For example, you could access the CSS code or swap-out existing images with your own. You could also access files like the custom.css file, to put your own CSS code in. Take care not to delete or rename any files or folders in the theme, as this may cause your theme to become broken.