tai­lor styles in rapidweaver

Make your pages look even bet­ter by learn­ing how to tweak tem­plates

Mac Format - - APPLE SKILLS - Gary Mar­shall

Take a tem­plate and truly make it your own

it will ta ke

30 min­utes

you will learn

How to edit tem­plates to suit your style.

You ’ll nee d

RapidWeaver 7 Last is­sue we showed you how to cre­ate new pages for a web­site us­ing RealMac’s begin­ner-friendly web de­sign app, RapidWeaver.

In this sec­ond in­stal­ment, you’ll dis­cover how to change the way those pages look, and what they con­tain.

First, a lit­tle bit of his­tory. In the early days of web de­sign, you for­mat­ted your pages as you went along. So, if you wanted bold text you’d en­close it in <b> and </b> tags, and if you wanted ital­ics you’d use <i> and </i>, and so on. This turned out to be a ter­ri­ble idea.

The rea­son it was a ter­ri­ble idea is that peo­ple change their minds, so they might build a site and de­cide that it would look bet­ter with a slightly dif­fer­ent de­sign or colour scheme. In the old days, that de­ci­sion meant go­ing back through the whole web­site to change every bit of af­fected code. It didn’t help that dif­fer­ent web browsers un­der­stood dif­fer­ent tags, ei­ther, so you couldn’t even be sure that what worked fine on one per­son’s com­puter would look the same on some­body else’s.

Then some­one had a bril­liant idea. “Hey ev­ery­one”, they said, “why don’t we keep the style and the con­tent sep­a­rate? That way, if we change the de­sign we just up­date the style, and it’ll change the con­tent au­to­mat­i­cally!” This per­son was then car­ried through the streets by cheer­ing web­site own­ers, who ap­pre­ci­ated what a fan­tas­ti­cally use­ful idea it was. Pretty much every web­site is now made that way, with style and con­tent kept sep­a­rate. A tem­plate for suc­cess That brings us to RapidWeaver. It’s a tem­plate-based sys­tem, mean­ing it pro­vides a range of pro­fes­sion­ally de­signed sites for you to choose from. You then add your con­tent, and if you want to change the en­tire de­sign you can just choose an­other tem­plate and watch your con­tent up­date au­to­mat­i­cally to fit it. So, you might start off with the win­try shades of the Lan­der theme and then de­cide you pre­fer the pur­ple tones of the Tesla one, or you might de­cide what your site re­ally needs is the photo gallery from the Kiki theme. No prob­lem: just

bring up the Themes panel, then se­lect the one you want to use in­stead and the vis­ual changes are ap­plied in­stantly.

There’s more to themes than just colours, though. They also set your site’s slo­gans and foot­ers, spec­ify whether there should be side­bars and whether those should ap­pear on the left or the right, and they can be used to spec­ify how photo gal­leries look and be­have. In many cases, you’ll find that the per­fect look for your own web­site in­volves tak­ing one of RapidWeaver’s pre­made de­signs and mak­ing a few sim­ple but im­por­tant tweaks to it.

When it comes to chang­ing bits of the app’s tem­plates, there are sev­eral places you can do it. First of all, there’s Set­tings > Gen­eral in the left side­bar (choose View > Show Source List if it’s not vis­i­ble). This is where you set the site’s ti­tle and slo­gan, the copy­right mes­sage or other footer, the con­tact de­tails and lit­tle things such as the site logo and fav­i­con (the lit­tle logo that ap­pears in the ad­dress bar and favourites list in your browser). Click Ad­vanced at the bot­tom of that page to cus­tomise even more op­tions, such as whether bread­crumb nav­i­ga­tion (the el­e­ment that shows vis­i­tors their place on your site in this style: Home > About Us > Our His­tory) should be dis­abled.

The next place to look is un­der Mas­ter Style in the left side­bar. As the name sug­gests, the mas­ter style is the boss of how your en­tire site looks, so it’s where the tem­plate sets out de­ci­sions such as what colour the nav­i­ga­tion menu should be, what coloured over­lay (if it’s part of your cho­sen theme) should go over the main ban­ner photo, how big the fonts should be, and so on. This is also where you spec­ify el­e­ments such as the back­ground colour of form fields and whether ban­ner im­ages should be dis­played at the top of the page.

En­gage man­ual over­ride

Each theme has its own mas­ter style, but there’s noth­ing to stop you from edit­ing that style by se­lect­ing Mas­ter Style in the side­bar, click­ing the In­spec­tor but­ton on the tool­bar to bring up the style’s de­tails, and then mak­ing what­ever changes you want. Once done, you can then save the mod­i­fied style by click­ing the cog at the top of the in­spec­tor and set your choices as your site’s new mas­ter style.

The third place where you can change how your site looks is in each in­di­vid­ual page. With a page se­lected at the top of the side­bar, bring up the in­spec­tor and you’ll see six tabbed pan­els: Gen­eral Set­tings, Page Side­bar, HTML Code, Meta Tags, Styles and Page Op­tions. We’ll re­turn to some of these next is­sue, but for now we’re in­ter­ested in Gen­eral Set­tings, Page Side­bar and Styles.

The Gen­eral Set­tings tab has three key bits at its bot­tom, un­der the head­ing Over­ride De­fault Set­tings, which en­able you to spec­ify a dif­fer­ent page ti­tle, slo­gan or footer than those set out in the mas­ter style. If you want, you can also use this tab to change the page’s file­name and whether it should open in a new win­dow. The de­fault (and usu­ally best op­tion) is to open it in the cur­rent browser tab.

The Page Side­bar tab only has con­tent if the side­bar has been en­abled in the mas­ter style. If it has, you can then edit the code ac­cord­ingly: it sup­ports both plain text and HTML code, so you can add links, im­ages and other con­tent if you want.

Last but most def­i­nitely not least, there’s the Use Mas­ter Style op­tion at the top of the Styles tab. If this con­tains a check mark, the page will fol­low your site’s mas­ter style, but you can ap­ply a com­pletely dif­fer­ent tem­plate to the cur­rent page – so, all of your site could use the same tem­plate, ex­cept for your photo gallery. Us­ing a dif­fer­ent tem­plate for a page of­ten means it’ll have a com­pletely dif­fer­ent colour scheme too, and that’s where the rest of the Styles tab comes into play. With Use Mas­ter Style unchecked, you can change the colours, lay­out, font size, back­grounds for form fields, and so on, en­sur­ing that the page still fits with the rest of your site’s colour scheme. It’s gen­er­ally a bad idea to present peo­ple with jar­ring de­sign changes mid­way through a site, so the abil­ity to ap­ply an­other tem­plate but edit its colours is handy to have.

That said, we need to mimic Spi­der-Man’s Un­cle Ben here and point out that with great power comes great re­spon­si­bil­ity. The whole point of a tem­plate-based sys­tem is that you don’t have to go fid­dling with in­di­vid­ual bits of pages, so it’s im­por­tant to make any changes in the right place. Wher­ever pos­si­ble, make changes to the mas­ter style, so that they’re ap­plied site-wide. Page-spe­cific changes are only re­ally nec­es­sary when a tem­plate can’t do what you want on a page. This is sup­posed to be easy, so don’t give your­self ex­tra work.

Live pre­view of changes

One thing we re­ally like about RapidWeaver is that if you’ve clicked on the tool­bar’s Pre­view but­ton, when you edit things in the Styles tab you’ll see changes ap­plied to the page that’s open as you make them – so, if you de­cide to en­able the side­bar you’ll see it pop up in its des­ig­nated place, and if you de­cide not to have big ban­ner im­ages you’ll no­tice them dis­ap­pear when you se­lect ‘ban­ner hid­den’ from the Site Ban­ner Over­lay pop-up menu. This takes the guess­work out of build­ing your site be­cause you can see right away whether some­thing works, or if it isn’t quite the way you wanted it to be.

Don’t be afraid to ex­per­i­ment with styles. RapidWeaver lends it­self to “what hap­pens if I change this?” ex­plo­ration. If all else fails, the orig­i­nal tem­plates are still there if you get a lit­tle bit too ex­per­i­men­tal. Happy tweak­ing!

PART 2 OF 5 TU­TO­RIAL SERIES

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.