e.1 introduction to styling & layout «cliktips guide»guides.clikpic.com/e1 introduction to...

E.1 Introduction to Styling & Layout

E.1 INTRODUCTION TO STYLING & LAYOUT «cliktips guide»Great websites made easy

1. IntroductionOur system allows you to edit just about every partof your site’s styling and layout, irrespective ofwhich template style you have chosen. Generallyspeaking, these can be applied to:

• The entire website (‘global settings’)

• Sections of your site

• Elements/parts of a web page

This guide provides a general introduction to usingour styling features and is complemented by fiveCliktips Guides, which provide more detaildepending on what you’d like to do (see page 4 for details).

2. What do we mean by styling and layout?

2.1 StylingFonts.You can edit which font you use, the fontsize, font casing (upper, lower, etc), font weight(bold, normal, light) – even the spacing betweenwords and letters. Not to mention aligning the textleft, centre, right or justified.

Text colours. Choose any colour you like for yourtext.

Background colours and images. Change thebackground colour to just about any part of yoursite and/or add a background image. Adjust theopacity of that image and/or stretch it across asection or, ask the system to ‘repeat’ the image sothat it fills the space required.

Borders.You can change the trim thickness, as wellas the style and colour of the border. Create fancyborders around your images.

2.2 LayoutLayouts. Add/remove columns, change columnwidths.

Dimensions. Edit your site’s page width, as well asthe height of the site’s header.

Padding & margins. Edit the ‘gaps’ around andwithin your pages, as well as the elements within a page.

Positions. Align certain elements of your siteand/or reposition them on your page.


E.1 INTRODUCTION TO STYLING & LAYOUT «cliktips guide»

3. Introduction to the Custom styles menuAll of our styling options can be found by going toStyles > Custom styles in the admin system. Hereyou will see a menu with a wide variety of options.Generally speaking, you open up the menu box byclicking on the + sign and then clicking edit againstthe respective style option you require.

You will see that there are literally hundreds ofdifferent settings – mainly because there are somany parts of your website that can be styled –each with differing options depending on which partof the site or design style you are using.

4. Important notes before proceedingDue to the many different browser and screen settings people have, do bear in mind that what you seeon your browser may be may be very different to what someone else sees on theirs! To get round this,we often work in terms of a % adjustment, rather than a set figure, which means it will be scaledproperly when viewed in different browsers.

Likewise, the settings for certain parts of your website are derived or ‘inherited’ from a global setting,often given in % terms. Our system will tell you if the part you are editing is an inherited/global setting, soyou are made aware that it may affect other parts of your site.

5. Example 1 - changing text colourTo give you a flavour of how it works, here’s how you can edit your main text colours.

Click on Update on the colour picker. Preview. Make live whenyou are ready.

Great websites made easy

Styling and layout tabs

This is done by going to Styles > Custom styles > Colours >Text. As you can see, there are a whole range of fonts you canedit, although Text colour is the most popular as it appliesto the entire site, followed by Links and Links rollover .When you click on edit , a colour picker appears, which youuse as follows.

Select your colour by clicking on the large box . Change theselection by using the slider . Alternatively, enter a colour valuedirectly if you know the reference .

If you think you’ll use the same colour for a different part of yoursite, copy the reference so you can paste it here when youcome to do that part of your site.

1

1

1

1 2

2

2

2

3 3

3

3

4

4

3. Border colourTo edit the colour of the border, click on Edit against Image border colour (see in upper right above).Select your colour by clicking on the large box. Change the selection by using the slider. Alternatively,enter a colour value directly. That’s it!

Top/bottom and left/right borders. If you would like the top/bottom borders to be different from the left/rightones, then select which one you would like to edit and enter a figure (pixels), eg 5 or 10. However, the width has to be the same for a top and bottom border, as it does for a left and right border.Width. Enter the figure here if it is going to be the same for all 4 sides. Increase/decrease this figure to try some different sizes.Style. Select your style from the drop down menu. Givea few a try to see how they look.Click on Set then click on the main Edit button to see how it looks. Save if you want to keep it, or click on Edit to continue editing.Other settings.

6. Example 2 - Adding a border frame to your imagesIn this example, we show you how to add and style a borderframe around all of your images. This can be quite effective increating a stylish frame effect. This is done via your mainmenu: Styles > Custom styles > Page dimensions andsettings > Image options.

Image border. Click on edit for the border width and style of your image enlargements.Image thumbnail border. For the width and style of your thumbnails.Image border colour. To colour the border of both thumbnails and enlargements (these are the same colour).



1

2

3

1

2

1 2

3

3

4

5

6

5 6

1

2 3

4

1

2

3 When you click on edit for and , the popup box belowappears, which should be completed as follows:

7. Understanding the many different things you can do

7.1 GeneralThese are just two examples of the many things you can within our Custom styles features. Generallyspeaking, they split up into five main areas. We have provided a Cliktips Guide for each one whichprovides more detail, depending on what you’d like to do.



1.

2.

> >

Page 1 E.2 Editing Fonts

E.2 EDITING FONTS «cliktips guide»Great websites made easy

Font size. Enter a % figure based on the default figure, either largeror smaller. You must remember to include the ‘%’ sign with no spaces.

Font. Select from the fonts available in the drop down menu. You can easily add to this list – see 4. below.

Font weight.This selects how thick or thin the font characters are. Choose from Normal, Bold or Light.

Font align. Select how you would like the text aligned within its container – Left, Right, Centre or Justified.

Text transform. Select from Title Case, lower case, UPPER CASE or None.

Text decoration.This allows you to underline, overline and put a line through text.

Line height, Letter spacing and Word spacing. Enter a % figure based on the settings you already have. Don’t forget to include the ‘%’ character and no spaces!

White space.This relates to the space at the end of text. Try the different options to see how they work.

1

2

2 3

4 5

8 6

7 3

4

7

5

8

6

1 2

1 2

3 1

2

1

1

2

3

sitbewateGr

asyeemads esit

ftideotwHo.2

fothigrroertncebmal,ron(thigewleeotro/dan– c tesitbeweirtneruoywallom estsyruOnoictudrotnI.1

ofehTs tnof

eagpbewehtfotarpehtebgacinspeht,)thlig,ldobpbewa fotarpros tnmele/dan-)’sginttttseal blog‘(esittnofehteganhcotuoys w

yfos tarpmainehtrofs tno

.deaintncois itatht,srettttledans drowneewtextetitdealsocanuoYYo.eagpyfos nioctseaintrceotro/danesiztnofeht,seuuoy

via deitdeearesitbewruoy

otxtetginnaligas ll ews ac)te,rewlo,reppu(gcasinxtittesit,unmege,esitruoypapcanuoYYos.rulocoxtetd

ruovia

,tfleehtotnof,c)

s,icletar,leitotis htly p

1

Clictse

akTTakClic

seuehT

Clic

ostCu

12

12

3

xobpupopis hTtidenok Clic%.07ge,gintt

%ltaufedehtfoetona eak.nottubniMaehtnok Clic

seohthitwk icstotdnets rsetnerefifdfos nezodearere

punepootx obis htnok Clic

nok Clicm.estsyselystm o

seniaMehtindeaintncoseuohalt,itdecanuoys tnoft

.unmestnoFeht

s elystm ostCu>s elyStn

12

.nioctsestmohgu

s.tnoF>s

s.acespmuuoYYo.rsmalleroretnE.ezsitnoF1

eselloofpap

Clic

tedcluinotrembmeerstmudehtnodaseberuigf% a

32

.elikks oloitathweotweivrePnehts,wllo

as etlempCos.arepxobpupopis hT.tidenok Clic

onhitwnsig%’‘ehtreglarrehite,eruigfltaufe

23

1

3

rm.osfnrattxeTTe

,tfeL– reaintncoleeS.ngilatnoF

Nom orfseooChis hT.thgiewtnoF

otdadasily ecanm orfctleeS.tnoF2

3

4

5

wloCaseleitTm orfctleeS

.dieifstuJroertnCe,thRigehteliklduowuoywohct

.thigLroldoBmal,rNoinhtrok ichtwohs ctleseis

.wloeb.4ese– listis htoehtinleailabvas tnofehtm

roESCAR EPUPcaserew

s itinhtiwdenaligxtet

.ears reactarhctnofeht

uoYYo.unmenwodpord

45

6

7

8

hTceaspetiWh

danreactarhc%’‘tseehtnodasebteL,thgieheniL

.xtethguorhtnoitracoedtxeTTe

.enNorm.osfnrattxeTTe

7

5

8

6

tatacepsehtots elateris h

s!acespondDo.evahy adealruoys ginttasprdoWdnagnciaspr ett

linrednuotuoys wallois hT.

wlo,CaseleitTm orfctleeS

ehty rTrxtetfodneeh

ehtedcluinottegroft’nDoeruigf% a retnE.gncia

elina tupdanelinrevo,elin

roESCAR EPUP,caserew

ms.ret% inneivgally suueda as dliepapis hichwal bloga m orf’deitrehin‘edearesitruoyfos tarpginttseeht,netfoeituQ

%ezsitnoFnoetonA

isis hTms.danltaufe,ginttseal rodeivreaintrcerofs g

%

s niotpotnerefifdhT.ceaspetiWh8

k.rowy ehtwoheseots tatacepsehtots elateris h

ehty rTr.xtetfodneeh

eruigf% ehtotniolater

cesitbewruoynos tnofhts anmehichw,eruigfetneotuoyask ewy hwms.ret% inneivgally suu

.retneuoye

ineganhcrehtoat

%a reisis hTms.

Page 1 E.3 Backgrounds

E.3 BACKGROUNDS «cliktips guide»Great websites made easy

1.

2.

> > >

1

2

1

2

3

4

5

1 2 3

4

5

1

2

6

6

Select your colour by clicking onthe large box. Change theselection by using the slider.Alternatively, enter a colour valuedirectly. If you would like it betransparent, select No colour.

sitbewateGr

asyeemads esit

trulocoenom orfnerstehtis,atht– ,rseworb/esitbewhteganhccanuoYYo

noictudrotnI.1

– acespathtinrehtoanotmey acitpo(s arepapithtgnros reaintncoic cifesprojuforulocodnuorgkacbeh

y acitpos itstjuadcanall ro/danneescrehtimagnatupalsocanuoYYo

cyanfeituqk olocanhichwanrtfoesitoppoehtginanme

canuoYYo.esitruoyfos tarpruoyfotarpy antuoabstju

moarepapcanitathtsoy A.dnuorgkacbeagpehtfoesitbewuoydinhebeimag

.cynevecanuoYYo.cy)nearspanoy acitpoehtstjuadalsocan

eirtneehtrehite– esit

dandeadferuoy,aingApuill fot– e

egrmenrulocoehtfo

©

irKDar

b’ilet‘a noeimagehtacrithcterstotm estsyehtotis htrofeimagsivurtinss leeroferehty acitpos itstjuadcan

acespehtills fitathtsoasis bo– wvieeirtneehtss oacrask ro,deiruqers nsionimedperpally niotpocanuoYYo.esiv

moarepapcanitathtsoy

.aceelicatperr

ehtask anearp

dandeadfer

fesehterongI

evcodnurogkcabstjuadotginogearginogy bdnuofeboywoshewerHeuoygnignaCh.2

©

1

as ginebimetehtrofs ldie

tnetncoeagpmainehts reegmaidnurogkcBaehtst

ystm ostCu>s elyStotgacbehteganhcotwohuoolcodnurogkcabs’etsir u

mco.anwirKnerDar

rofdseueary ehtas

pis htdantidenok Clic.)teirtneehts revcohichw,e

Ma>s dnurogkcBa>s eleruoyots rulocodnuorgk

sru

.arepapill wx obpupogsinworbnehwwodinwinis htnIs.dnurogkcabniioctnufis hT.esitbeweirtn

etSi(ewceanstin

cany alitnio

retnE.ruolCoClic.ruolCo+imagdnuorgkacbfesehterongI1

2

erehcenereferrulocoeht.notttubis htnok

s.eimagas ,ginebimetehtrofs ldie

wuoyfIlycteirdne,lyeivatnreAltsinuy bnioctleseChx.obeglarehtlocoruoyctleeS

.itwoknuoyife

rofdseueary ehtas

ebiteliklduowealuvrulocoa retn

.reslidehtgsinehteganCh

nogkinclicy brulo

2

1

simpro,57.0roehitE.ytciapO

.dnuorgkacbicT.ruolcooNlesedantarhcnok clic,tonfI1

23

4

.reslidehtseuly simpeewtebrembuna retnere

ta eliklduowuoyifis htk ic.rulocoruoyct

puginrbotworarpueht

5

lese,tnearspanrtwuoyfI.lycteird

5.0ge,1dan0ne

tnearspanrt

rekicprulocoeht

.ruolcooNctleebiteliklduow

3

Snok licC.teS6

seotweivrePnehtdanteS

ks.oloitwohese 1

24

56

Select your colour by clicking on the large box. Change theselection by using the slider. Alternatively, enter a colour valuedirectly.

3.

Width. Enter the figure here if it is going to be the same for all 4 sides. Increase/decrease this figure to try some different sizes.Style. Select your style from the drop down menu. Givea few a try to see how they look.Top/bottom and left/right borders. If you would like the top/bottom borders to be different from the left/rightones, then select which one you would like to edit and enter a figure (pixels), eg 5 or 10. However, the width has to be the same for a top and bottom border, as it does for a left and right border.Click on Set then click on the main Edit button to see how it looks. Save if you want to keep it, or click on Edit again to continue editing.

2.

> > >

>

> >

1. IntroductionEach part of your web page is enclosed within a border, orframe – including your site as a whole. Our styling system allowsyou to display these borders, to increase/decrease their width,change their style (eg solid, dashed, groove, etc), and changeborder colour. This can be particularly effective for images, as youcan create a fancy framing effect throughout your galleries.

Page 1 E.4 Editing Borders

E.4 EDITING BORDERS «cliktips guide»Great websites made easy

1

1

2

3

3

4

5

1 2

3

4

5 4

3

3

2

2

1

tisbewtaerG

ysaeedamset

drobgniddA.2

elytsriehtegnahcehtyalpsidotuoygnidulcni–emarfruoyfotraphcaEnoitcudortnI.1

ycnafaetaercnacihT.ruolocredrob

sre

ehsad,dilosge(ed/esaercniot,sredrobeseruO.elohwasaetisruoytiwdesolcnesiegapbew

ohguorhttceffegnimarfyceffeylralucitrapebnacsevoorg,d

,htdiwriehtesaerceswollametsysgnilytsr

ro,redrobaniht

.seirellagruoytuuoysa,segamirofevit

egnahcdna,)cte,e

1

roF

behtddaotekiloisnemidegaP–egapbewafopsaotdesopporuoyotsredrobkaepsyllareneG

tneruoydnuoraot,elpmaxe

2

.otredrobkcilC>sgnittes&snoSotgniogybsihtoduoy–

traproegapbewcificepsa–etiseritne

gniylppaerauoyfi,gnik

dluowuoyetiseritredrobaddao

1

uoyetisehtfotrapehtno>selytSmotsuC>selytS

d’u>

3

lliwxobpupopilC>redrobunwodllorcS>tuoyaLnokcilctneruoydnuora

3

3

rcnI.sedis4llaroffehtretnE.htdiW

.raeppasihT>tidenokcetiSeesuoylitnusnoisnemid&

dluowuoy,etiserit

1

2

erugifsihtesaerced/esaerotgniogsitifiereherugif

5

3

emosyrtoteemasehteb

4

12

4

ruoytceleS.elytS.sezistnereffid

dflfdmasehtebotsahexip(erugifaretnewtcelesneht,senoobmotttob/potehteldnamottob/poTTo

eesotyrtawefa2

3

ft

dbhiobmotttobdnapotarofe,revewoH.01ro5ge,)sleekildluowuoyenohcihwmorftnereffidebotsredrwuoyfI.sredrobthgir/tfe

.koolyehtwohnwodpordehtmorfelyts

tisa,redrohtdiwehtdnatideotthgir/tfeleht

ekildluow

eviG.unemn

rolocehttideTTdrobgnitidE.3

dEnokcilcredrobehtforsruolocre

f

etiStsniagatid

cnehtteSnokcilCdnatfelarofseod

.gnitideeunitnocttnawuoyfievaS

.skooltiwoh4

5

okcilc.redrobthgir

tidEnokcilcro,tipeekot

tttubtidEniamehtn

otniaga

eesotnot

es(ruolocredrobruolocehttideoTTo

.yltceridgnisuybnoitcelesuolocruoytceleS

.)evobaeedEnokcilc,redrobehtfor

,ylevitanretlA.redilsehtgbegralehtnognikcilcybr

3

etiStsniagatid

eulavruolocaretneehtegnahC.xob

1.

2.

> >

Page 1 E.2 Editing Fonts

E.2 EDITING FONTS «cliktips guide»Great websites made easy

Font size. Enter a % figure based on the default figure, either largeror smaller. You must remember to include the ‘%’ sign with no spaces.

Font. Select from the fonts available in the drop down menu. You can easily add to this list – see 4. below.

Font weight.This selects how thick or thin the font characters are. Choose from Normal, Bold or Light.

Font align. Select how you would like the text aligned within its container – Left, Right, Centre or Justified.

Text transform. Select from Title Case, lower case, UPPER CASE or None.

Text decoration.This allows you to underline, overline and put a line through text.

Line height, Letter spacing and Word spacing. Enter a % figure based on the settings you already have. Don’t forget to include the ‘%’ character and no spaces!

White space.This relates to the space at the end of text. Try the different options to see how they work.

1

2

2 3

4 5

8 6

7 3

4

7

5

8

6

1 2

1 2

3 1

2

1

1

2

3

sitbewateGr

asyeemads esit

ftideotwHo.2

fothigrroertncebmal,ron(thigewleeotro/dan– c tesitbeweirtneruoywallom estsyruOnoictudrotnI.1

ofehTs tnof

eagpbewehtfotarpehtebgacinspeht,)thlig,ldobpbewa fotarpros tnmele/dan-)’sginttttseal blog‘(esittnofehteganhcotuoys w

yfos tarpmainehtrofs tno

.deaintncois itatht,srettttledans drowneewtextetitdealsocanuoYYo.eagpyfos nioctseaintrceotro/danesiztnofeht,seuuoy

via deitdeearesitbewruoy

otxtetginnaligas ll ews ac)te,rewlo,reppu(gcasinxtittesit,unmege,esitruoypapcanuoYYos.rulocoxtetd

ruovia

,tfleehtotnof,c)

s,icletar,leitotis htly p

1

Clictse

akTTakClic

seuehT

Clic

ostCu

12

12

3

xobpupopis hTtidenok Clic%.07ge,gintt

%ltaufedehtfoetona eak.nottubniMaehtnok Clic

seohthitwk icstotdnets rsetnerefifdfos nezodearere

punepootx obis htnok Clic

nok Clicm.estsyselystm o

seniaMehtindeaintncoseuohalt,itdecanuoys tnoft

.unmestnoFeht

s elystm ostCu>s elyStn

12

.nioctsestmohgu

s.tnoF>s

s.acespmuuoYYo.rsmalleroretnE.ezsitnoF1

eselloofpap

Clic

tedcluinotrembmeerstmudehtnodaseberuigf% a

32

.elikks oloitathweotweivrePnehts,wllo

as etlempCos.arepxobpupopis hT.tidenok Clic

onhitwnsig%’‘ehtreglarrehite,eruigfltaufe

23

1

3

rm.osfnrattxeTTe

,tfeL– reaintncoleeS.ngilatnoF

Nom orfseooChis hT.thgiewtnoF

otdadasily ecanm orfctleeS.tnoF2

3

4

5

wloCaseleitTm orfctleeS

.dieifstuJroertnCe,thRigehteliklduowuoywohct

.thigLroldoBmal,rNoinhtrok ichtwohs ctleseis

.wloeb.4ese– listis htoehtinleailabvas tnofehtm

roESCAR EPUPcaserew

s itinhtiwdenaligxtet

.ears reactarhctnofeht

uoYYo.unmenwodpord

45

6

7

8

hTceaspetiWh

danreactarhc%’‘tseehtnodasebteL,thgieheniL

.xtethguorhtnoitracoedtxeTTe

.enNorm.osfnrattxeTTe

7

5

8

6

tatacepsehtots elateris h

s!acespondDo.evahy adealruoys ginttasprdoWdnagnciaspr ett

linrednuotuoys wallois hT.

wlo,CaseleitTm orfctleeS

ehty rTrxtetfodneeh

ehtedcluinottegroft’nDoeruigf% a retnE.gncia

elina tupdanelinrevo,elin

roESCAR EPUP,caserew

ms.ret% inneivgally suueda as dliepapis hichwal bloga m orf’deitrehin‘edearesitruoyfos tarpginttseeht,netfoeituQ

%ezsitnoFnoetonA

isis hTms.danltaufe,ginttseal rodeivreaintrcerofs g

%

s niotpotnerefifdhT.ceaspetiWh8

k.rowy ehtwoheseots tatacepsehtots elateris h

ehty rTr.xtetfodneeh

eruigf% ehtotniolater

cesitbewruoynos tnofhts anmehichw,eruigfetneotuoyask ewy hwms.ret% inneivgally suu

.retneuoye

ineganhcrehtoat

%a reisis hTms.

Page 1 E.6 Position Padding and Margins

Great websites made easy

E.6 POSITION, PADDING AND MARGINS «cliktips guide»

7.The different ‘Types’ of Other contentHere we explain the different Types of Other content which are presentedwhen you add a new Other content item. For some specialised content items– such as menus, social media logos, header graphics, etc – we have providedseparate Cliktips Guides.

General. This is used to add images, artwork and text suchas the logo in Example 3. Articles. Add a list of articles from a Multi page section – choose how many you would like to appear and what information you’d like to show. These will automatically be updated as and when you update your articles.Menu. Add additional menus, put them wherever you want,and link them to whichever sections you like. See also Cliktips Guide C.1 Menus and site structure.Photo. Add an image. Assign more than one image and it will randomly rotate with each click. Slideshow. Add a slideshow from a choice of stylish and fancy slideshow schemes. See also Cliktips Guide B.3 Slideshows.Photo panel. Add a carousel or series of thumbnails and link through to the respective gallery. See Example 2 in thisguide, as well as Cliktips Guide B.2 Using carousels.Text. Generally speaking we do not advise using this – General is much more suited to text insertions.Button. Add your own artwork for navigation buttons. Section title.You can actually create an entire web page using Other content (based on a blank page). If so, you would add the title using this. (See 8.3 below).Location indicator. This adds the section name to wherever you on the page you want it to be. This would usually be right at the bottom, so if your use has scrolled a long way down and can no longer see your main menu, they know where they are. Log in panel.This is part of our Gallery isolation facility (Super Pro users only), where your users have to enter a code to access a particular gallery. See Cliktips Guide B.5for details.Links. Have a list of links from your Links section. Choosehow many you’d like to show.Search box. If you’ve set up a Search facility (Pros and Super Pros only), you can use Other content to add and position the Search box. See Cliktips Guide A.5.Form. You can use Other content to insert a Contact Formwherever you like, not just in a separate Contact section.See Cliktips Guide C.6 Editing contact forms for details.Comments. Invite and then post comments from your users, similar to Guestbook. See Cliktips Guide C.7Comments for details.Flickr feed. Add as many images as you like from your flickrgallery without affecting your image allowance. See CliktipsGuide A.7 for details.

«cliktip»2

1

3

6

5

4

7

8

10

9

11

12

13

14

15

16

More uses of other content

1. Insert a header graphic

See Cliktips Guide A.2

2. Add social media buttons


3. Add a Search facility


4. Add additional menu/s

See Cliktips Guide C.1

How to change fonts, fontsize, casing, etc, and how toadd additional fonts to thedefault selection.

How to change your site’sbackground colours. We alsoshow you how to add agradient effect merging fromone colour to another, oralternatively use a photo orimage as a backdrop.

How to put borders andframes around certain partsof your site, including yourimages.

How to add/delete columnsand add content intoadditional columns. Edit yoursite’s width, as well as theheight of its header.

How to align or positioncertain elements of yourwebpage. How toadd/remove ‘gaps’ betweenand outside of elementswithin a web page.

7.2 Look out for the Styling tabIn some parts of the system, you will notice a Stylingand/or layout tab, notably in Other content records. Theseprovide a handy link to the styling and layout options forthat particular part of your website. Definitely worthlooking out for!

7.3 Introduction to Preview editIt is also possible to access many of the styling options while looking at a Preview of your site. Wecall this our Preview edit facility. By clicking on the Edit button in the top left, you can then click onthe part of the web page you would like to edit - a popup will appear showing you what your optionsare. We show you how to use it on the next page.

Pros of Preview editl Easy to and quick to use.l Shows you which styling options are available for that part of the site.

l You know exactly which part of your site you are editing.

Cons of Preview editl Not always suitable for global changes toyour site.

E.2 Fonts E.3 Background colours(and images)

E.4 Editing borders E.5 Layouts anddimensions

E.6 Position, paddingsand margins

8.2 An exampleLet’s start with an example to show you how itworks. In this case we are going to change the fontof the site title on ‘Josephine Bloggs’. Click onPreview in the admin system > Click on the Editbutton in the top left corner.

Click on the pencil/grey area where the site title is.A pop up box appears.* Under Font, click on edit.Select a new font from the drop down options.(You can also add more fonts to this list - see Cliktips Guide E.2 for details.)Click on Set. At this point you may wish to click on the main Edit button so that you can see the changes better.Click on Save to apply the style or Clear to return to the previous setting.

*This pop up box shows the options available tostyle a specific part of the page. If you would like toedit the entire page – or to see the layout options – use the drop down box to do it. See in 8.1 above.

Once you get the hang of Preview edit, most of the other styling and layout options are fairly self-evident. It’s certainly worth giving some a try at this point.



8. How to use Preview edit

8.1The Preview edit menuClick on Preview in your admin system and go to the page you would like to edit.

1 2 34

5

Edit. Click on this to open Preview edit. Click on it again to close it.Save all. Click on this when you are ready to save the changes you have made.Clear. Click on this to clear the settings you have been working on.Drop down control options. It is important that you select from this menu, as the systemwill present different options depending on whether you are styling or editing the layout ofparts of a page (content sections), or the page in its entirety (page and containers). Thedefault – Edit styling of content sections – covers most styling options.Pencils.These show the different elements of the page that can be edited. Click on therespective pencil or part of the page that you want to edit and a pop up box will appear withyour options.

1 2

3 4

4

5

1 2 3

4

5

1

2

3

4

5 1

6

Before

After



9. Backing up your styling

9.1. IntroductionStyling your website is very much about trial and error – giving something a go and seeing what it looks like.We therefore offer some backup facilities to ensure that you can try some of the style options we provide,without worrying too much about losing your current settings and/or what you’ve been working on.Please note: these instructions only apply to style changes, such as fonts, colouring, bordering, etc –anything in our Custom styles section and just about anything changed using Preview edit.They do NOTrelate to other changes such as text changes, adding articles, images or sections, etc.

9.2. Clearing style settingsYou can quite easily clear your style settings: 1. Since you last logged in; and 2. That you’ve ever done.

To do this, go to Styles > Custom styles:

9.3. Additional back-up – Auto saveFor additional back-up, the system also auto saves the last 5 versions of your style settings. This autosave is triggered when you: 1. Switch template style and/or 2. Change template colour scheme. In addition, you can manually do this yourself whenever you want, up to a maximum of 5 saved versions. Todo this, go to Styles > Save/load settings.

Reference. Enter a reference you will remember these settings by.Description. Optionally enter a description – this can be invaluable at a later stage if you can’t remember what you were working on!Save settings.

21

21

1 2

3

4

9.4. Retrieving saved style settingsTo retrieve style settings, simply click on Info/load . By clicking on this, the system will invite you toApply settings, which will load the style settings you saved.

4

1

2

3

By clicking Restore settings, the system will restore your site to the settings you had when you last logged in. By clicking on Clear settings, you will clear all of the style settings you have ever made. Only use this if you are100% sure you want them ALL clearing!

e.1 introduction to styling & layout «cliktips guide»guides.clikpic.com/e1 introduction to...

Documents