Manual Final

When updating the website for the rst time, please read the whole manual and follow
it step-by step. If you have any questions please email: michael@let.nu
MANUAL
www.en.daiquiri.se
IMPORTANT INFORMATION BEFORE YOU START!
URL
This section explains how you change the URL:s for the Daiquiri web page and for the supporting Facebook page. The website To visit the website go to: www.en.daiquiri.se. If you want to change to another URL do the following; 1. Order a new domain from any web hosting company, a good choice is www.space2u.com. 2. Ask the web hosting company to point the domain to the following IP: 194.237.215.103 3. Email your new domain to: michael@let.nu. The facebook tab To visit the facebook page go to: http://www.facebook.com/pages/Home-of-the-Daiquiri/255569161160413?sk=a pp_289404141080075 For implementing the tab on any Facebook page, just use the following URL; http://www.en.daiquiri.se/facebook/index.html
THE CMS CMS stands for Content Management System. We have built a CMS for the Daiquiri website from which all text, images and logos can be changed/updated/deleted on both the website and the Facebook page. We have also built in functions for changing the general look of the web page. On the following pages you find a thorough walk through of the functionality of the CMS.
Its important that you read this section thoroughly!
IMAGE SIZES
As always when publishing images on a web site its important that they are as light as possible for the site to be quick to download for the visitors. This is even more important on a website that has a one-page design like the Daiquiri page, where all text and images are published on the same page and where the visitors simply has to download every image and all the text at the same time. Therefore its super important that all images gets converted to the right size. For example, if the background image; which is a really big image, is not converted properly, the image might weight around 1 megabyte. For the visitors this would mean that they might have to wait up to 1 minute before they can visit the website. On this website that has a lot of images, not converting the images to the right size simply could mean up to a couple of minutes in downloading time for the visitors. For this not to happen. Please follow this walkthrough on how to convert images to the right size. All steps should be done for ALL images on the website! Also, you need to edit the image in BOTH Photoshop and Fireworks as Fireworks can downsize the image to aprox. half the size what Photoshop can manage. For example, after saving the background image in Photoshop the weight is about 400 kb while it after been saved in Fireworks will weight only about 150 kb. 1. PROGRAMS Before you start you need to get both Adobe Photoshop and Adobe Fireworks. Both programs are possible to download for free on a 30 days trial basis from www.adobe.com. 2. OPEN THE IMAGE IN PHOTOSHOP 2.1: Check in the CMS what size the image should have. This is published before every image field in the CMS. 2.2 3.3 3.4 In Photoshop cut the image to the size stated in the CMS. Click: file - save for web. Save the images
3. OPEN THE IMAGE IN FIREWORKS 3.1 Open the optimise window (window - optimise) 3.2 Choose the preferred image format. - For images with transparent background choose: PNG32 - For all other images choose JPG - smaller file 3.3 Go to: file - export 3.4 Save the images 3.5 Upload the image to the folder that is stated in the CMS.
LOG-IN TO THE CMS 1. To log-in to the CMS visit: http://www.en.daiquiri.se/manager/ 2. To log-in use the following text credentials; Username: test Password: 123456789 User accounts If you want to add other user accounts. Email the list of users to us on the email below and we will open up accounts for all your desired users. info@let.nu If you your selves want to be able to add user accounts you need to have a main administrator for the website who will manage this. This person then needs to be comfortable in running a CMS and preferably how to program. In this case we will teach that person how to open new user accounts.
The log-in box on http://www.en.daiquiri.se/manager
THE WELCOME PAGE
After log-in at: en.daiquiri.se you arrive at the start page for the CMS. This pages describes the interface and functionality of this page.
TOP MENU
HOME: SITE:
Takes you back to this window.
- View open the website in a new window - Clear cache clears the cache. Click here if you for example update an image but the new image does not get published on the live site. - Log-out simply log-out the user from the CMS REPORTS: Site schedule. This is an advanced function that you will not need to use. USER: Profile. Here you change your password and add extended user information. UPDATE START GALLERY This button is described later. Basically it is here you add images for the start gallery of the start page in the front end. RESOURCES TAB The resources is simply the web-sites different pages. By clicking the documents in the resources tree, you are able to edit the text and images on the website. Each section is described later in this document. FILES TAB Here you find all images that are published on the web page. When you want to delete or upload a new image, this is where you do this. The Files Tab is described later in this document.
RESOURCES - Design
This describes the elds of the design resource.
Dont forget to click save when you are nished editing!
1. Main background In this eld you change the main background of the website. To change the background, do the following; 1.1 Click on the les tab. 1.2 Click on the les- folder to open it. 1.3 Right-click on the main-elements-folder 1.4 Choose upload les and upload your new background image to the main element folder. 1.5 Write the name of the le in this eld including the letype (.jpg) 2. Content corners Here you can choose if you want rounded corners on the menu and the main content. If you want square corners, leave both these elds blank. 3. Margins Adjust the margins between the top and the menu. Write the distance in px (ex. 10px)
4. Main logo and Menu logo Here you change the logos for the website. To change any of them do the following; 4.1 Click on the les tab 4.2 Click on the les- folder to open it. 4.3 Right-click on the main-elements-folder 4.4 Choose upload les and upload your new logo images to the main element folder. 4.5 Write the name of the le including the letype in these elds. 5. Film Startpage; text background & text color Here you can change the background color of the text and the text color on the lm section at the start page. If you dont want to use any color then write; none. Write color values in hex (ex. #000 for black) 6. Film Recipes; text background & text color Same as above but for the lms on the recipe pages.
RESOURCES - Home | Misc

This describes the elds of the home resource.
MISC On the misc tab you edit the copyright notice at the bottom on each page and the button texts.
1. Button 1 Here you edit the text of the Read more buttons. Change the text to what you prefer and click save. 2. Button 2 Here you edit the text on the buttons in the lm sections. Change the text to what you prefer and click save.
3. Copyright notice Here you edit the copyright notice that are published at the bottom of each page. Change the text to what you prefer and click save.
RESOURCES - Home | Menu

MENU On the MENU tab you edit the text of the main menu.
Change the text of the menu Simply edit the text in the corresponding elds and click save.
RESOURCES - Home | Slider

SLIDER
To change / edit the images in the start slider there is two steps involved. This sections describes how to do this. 1. Click on the update start gallery button in the top menu. 5. Click choose le and choose the image you want to upload. The image should be 620 x 270 px. 6. In the name eld, write the headline that will be published on the image. 2. Click on the Startslider album link. 7. In the description eld, write the text that will be published under the headline. 8. Active should be active/marked. 9. Tags should be empty. 10. In the URL eld, paste the url to which you want the image to be linked to when the user click on it. If you want it to be linked to a section on the web page, paste the whole URL like; http://www.en.daiquiri.se/#ingredient 3. To delete an image, right click and click delete item. 4. To upload a new image, click upload item;
Continue on the next page >>
RESOURCES - Home | Slider

THE SLIDER TAB

After you have uploaded all the images you want to publish on the start gallery (see previous page), click on the home / slider-tab to edit the way the images are presented. 1. Nivo gallery checkbox. This should be Yes 2. Nivo Album This should be Startslider 3. Image width / height This should be 620 width and 270 height. 4. Nivo theme This should be default. 5. Transitions effect Here you can choose between 16 different image transitions. Feel free to experiment. 6. Nivo caption This should be yes 7. Nivo image indicator This should be yes 8. Nivo timer Here you can adjust for how long you want each image to show. 1 second = 1000, 2 seconds = 2000 Etc..
RESOURCES - Home | 3.1 Start

3.1 Start
Here you edit the elements of the start page. Change the text elds as you whish and click on the save button.
Button text: To change the button text, click on the misc tab. Vimeo lm url: To change the lm. Open an account at www.vimeo.com and upload the lm to your Vimeo account and paste the lm URL here. Change the width to: 400 and the height to 200
Images: For changing the link images simply click on the les tab and upload new images to folder no. 1. Write the name of the le including the le ending (.jpg) and press save. Gallery images: For instructions on how to update the gallery see page 4 & 5.
RESOURCES - Home | 3.2 Ingredient start

3.2 Ingredients start

Here you edit the elements of the Ingredient start-page. Change the text elds as you whish and click on the save button. IMAGES Upload new images to folder no. 2 and write the name of the les in the corresponding eld.
RESOURCES - Home | 3.3 Havana Club

To edit the text-block and to add images in the text, please refer to page 35 in this document.
3.3 Havana Club

Here you edit the elements of the HavanaClub page. Change the text elds as you wish and click on the save button. Facts head: You only need to write in this eld if you have chosen left-main... in the text format eld. Facts list: You only need to write in this eld if you have chosen left-main... in the text format eld. Important! - the list-items has to be wrapped in <li> tags like; <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Etc..
TO NOTE ImageClass: Change this to landscape if the big image has a landscape format and to portrait if the image has a portrait format. Textformat: If you dont want a fact list to the right of the text then choose main spalt, if you have a fact list choose left-main... Text eld: Important! - Read the text reference on the last page in this document before editing.
RESOURCES - Home | 3.3.1 Havana Club

3.3.1 Tres Anos

Here you edit the elements of the Tres Anos-page. Change the text elds as you wish and click on the save button. Text eld: Important! - Read the text reference on the last page in this document before editing. Facts head: You only need to write in this eld if you have chosen left-main... in the text format eld. Facts list: You only need to write in this eld if you have chosen left-main... in the text format eld. Important! - the list-items has to be wrapped in <li> tags like; <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Etc..
TO NOTE ImageClass: Change this to landscape if the big image has a landscape format and to portrait if the image has a portrait format. Textformat: If you dont want a fact list to the right of the text then choose main spalt, if you have a fact list choose left-main...
10
RESOURCES - Home | 3.4.1 Havana Club

3.4.1 Key Ingredients

Here you edit the elements of the Key Ingredients start page. Change the text elds as you wish and click on the save button.
Images: Upload new images to folder no. 5 and write the name of the image le in the image elds.
11
RESOURCES - Home | KEY-INGREDIENTS

ImageClass: portrait-start
Text Format: left-main-spalt
Text Format: main-spalt
3.4.2 - 3.4.6: Key Ingredients

This page shows how you edit all the Key ingredients pages. Facts head: You only need to write in this eld if you have chosen left-main... in the text format eld. Facts list: You only need to write in this eld if you have chosen left-main... in the text format eld. Important! - the list-items has to be wrapped in <li> tags like; <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Etc..
12
RESOURCES - Home | 4 Material-start

4 Material-start
Here you edit the elements of the Key Ingredients start-page. Change the text elds as you wish and click on the save button.
13
RESOURCES - Home | MATERIAL

Text Format: main-spalt
4.1 - 4.3: MATERIAL

This page shows how you edit all the Key ingredients-pages. Facts head: You only need to write in this eld if you have chosen left-main... in the text format eld. Facts list: You only need to write in this eld if you have chosen left-main... in the text format eld. Important! - the list-items has to be wrapped in <li> tags like; <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Etc..
14
RESOURCES - Home | 5. Recipes start

5. Recipes | Start
Here you edit the elements of the Recipes start page. Change the text elds as you wish and click on the save button.
15
RESOURCES - Home | Recipes

DISPLAY FILM: None
DISPLAY FILM: Inline-block
5.1- 5.3 Recipes

This page shows how you edit all the Recipes-pages
Ingredients: Important! - the ingredients has to be wrapped in <li> tags like; <li>Ingredient 1</li> <li>Ingredient 2</li> <li>Ingredient 3</li> Etc..
Display lm If you want to show a lm then choose; inline-block If you dont want to show a lm then choose; none Film url: To add a lm. Open an account at www.vimeo.com and upload the lm to your Vimeo account and paste the lm URL here. Change the width to: 400 and the height to 200
16
RESOURCES - Home | 6. Background start

5. Background | Start
Here you edit the elements of the Background start page. Change the text elds as you wish and click on the save button.
Images: Upload new images to folder no.8 and write the name of the image le in the image elds.
17
RESOURCES - Home | 6. Background start

5. Background | Start
Here you edit the elements of the Background start-page. Change the text elds as you wish and click on the save button.
18
RESOURCES - Home | 6. 1 - Background Cuba & 7. EL Floredita

ImageClass: landscape-start ImageClass: Portraits-start
6. 1 - Background Cuba & 7. EL Floredita

Here you edit the elements of the start pages for Cuba and El Floredita. Change the text elds as you wish and click on the save button.
19
RESOURCES - Home | Background pages (6.1, 6.2, 7.1 & 7.2)

ImageClass: landscape-start
Background pages (6.1, 6.2, 7.1 & 7.2)

This page shows how you edit all the background pages.
ImageClass: Change this to landscape if the big image has a landscape format and to portrait if the image has a portrait format. Textformat: If you dont want a fact list to the right of the text then choose main spalt, if you have a fact list choose left-main... Text eld: Important! - Read the text reference on the last page in this document before editing. Facts head: You only need to write in this eld if you have chosen left-main... in the text format eld.
Facts list: You only need to write in this eld if you have chosen left-main... in the text format eld. Important! - the list-items has to be wrapped in <li> tags like; <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> Etc..
20
RESOURCES - Home | 6. Contact

5. Contact
Here you edit the elements of the Contact Pages. STEP 1: The rst thing you need to do is to decide to which email address you want the visitor messages from the web site to be sent to. When you have decided this address, please send it to: info@let.nu STEP 2: Open the contact tab and edit the elds. STEP 3: Click on thanks for your email. STEP 4: Edit the elds and click save.
21
FACEBOOK
The following pages describes how to update the facebook page which you can nd on this address; http://www.facebook.com/pages/Home-of-the-Daiquiri/255569161160413?sk=app_289404141080075
When you want to publish the page on the nal facebook page address you push the content from this address; http://www.en.daiquiri.se/facebook/index.html#/home
22
RESOURCES - FACEBOOK | Startslider

This describes the elds of the Facebook resources.
FACEBOOK | Startslider
1. Upload your new images 1.1 Click on les 1.2 Click on the 0.facebook folder. 1.3 Right click on the slider folder. 1.4 Click on upload les and upload your new images. You can upload maximum 4 images! 2. Update the text 2.1 Click on the resources-tab 2.2 Click on facebook 2.3 Click on Startslider 2.4 Chose which slider you want to update (Slider 1 - 4) 2.5 Write the name of you new image les and update the text. 2.6 Click on Save. If your new images dont get published, rst check that you have uploaded them in the right folder and that you have spelled the name right. Also empty the cash (The top menu - site - empty cash)
23
RESOURCES - FACEBOOK | Frame

FACEBOOK | Frame This section is mainly for SEO-purposes (search engine optimization).
Update the elds and press Save.
24
RESOURCES - FACEBOOK | Main

FACEBOOK | Menu
1. Click on Resources - Facebook - Main 2. Click on the Menu tab 3. Update the elds and press save.
25
RESOURCES - FACEBOOK | Misc.

FACEBOOK | Misc
Facebook title This is the pages name. Update the eld and press save. Linktext This is the link-text that is presented on the bottom off the page. Home link This is the address to the home page. Background image Upload a new background-image to folder no. 0 and write the name of the le here. Logo Upload a new logo to folder no. 0 and write the name of le here. The logo is both the symbol and the text (Welcome to the home...)
26
RESOURCES - FACEBOOK | Misc.

FACEBOOK | Music player This section describes how to update the music player
Music Choose true if you want music and false if you dont want music. Volume Choose here on a scale from 0.1 to 0.9 the initial volume of the music. Youtube ids 1. Got to www.youtube.com. 2. Search for a song or upload your own. 3. In the browser address eld - copy the id (its 11 gures like; tnFfKbxIHD0) 4. In the SongTitle eld, write the name of the artist and the name of the song. 5. Press Save. Your song now automatically gets published.
27
RESOURCES - FACEBOOK | Cradle.

FACEBOOK | The Cradle of the Daiquiri

(Menu - background - Cuban heritage)
Head image Upload your image to folder no. 0 and write the name of the le here. Image width and Image Height Write the height and the width of the image. Vertical and Horizontal space Here you adjust the space between the image and the text. From 0 - 100.
Text Write the text here. If you want a new row, write the following tag; ********************************************************************** IMPORTANT! After updating all elds click on the misc tab. Write the home address of the page and press save. This is for the Learn more link.
28
RESOURCES - FACEBOOK | Floredita

FACEBOOK | Floredita
(Menu - background - el oredita) Head image Upload your image to folder no. 0 and write the name of the le here. Image width and Image Height Write the height and the width of the image. Vertical and Horizontal space Here you adjust the space between the image and the text. From 0 - 100. Headline Write the headline here. If you need to adjust it up or down on the page write the following tag; Write the text here and if you like to adjust the text and add images use the following tags; - New row: - Add image: 1. First upload your image to folder 0.Facebook. 2. Copy the following tag and change to your own references; <img width=add width height=add height hspace=6 vspace=4 src=../images/content/0.facebook/image name> ********************************************************************** IMPORTANT! After updating all elds click on the misc tab. Write the home address of the page and press save. This is for the Learn more link.
Text
29
RESOURCES - FACEBOOK | Recipe.

FACEBOOK | Recipe
(Menu - recipes - original recipe) Head image Upload your image to folder no. 0 and write the name of the le here. Image width and Image Height Write the height and the width of the image. Vertical and Horizontal space Here you adjust the space between the image and the text. From 0 - 100. Headline Write the headline here. If you need to adjust it up or down on the page write the following tag; Ingredients Write all the ingredients here. Separate each ingredient with a <li> tag without any space in between them like; <li>Ingredient1</li><li>Ingredient2</li><li>Ingredient3</li> ********************************************************************** IMPORTANT! After updating all elds click on the misc tab. Write the home address of the page and press save. This is for the Learn more link.
30
RESOURCES - FACEBOOK | Film

FACEBOOK | Film
(Menu - recipes - how to make a daiquiri) Video ID 1. Open an account on www.vimeo.com and upload the lm to your Vimeo account. 2. Copy your video-id and paste it in the Video Id Field. Video width Default value is: 480 Video height Default value is: 360 Video position Default value is: 150 Volume Choose the initial volume. Buffert time Default value are 5.
31
RESOURCES - FACEBOOK | Havana Club

FACEBOOK | Havana Club

(Menu - ingredients - HavanaCLub) Head image Upload your image to folder no. 0 and write the name of the le here. Image width and Image Height Write the height and the width of the image. Vertical and Horizontal space Here you adjust the space between the image and the text. From 0 - 100. Headline Write the headline here. If you need to adjust it up or down on the page write the following tag; 
Text Write the text here and if you like to adjust the text and add images use the following tags; - New row: 
- Add an image in the text block: 1. First upload your image to folder 0.Facebook. 2. Copy the following tag and change to your own references; <img width=add width height=add height hspace=6 vspace=4 src=../images/ content/0.facebook/image name> - Headline your headline ********************************************************************** IMPORTANT! A er updating all elds click on the misc tab. Write the home address of the page and press save. is is for the Learn more link.
32
RESOURCES - FACEBOOK | Key ingredients

FACEBOOK | Key Ingredients

(Menu - ingredients - other ingredients) Images Upload the images to folder no. 0 and write the name of the images here. Text & Headline Write you text and press save
IMPORTANT! After updating all elds click on the misc tab. Write the home address of the page and press save. This is the Learn more link.
33
RESOURCES - Facebook | Contact

Text: To get a new row in the text eld, write 
FACEBOOK | Contact
(Menu - contact)
To update the contact section there is two tabs in the CMS; CONTACT: This is where you update the logo, headline and presentation text. CONTACT SETTINGS: This is where you write the error messages and the labels for the e-mail form. Simply update your settings and press save.
34
TEXT REFERENCE
The CMS gives you the opportunity to design and change the text as you wish as all text elements are edited with regular HTML-tags. This section describes the most common tags you need to know when editing the text. !Important After updating a text eld its important that you save the page and check the live page. If the page looks strange you have written one of the tags wrong or missed to close the tag with an ending tag; ex. .
Paragraph
For writing a paragraph of regular text in a text-eld you must wrap the text in a p-tag which looks like this;
 Here you put your rst paragraph Here you put your next paragraph. 
Underline
If you want your text to be underlined, wrap it in the following tag; This text will be underlined ***********************************************************************************
Source
If you want to state the source of something, wrap the text in the following tag; <cite>This text will be smaller</cite>
***********************************************************************************
New line
If you want a new line write the following tag;
 
***********************************************************************************
Images in the text

If you want to add an image in a text-block do the following; 1. Upload the image to your preferred image folder - for example 9.Floredita. 2. Copy the following tag; <img src=images/content/IMAGE FOLDER/image name. jpg class=IMAGE CLASS alt=DESCRIPTION /> 3. Change IMAGE FOLDER to the name of the folder you uploaded the new image to. 4. Change image name. jpg to the name of your uploaded image. 5. Change IMAGE CLASS to; - FOR A RIGHT ALIGNED IMAGE: - FOR A LEFT ALIGNED IMAGE:
***********************************************************************************
Bold text
If you want the text to be italic you wrap the text in the following tag;
This text will be bold
***********************************************************************************
Italic
If you want your text to be italic you wrap the text in the following tag;
This text will be italic
***********************************************************************************
Paragraph headline
If you want a headline in the middle of a text block, then write the following tag;
<h5>Put your headline here</h5>
editorial-right editorial-left
6. Change DESCRIPTION to your own description of the image.
35

Manual Final

Caricato da

Informazioni sul documento

Descrizione originale:

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Manual Final

Caricato da

Copyright:

Formati disponibili

When updating the website for the rst time, please read the whole manual and follow

it step-by step. If you have any questions please email: michael@let.nu

IMPORTANT INFORMATION BEFORE YOU START!

IMPORTANT INFORMATION BEFORE YOU START!

Its important that you read this section thoroughly!

IMPORTANT INFORMATION BEFORE YOU START!

The log-in box on http://www.en.daiquiri.se/manager

IMPORTANT INFORMATION BEFORE YOU START!

THE WELCOME PAGE

Takes you back to this window.

Dont forget to click save when you are nished editing!

RESOURCES - Home | Misc

Dont forget to click save when you are nished editing!

RESOURCES - Home | Menu

Dont forget to click save when you are nished editing!

RESOURCES - Home | Slider

Dont forget to click save when you are nished editing!

Continue on the next page >>

RESOURCES - Home | Slider

Dont forget to click save when you are nished editing!

THE SLIDER TAB

RESOURCES - Home | 3.1 Start

Dont forget to click save when you are nished editing!

RESOURCES - Home | 3.2 Ingredient start

Dont forget to click save when you are nished editing!

3.2 Ingredients start

RESOURCES - Home | 3.3 Havana Club

Dont forget to click save when you are nished editing!

3.3 Havana Club

RESOURCES - Home | 3.3.1 Havana Club

Dont forget to click save when you are nished editing!

3.3.1 Tres Anos

RESOURCES - Home | 3.4.1 Havana Club

Dont forget to click save when you are nished editing!

3.4.1 Key Ingredients

RESOURCES - Home | KEY-INGREDIENTS

Dont forget to click save when you are nished editing!

Text Format: left-main-spalt

Text Format: main-spalt

3.4.2 - 3.4.6: Key Ingredients

RESOURCES - Home | 4 Material-start

Dont forget to click save when you are nished editing!

RESOURCES - Home | MATERIAL

Dont forget to click save when you are nished editing!

Text Format: main-spalt

4.1 - 4.3: MATERIAL

RESOURCES - Home | 5. Recipes start

Dont forget to click save when you are nished editing!

RESOURCES - Home | Recipes

Dont forget to click save when you are nished editing!

DISPLAY FILM: None

DISPLAY FILM: Inline-block

5.1- 5.3 Recipes

RESOURCES - Home | 6. Background start

Dont forget to click save when you are nished editing!

RESOURCES - Home | 6. Background start

Dont forget to click save when you are nished editing!

RESOURCES - Home | 6. 1 - Background Cuba & 7. EL Floredita

Dont forget to click save when you are nished editing!

ImageClass: landscape-start ImageClass: Portraits-start

6. 1 - Background Cuba & 7. EL Floredita

RESOURCES - Home | Background pages (6.1, 6.2, 7.1 & 7.2)

Dont forget to click save when you are nished editing!