How to format the different elements of a page in the CMS :

Storlek: px

Starta visningen från sidan:

Download "How to format the different elements of a page in the CMS :"

Anita Falk
för 8 år sedan
Visningar:

1 How to format the different elements of a page in the CMS : 1. Typing text When typing text we have 2 possible formats to start a new line: Enter - > is a simple line break. In a paragraph you simply want to add a new line. Shift + Enter -> starts a new paragraph, closes the last paragraph and starts a new one. Looking at the HTML source code, this looks like this: <br /> a line break <p> Here is my text </p> a paragraph. /p denotes the end of my paragraph, and the < and > signs are used to differentiate the paragraph tag from the normal text. Standard Text is automatically correctly formatted by the CMS, but of course you can change the default format by selecting the appropriate buttons (e.g. Bold, Italic, underlined etc.) of the Wysiwyg Editors menu: NEVER COPY TEXT DIRECTLY FROM MS WORD INTO THE WYSIWYG Editor. Doing so may result in unpredictable results. The reason for this is that Microsoft uses its own HTML formats for Microsoft Word.

Looking at the HTML source code, this looks like this: <br /> a line break <p> Here is my text </p> a paragraph.

2 2. Headlines In the CMS you mark the text you want to format and then select the desired format from the dropdown menu Format (the exact title of this menu depends on the language of your installation ), like this: You have 3 kinds of headlines at your disposal: HEADLINE2 ->Lucida Grande, 20px, normal, letter-spacing -1px, all capital letters Headline3 -> Lucida Grande, 18px, normal, letter-spacing -0,5px Headline4 -> Lucida Grande, 16px, normal, letter-spacing -1px, all capital letters In the source code this looks like this: <h2>text of my headline</h2>

->Lucida Grande, 20px, normal, letter-spacing -1px, all capital letters Headline3 -> Lucida Grande, 18px, normal, letter-spacing -0,5px

3 In order for this text to be displayed for example in green, select the appropriate selector from the drop down menu Stil or Style (the exact title of this menu depends on the language of your installation ): When doing so, in the source code this looks like this: <h2 class= green >Text of my headline</h2> If you want to revert a text back to the default color of the website, which is a dark grey, you may either choose normal from the list of styles available or take out the class=green selector in the source code.

like this: <h2 class= green >Text of my headline</h2> If you want to revert a text back to the default color of the website,

4 Unordered lists The small signs in front of every list item can be coloured in the 6 coulours shown above. To do that you create a list using the Wysiwyg Editor and then in the source code this looks like this: <ul> <li> my 1. list item</li> <li> my 2. list item </li>.. </ul> <UL> and </UL> delimit the beginning and the end of the unordered list. <LI> and </LI> are the delimiters for the different list items. By default the unordered list has no list sign in front of every list item. In order to add the green list signs in front of every list item, add class= green to the UL beginning tag: <ul class= green > <li> my 1. list item</li> <li> my 2. list item </li>.. </ul> Again all the 6 colours, orange, red, blue, dark-blue, green, brown and light-green are available. Please bear in mind that typing mistakes with the class selector will result in no list sign displayed in front of every list item.

. </ul> <UL> and </UL> delimit the beginning and the end of the unordered list. <LI> and </LI> are the delimiters for the different list items.

5 Shopadmin This is an example of a trip entered in the shopadmin section of the IPT shop:

6 The result of this formatting looks like this in the website: The fields marked in red in this example show the corresponding fields in the Edit Product form of the shop. The field names Name, Date, Shorttext, Pricing are formatted automatically, so you don t have to add any formatting tags.

7 To archieve the list shown in Included Services in this example, you must enter following code in the field Included Services in the Edit product section of the shop: <ul class="green"> <li>direktflyg med Icelandexpress från Köpenhamn </li> <li>flygskatter och säkerhetsavgifter </li> <li>3 alt. 4 nätter i dubbelrum med dusch och WC </li> <li>3 alt. 4 frukostbufféer </li> <li>dagstur Gyllene Cirkeln med gejsrar, vattenfall och nationalparken Thingvellir </li> <li>transfer tur och retur flygplatsen - hotellet. </li> <li>resegaranti</li> <li>flygtider från Köpenhamn till Keflavik (Reykjavik): Måndagar och fredagar avgång 20:30, ankomst Keflavik/Island 21:50. Återresa från Keflavik till Köpenhamn: måndagar och fredagar avgång 15:30, ankomst Köpenhamn 19:40. Du har också möjlighet att flyga reguljärt från Stockholm och Oslo. Tilläggskostnad per person 1789:- SEK. Kontakta oss för flygtider.</li> </ul> In Bold you can see the different formatting tags. If you want the list items to have dark-blue list icons in front, change the class in the <UL> to dark-blue. To archieve the text formatted as shown in Description in this example, you must enter following code in the field Description in the Edit product section of the shop: <h3 class="green">resedetaljer: </h3> <p>4 dagar/3 nätter (fre - mån) eller 5 dagar/4 nätter (mån - fre). Barn (2-11 år) reser från 990:- SEK (övernattning i föräldrarnas rum). (Enkelrumstillägg 1175:- SEK). </p> <p><strong>1. Stora Stadsrundturen i Reykjavik</strong><br /> Det här trestjärniga hotellet erbjuder rum med dusch och WC, TV, telefon och minibar. </p> <H3> is Headline3, class= green means you want the headline to be green, <P> is a paragraph that ends with </P>, <BR /> means line break or new line and <STRONG> means bold.

4 frukostbufféer </li> <li>dagstur Gyllene Cirkeln med gejsrar, vattenfall och nationalparken Thingvellir </li> <li>transfer tur och retur flygplatsen - hotellet.

Relevanta dokument

Webbregistrering pa kurs och termin

Webbregistrering pa kurs och termin 1. Du loggar in på www.kth.se via den personliga menyn Under fliken Kurser och under fliken Program finns på höger sida en länk till Studieöversiktssidan. På den sidan