Theming Techniques (and a bit of other useful RapidWeaver stuff)



Screen Shot 2011-09-12 at 10.56.35

CSS Consolidation

CSS Consolidation is a new setting which was added in RapidWeaver 5. Although this setting is not turned on by default, it is strongly recommended you consider turning this on for use in all your projects. CSS consolidation can be turned on by clicking RapidWeaver in the menu bar and clicking Preferences in the menu. Click onto the Publishing tab (pictured right) and tick the Consolidate CSS Files option.

Previously when RapidWeaver exported or published a site, several dozen stylesheets would also get published. What CSS consolidation does is to merge multiple stylesheets into single print and screen stylesheets. This can result in dramatically reduced publishing times and also pages which load faster. Of significant importance is that some web browsers like Internet Explorer impose a strict 30 stylesheet limit, so CSS consolidation enables you to safer circumvent this limit (even on pages which contain complex plugins or stacks). In reality, there is not really any reason for not having CSS consolidation turned on. All ThemeFlood themes contain comments in each of the individual stylesheets like /* @option user selected theme width setting */ so the processed source code is still human-readable.

Optionally in the RapidWeaver preferences, you can also turn on an option called Compress CSS files. What this setting does is to take your already-consolidated CSS and strip out line breaks, white space and comments to reduce these stylesheets to the minimum size possible. In reality this setting only shaves of a couple of kilobytes. The CSS code is compressed in such a way that it can no longer be read easily by humans. However for websites achieving hundreds of thousands of page views a month, this setting may yield some bandwidth savings, in conjunction with other optimisations. However most RapidWeaver users probably would not need to have CSS compression turned on for normal websites. CSS Consolidation is the most important one to have switched on.


Duplicating Themes

If you are planning on making any modifications to any RapidWeaver theme, it is highly recommended that you duplicate the theme; that means making a copy of the theme to customise, leaving an original version in RapidWeaver unedited. Working from a duplicated theme ensures you can always return back to an original version at anytime. Themes can be easily duplicated by right-clicking (or control and clicking) the theme preview icon in RapidWeaver and selecting Duplicate from the popup menu. Give the duplicated theme a new name and work from that version. Duplicated themes will not be effected by future theme updates.


2

Saving Styles

After customising your theme, you may wish to apply the same set of styles to other pages. By far the easiest way to do this is to open the page inspector and click onto the styles tab. At the bottom, click the cog button and select 'Save Style As'. From now on, this saved style can be applied to other pages. Please note that saved styles are not easily transferrable between other themes or theme versions, but you can share styles between other theme users and projects. More details on applying styles and saving styles can be found in the RapidWeaver user manual. Most users normally find it easier to use this above method to save styles, rather than relying on the somewhat cryptic Applied to this page only or the Is the master style settings under the page inspector.


Theme Contents

Code, settings, files and graphics required by a theme live inside a package called [theme-name].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. RapidWeaver themes are stored in ~/Library/Application Support/RapidWeaver/ where "~" is the name of your home directory. But you can also easily access the theme contents from within RapidWeaver. Just right-click (or control and click) the theme preview icon and select Reveal theme contents in Finder from the popup window. The theme contents is revealed in a Finder window, from where you can access all the files which comprise the theme.


Making Theme Customisations Using CSS

Nearly all elements in a RapidWeaver theme have either class or ID names applied. These names can be used as selectors, to apply custom CSS code to. The best method is to preview your website in a web browser such as Firefox or Safari. With developer tools installed or enabled, right click a particular element and choose to Inspect Element from the popup menu. This will give details of the element such as its selector name and CSS code already applied to it. From this point, you can use the selector name and custom CSS code to change the style or appearance of an item. For example, padding can be changed, borders applied or background images added onto element. CSS gives you the potential to make many style changes to a theme. All ThemeFlood themes have been designed and structured to make this as easy as possible. Some third-party RapidWeaver plugins also come supplied with details on how to modify styles using CSS. A lot of information regarding CSS can be sourced from the internet.


Custom CSS box in the RapidWeaver page inspector

Applying Custom CSS Code

All ThemeFlood themes feature a very useful 'custom.css' file within the theme contents. Into this file, you can enter custom CSS code. Unlike the Custom CSS box under the Page Inspector in RapidWeaver (pictured right), code entered into the custom.css file gets applied to all pages and enables you to edit CSS using a preferred editor like Espresso, Coda or TextWrangler. These types of editors often feature useful features like syntax colouring, auto-completion and validation, which combined make CSS editing much easier and safer. There are many free resources on the internet which cover CSS in detail. To open the custom.css file, right click (or CTRL + Click) the theme preview icon in RapidWeaver and select Reveal Theme Contents in Finder. Open the custom.css file in your preferred code editor. If you only need to apply custom CSS code to a single page, enter this code under the Page Inspector custom CSS box as normal.


How To Update RapidWeaver Themes

RapidWeaver themes available from ThemeFlood include the version number in the theme name. This enables you to check what version you currently have installed on your computer, versus the version listed on this website. If for example you have Photogenic 1.0 installed on your computer, but a newer version is listed on this website, this is indication that an update is available. Because the theme version number forms the theme name, it means RapidWeaver will handle new versions as new themes. This simply means that your existing theme wont be deleted or updated, rather the update will be installed as a separate new theme. You can gradually migrate projects across from old themes to new themes, or selectively choose which projects use the updated theme and which don't.

Theme updates are not compulsory. This means you don't have to update existing projects if you don't want to. There are many instances when you may want to continue using an older version of a theme. For example, the theme may already contain customisations you made or features which are obsolete in newer versions. At the end of the day, it is personal choice as to whether you update or not. Sometimes you may be obliged to discuss updates with clients you may be working on behalf of. Older themes are still supported, but it is vitally important you stipulate in any support emails or forum posts if you are not using the latest version - otherwise it will be assumed you're using the latest version, which could cause confusion.

If you have decided to go ahead with a theme update, there are essentially 3 components in the existing theme you would want to bring into the new theme. These being background images, custom CSS code and saved style sets. Each of these is discussed in further detail below. In some instances you may have duplicated a theme in RapidWeaver or made further amendments to the theme CSS or HTML. So the following information should just be treated as a rough guide, and may vary depending on your existing setup, customisations or workflow. If you have not made any amendments to an existing theme or you're happy to update and start from fresh, then much of the following information can be ignored and you can install the theme straight into RapidWeaver.


The basics of updating themes

As ever, the first rule of thumb is to backup everything - and then backup the backups to ensure you've got a safe point to return to if required. Unfortunately it is not uncommon for hard drives to fail without warning, computers to get zapped in thunderstorms and thieves to run off with laptops! So a robust backup plan is always essential. It is a good idea as well to clear up all the icons on your desktop to give yourself a clean working space. In case you are not already aware, all RapidWeaver themes are stored in ~/Library/Application Support/RapidWeaver/ where '~' is the name of your home directory in Finder. In this folder (or a subfolder if you've organised themes), you should see the theme you want to updated. Again this theme will be called something like Photogenic-1.0.rwtheme. Copy this file to your Desktop, right click and select Show Package Contents from the menu. This action opens the theme contents - in essence it opens the theme package and shows all the files inside.


Transferring background images between themes

All background images used by a theme are saved in a folder called editable_images which can be found in the images folder. Commonly in this folder, you will see placeholder images (e.g. background1.jpg or banner1.jpg). There may also be many example images used by the theme in this folder. So in total there could be over one hundred images, some of which you may have already edited with your own custom images. Copy this entire editable_images folder to your desktop. It may be wise at this stage to carefully review the naming conventions of placeholder images has not been changed in the new theme update. For example in some instances, body_background1.jpg may now be referred to as bg1.jpg in the theme update. If this is the case, you may need to rename the placeholder images to match the new naming conventions. More advice about this is available on request.


Transferring custom CSS between themes

Custom CSS code which was added under the Page Inspector in RapidWeaver is always saved as part of your sandwich file, so there is nothing to change there. Likewise any PHP or Javascript code you entered int he RapidWeaver Page Inspector will be preserved. Most ThemeFlood themes contain a custom.css file in the theme contents, where you were invited to add custom code. This single file resides in the top level of your theme contents, and this file can be copied to your desktop, then dropped back into the theme contents of the new theme.


Transferring saved style sets between themes

Screen shot 2011-01-02 at 13.00.36
Saved style sets are slightly more complicated to update, and in some instances the number of changes required may make it easier and more feasible to create new saved style sets. Saved styles are located in ~/Library/Application Support/RapidWeaver/Theme Styles/ where '~' is the name of your home directory in Finder. Copy the desired saved styles to your Desktop. Change the file extension from .rwstyle to .xml. Then open the saved style in your preferred preference list editor (a GUI editor, as shown on the right, is much easier than editing raw XML code). Start by changing the theme name to match the name of your new theme. The style name can be changed as well if you want. Under the selections disclosure, you can change any of the saved defaults or add new selections which may be featured in the theme. The colours disclosure can also be opened and you can add new tags and default values. Colour tags are replaced with colours in the colourtags.css file, so you can study tags being used and incorporate any extra ones into your saved style. When you've completed editing, save the XML file and change its extension back to .rwstyle. This can then be installed in RapidWeaver by double-clicking the .rwstyle icon.


Merging theme files

Again the easiest method is to put the new theme on your desktop and open the theme contents using the Show Package Contents option. At this stage, you can replace the editable_images and custom.css file in the new theme, with those out of your old theme. What you're looking to do is to carry-over previously edited files and folders from the old theme, into the new theme. With practice, it becomes much easier. This system of versioning themes has proved very useful for many theme users, because it is non-destructive and enables you to upgrade themes in your own time. Again it should be emphasised that if you plan to use an updated theme as it is with no modifications, you just have to double-click and install the theme like you normally would.


How to email or forward RapidWeaver themes

A RapidWeaver theme is a collection of code files, graphics and stylesheets which can be used to apply instant style and layout to webpages you have created using RapidWeaver. Typically if a theme has previously been customised or had new graphics added to it, the theme should have already been duplicated and given a new name. This allows it to be differentiated from the original, unedited theme. Theme developers may request to see this duplicated RapidWeaver theme, if you require help with completing a customisation or fixing an issue. At the same time, theme developers probably won't be too pleased if you send them a customised theme that retains the original theme name - because this will overwrite their original version and general makes things a lot more complicated.

Themes are stored in the RapidWeaver library folder. This can be accessed by clicking the Finder icon in the Dock. Then from the menu, click Go > Go to folder… at the top. In the new window which opens, type the following address:

~/Library/Application Support/RapidWeaver/

Then click Go. Sometimes all of your themes will be listed within this Finder window. Other times they may be listed in a subfolder like 'Themes' which might be visible. RapidWeaver themes are typically shown with a purple icon and end in the .rwtheme file extension. When you have located your custom theme, right click on the theme icon and select 'Copy' from the menu. Then close the RapidWeaver library folder. Click onto your Desktop. Then right-click on your Desktop and select 'Paste' from the popup menu.

At this point in time, you have made a copy of the custom RapidWeaver theme to your Desktop. The next point is to compress the theme as a .zip file. This is a vitally important step to take, because it will reduce the overall theme size and make the file much safer to send (without risk of it falling apart or becoming corrupt during transit). Compressing a file is easily done by right-clicking the file icon on your Desktop and selecting Compress from the menu. The theme is then compressed as a single file and is ready for sending via email or uploading.

Small theme files (under 5MB in size) can normally be attached to a standard email and sent with a message to the developer. Files larger than 5MB are unlikely to send via email, or could be very slow to send and receive. If in doubt, you can check the size of a file by right-clicking on the icon and selecting Get Info from the menu. The file size is then presented in either KB or MB within the Info window.

If a custom theme is too large to send via email, you can use a free service like Dropbox. Basic Dropbox accounts are free, and enable you to upload considerably larger files to an online secure website, and the receiver can download the file again from their end. Once you have signed up for a Dropbox account and installed Dropbox on your computer, drag and drop your compressed theme file into the Public folder within Dropbox. This means that the theme file will be available to anyone with a link to it. To obtain the download link to this file, right-click the theme file (when it is in your Public folder) and select Dropbox > Copy Public Link. The URL to the theme file is then copied to your clipboard, and can be easily pasted into an email.

Again it should be emphasised that only compressed theme files in .zip format should be uploaded to Dropbox - this will significantly improve upload times and ensure the file remains intact.


How to email or forward RapidWeaver project files

A project file (also sometimes referred to as a sandwich file or package file) is the document you open within RapidWeaver. Typically this document has a blue icon and a file extension of .rwsw when viewed in Finder. The project file stores all of your website pages and content, together with META data, saved theme styles and custom code. The nature of the RapidWeaver project file means that it can quickly balloon in size and become a very large file size of 100MB or more. Often plugins like Stacks will store images in TIFF format within the project file, and this can rapidly increase file sizes. Once a project file exceeds 5MB in size, it very quickly becomes difficult to forward to someone else.

Project files are stored wherever you open them from on your computer. Some people store there project files in the normal documents folder, whereas others store them in a sub-folder. Much like theme files, you should copy the project file to your Desktop and compress it as a .zip file. This will reduce the file size somewhat and make it easier to email or upload to a service like Dropbox.

It is important to remember that resources or assets you have linked to within your project file will not be sent with the project file. Therefore if it is critical for a developer to have access to these files, they should be uploaded at the same time, so that he or she can still access them.


Website Search Engine Optimisation

Search engine optimisation (often abbreviated to SEO) is a dark science and the algorithms search engines use to index sites change on almost a daily basis. For anybody with a website who wants people to be able to search and find it on a search engine, SEO is an aspect of web design that needs to be taken into account. What works for a search engine one week may not work another week, however there are several basic SEO steps you can take, which will work in your favour all the time. It is vitally important to remember that search engines have the critical role of delivering the best possible search results to their customers. Search engines are very clever and will heavily penalise sites which do not meet required standards or attempt to cheat the system.

  1. Use a sitemap
    RapidWeaver 5 comes supplied with a free Sitemap plugin. Use it. Not only will this give your end users an easy way of navigating the website and finding specific pages, but it also generates a sitemap.xml file in the top level directory of a website. Search engines frequently look for this file, and when they find one, it instantly unlocks the website and provides a detailed overview of your entire website structure. If you need a more advanced sitemap with options to customise the output and automatically ping search engines with your changes, then consider buying the Sitemap Plus plugin from Loghound Software.

  2. Make sure search engines can access pages
    This may sound very obvious, but sometimes RapidWeaver users accidentally introduce barriers on a website, which inadvertently make indexing of websites a lot more difficult. To quote a few examples, pages which are password-protected will be impossible for search engines to access, and scripts or plugins that apply physical copyright protection on pages can sometimes be dangerous for search engines crawling your site. Another consideration is that any text embedded within images or Flash will not be readable to search engines. Likewise text generated using Javascript probably won't rate favourably with search engines either. If you are using images on a website, ensure that they all have meaningful ALT attributes (alternative text) applied, so that a search engine at least has some idea of what the image was about.

  3. Sensible page titles, keywords and descriptions
    Every page you add to your project in RapidWeaver should have its browser title change in the RapidWeaver Page Inspector. The browser title should be kept short and should include the name or your website or company, followed by a couple of keywords which relate exactly to the page, or vice-versa. For example 'My Website - Services Available' or 'About Us - My Website'. These page titles are the same titles that show up in search results, so it is vital they are correct. While you have the Page Inspector open in RapidWeaver, it is very wise to add keywords and description META tags. Keywords provide a comma-separated list of words relating to the webpage. The description provides a more informal insight into what the page is about. Don't be fooled into the myth that search engines no longer use META data - social media and bookmarking services like Facebook and Delicious do make extensive use of META data, and very often search engines 'borrow' content from these other sites.

  4. Quality content
    Search engines want to relay quality search results onto their customers. Copywriting which contains bad grammar, spelling mistakes and general 'waffle' will be downrated in favour of competing sites with a better standard of literature. In a virtual world where content is king, you should be devoting maximum effort into producing quality content. If necessary, have a colleague proof read your website before publication, or contact a copywriting expert for advice. Keep information detailed and relevant. Ensure the content contains plenty of links going off to other websites, to raise the importance of your website as a reference source. Likewise you should also aim to get some links coming back into your website, relating to specific topics or pages.

  5. Learn HTML
    This may be a bit of a shock if you switched to RapidWeaver to avoid using code! However the fact is that HTML is not difficult to learn. You can learn a couple of basic tags like headings, block quotes, lists and text styles within an hour. Not only do these give your pages greater consistency (with regards to styling), but they structurally define parts of a page to search engines. For example if you are using heading tags, you are telling search engines exactly where the titles are in your page and where the body content is. Likewise if you decided to setup a simple unordered list, you are telling search engines that the content within comprises of short, factual details in bullet form. You certainly do not need a book on the subject, nor learn the whole HTML standard; just the basics which relate directly to text formatting. If you have previously used 'tags' in forum posts, blog posts or Facebook replies, HTML code is very similar. There are many free resources available online for learning HTML, W3schools.com is probably the better of them.

  6. Be realistic
    SEO does not magically happen overnight; it is normal for new websites to not show up in search results straight away. Typically it may take several weeks before a site is fully indexed by the bigger search engines. Signing up to the free Google Webmaster Tools and manually submitting your website is a good method to fast-track website listing. Also instead of focusing on increasing traffic volumes through your website, you should focus on the quality of the traffic received. The number of 'hits' a website receives is completely useless if none of those visitors are buyers. It is far better to get less traffic, but better quality traffic which results in improved sales or marketing.


This is just a short list of the most sensible SEO techniques which you should already be implementing on your websites. There is certainly a huge volume of information relating to SEO available online, but be careful not to get drawn into paid SEO packages or some of the voodoo myths surrounding SEO. Plenty of impartial advice is available via the RapidWeaver forums, and again there are experts you can hire to discuss aspects of SEO with.


Choosing the right web host

Web hosting can be the make or break of a successful website. Large hosting companies often offer cheap 'unlimited' accounts, but reliability and customer service may be poor, bordering non-existent. Smaller hosts like Intoxify Hosting and Javabeanhosting offer tidier solutions and improved customer support, but in exchange for a slightly higher monthly tariff. Very often choosing the right host is a question of economics. If you are developing a website which will eventually be used for selling products or services, it makes sense to spend a bit extra to get the quality. For a non-commercial site being built purely as a hobby, then you can probably make do with cheaper hosting solutions.

In the realms of web hosting, more features does not necessarily mean a better hosting company. All you need to host a basic site is a Linux web server, some disk space, some bandwidth and support for PHP and SQL. Almost any website would be able to work fine on this sort of basic setup - and certainly there would be less to go wrong. Other extra's like one-click installs, SSL certificates, free shopping carts, spam protection, message boards, domain names and such like are more of a subdued crowd pleaser, rather than features essential to a hosting package.


Choosing RapidWeaver plugins

You'll often find that the page styles which come supplied with RapidWeaver provide more than enough power and functionality to build decent websites with. In particular the Styled Text, Blog, Sitemap, Contact Form, File Sharing, HTML Code and Photo Album pages types offer very comprehensive layouts to easily build a website with. In this website (ThemeFlood.com) over two thirds of the pages were created using page styles supplied with RapidWeaver and this page you are reading from now uses the Styled Text page style. There is sometimes temptation that after you buy RapidWeaver, you have to invest heavily in other page style plugins. The truth is that you should not go on a spending spree, otherwise the cost and learning curve of RapidWeaver will quickly spiral upwards. Therefore you should only really consider buying extra page style plugins if you absolutely need them. For example if you want to do work with columns of content the Stacks plugin may be ideal and likewise if you need something specialist like the ability for customers to login to your website and upload files, WeaverFM provides the perfect solution. It is always wise to do plenty of research before investing in new plugins. Definitely you should download demo versions and evaluate the plugin against your theme and RapidWeaver project file.


< Previous Chapter - Theme Configuration