tailor styles in rapidweaver
Make your pages look even better by learning how to tweak templates
Take a template and truly make it your own
it will ta ke
you will learn
How to edit templates to suit your style.
You ’ll nee d
RapidWeaver 7 Last issue we showed you how to create new pages for a website using RealMac’s beginner-friendly web design app, RapidWeaver.
In this second instalment, you’ll discover how to change the way those pages look, and what they contain.
First, a little bit of history. In the early days of web design, you formatted your pages as you went along. So, if you wanted bold text you’d enclose it in <b> and </b> tags, and if you wanted italics you’d use <i> and </i>, and so on. This turned out to be a terrible idea.
The reason it was a terrible idea is that people change their minds, so they might build a site and decide that it would look better with a slightly different design or colour scheme. In the old days, that decision meant going back through the whole website to change every bit of affected code. It didn’t help that different web browsers understood different tags, either, so you couldn’t even be sure that what worked fine on one person’s computer would look the same on somebody else’s.
Then someone had a brilliant idea. “Hey everyone”, they said, “why don’t we keep the style and the content separate? That way, if we change the design we just update the style, and it’ll change the content automatically!” This person was then carried through the streets by cheering website owners, who appreciated what a fantastically useful idea it was. Pretty much every website is now made that way, with style and content kept separate. A template for success That brings us to RapidWeaver. It’s a template-based system, meaning it provides a range of professionally designed sites for you to choose from. You then add your content, and if you want to change the entire design you can just choose another template and watch your content update automatically to fit it. So, you might start off with the wintry shades of the Lander theme and then decide you prefer the purple tones of the Tesla one, or you might decide what your site really needs is the photo gallery from the Kiki theme. No problem: just
bring up the Themes panel, then select the one you want to use instead and the visual changes are applied instantly.
There’s more to themes than just colours, though. They also set your site’s slogans and footers, specify whether there should be sidebars and whether those should appear on the left or the right, and they can be used to specify how photo galleries look and behave. In many cases, you’ll find that the perfect look for your own website involves taking one of RapidWeaver’s premade designs and making a few simple but important tweaks to it.
When it comes to changing bits of the app’s templates, there are several places you can do it. First of all, there’s Settings > General in the left sidebar (choose View > Show Source List if it’s not visible). This is where you set the site’s title and slogan, the copyright message or other footer, the contact details and little things such as the site logo and favicon (the little logo that appears in the address bar and favourites list in your browser). Click Advanced at the bottom of that page to customise even more options, such as whether breadcrumb navigation (the element that shows visitors their place on your site in this style: Home > About Us > Our History) should be disabled.
The next place to look is under Master Style in the left sidebar. As the name suggests, the master style is the boss of how your entire site looks, so it’s where the template sets out decisions such as what colour the navigation menu should be, what coloured overlay (if it’s part of your chosen theme) should go over the main banner photo, how big the fonts should be, and so on. This is also where you specify elements such as the background colour of form fields and whether banner images should be displayed at the top of the page.
Engage manual override
Each theme has its own master style, but there’s nothing to stop you from editing that style by selecting Master Style in the sidebar, clicking the Inspector button on the toolbar to bring up the style’s details, and then making whatever changes you want. Once done, you can then save the modified style by clicking the cog at the top of the inspector and set your choices as your site’s new master style.
The third place where you can change how your site looks is in each individual page. With a page selected at the top of the sidebar, bring up the inspector and you’ll see six tabbed panels: General Settings, Page Sidebar, HTML Code, Meta Tags, Styles and Page Options. We’ll return to some of these next issue, but for now we’re interested in General Settings, Page Sidebar and Styles.
The General Settings tab has three key bits at its bottom, under the heading Override Default Settings, which enable you to specify a different page title, slogan or footer than those set out in the master style. If you want, you can also use this tab to change the page’s filename and whether it should open in a new window. The default (and usually best option) is to open it in the current browser tab.
The Page Sidebar tab only has content if the sidebar has been enabled in the master style. If it has, you can then edit the code accordingly: it supports both plain text and HTML code, so you can add links, images and other content if you want.
Last but most definitely not least, there’s the Use Master Style option at the top of the Styles tab. If this contains a check mark, the page will follow your site’s master style, but you can apply a completely different template to the current page – so, all of your site could use the same template, except for your photo gallery. Using a different template for a page often means it’ll have a completely different colour scheme too, and that’s where the rest of the Styles tab comes into play. With Use Master Style unchecked, you can change the colours, layout, font size, backgrounds for form fields, and so on, ensuring that the page still fits with the rest of your site’s colour scheme. It’s generally a bad idea to present people with jarring design changes midway through a site, so the ability to apply another template but edit its colours is handy to have.
That said, we need to mimic Spider-Man’s Uncle Ben here and point out that with great power comes great responsibility. The whole point of a template-based system is that you don’t have to go fiddling with individual bits of pages, so it’s important to make any changes in the right place. Wherever possible, make changes to the master style, so that they’re applied site-wide. Page-specific changes are only really necessary when a template can’t do what you want on a page. This is supposed to be easy, so don’t give yourself extra work.
Live preview of changes
One thing we really like about RapidWeaver is that if you’ve clicked on the toolbar’s Preview button, when you edit things in the Styles tab you’ll see changes applied to the page that’s open as you make them – so, if you decide to enable the sidebar you’ll see it pop up in its designated place, and if you decide not to have big banner images you’ll notice them disappear when you select ‘banner hidden’ from the Site Banner Overlay pop-up menu. This takes the guesswork out of building your site because you can see right away whether something works, or if it isn’t quite the way you wanted it to be.
Don’t be afraid to experiment with styles. RapidWeaver lends itself to “what happens if I change this?” exploration. If all else fails, the original templates are still there if you get a little bit too experimental. Happy tweaking!
PART 2 OF 5 TUTORIAL SERIES