how to use creative website starter site for umbraco › docs › 0000000 › ...how to use creative...

31
How to use Creative Website Starter Site for Umbraco By Warren Buckley

Upload: others

Post on 27-Jun-2020

4 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

How to use Creative Website Starter Site for Umbraco

By Warren Buckley

Page 2: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2

1. Introduction 3

2. Installation 4

3. Initial Configuration 6

4. Configuration and Use of site 7 - How to create a new photo gallery 8 - How to add a new Photo to a gallery 11 - How to create a new news or event item 13 - How to configure the contact form 14 - How to configure the email a friend form 16 - Understanding the Dashboards for the contact and email a friend form 18

5. General Fields on all Document Types 19 - Meta Tab 20 - Properties Tab 21

6. Customisation 22 - How to change the sIFR font colours 23 - How to change the font used for sIFR 25 - How to change the background colour of the page 27

7. Understanding how it all works 28

8. Further Reading 29

9. Thanks 30

10. Change Log 31

t a b l e o f C o n t e n t S

table of Contents

Page 3: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 3

introduction

Hello! My name is Warren Buckley, and this guide is used to help you install and configure the Creative Website Starter Site for Umbraco.

The idea that motivated me to create this sample website on the Umbraco CMS platform is that it can be a learning tool for you to understand how all the components of an Umbraco CMS website work together to build a simple website. The Creative Website Starter Site for Umbraco will give you the simple stepping stones that will help you build bigger and better Umbraco websites of your own.

The Creative Website Starter Site for Umbraco installs in seconds and provides a site with the following, easy-to-customise features:

- Photo Galleries - News & Events - Contact Form - Email a Friend Form - Search - RSS of News & Events - XML Sitemap designed for Google and other indexing services

Now you know why I have created this project I will briefly tell you who I am. Well you already know my name is Warren Buckley and I run an Umbraco and XHTML tips & tricks blog at www.creativewebspecialist.co.uk. I have been using Umbraco exclusively since Umbraco V2 back in 2006 and have seen it grow. I am a certified Level 1 Umbraco Developer and have received two Umbraco MVP awards (2007/08 & 2008/09) for my contribution to the Umbraco community. In addition to this I have previously written a Website Starter Site for Umbraco but with this version the focus is on documentation to support it and to help new users to the Umbraco platform.

With this project I have help from an ex-colleague and great designer Sam Grady who has designed the new look Creative Website Starter Site for Umbraco.

Now with the introductions over and done with, let’s get down to it!

i n t r o D U C t i o n

Page 4: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 4

installation

To install CWS2 for Umbraco into your Umbraco site, follow these simple steps once you have setup and installed Umbraco.

- Visit http://umbracocws.codeplex.com to download the package file (.zip) of CWS2

- Login to your Umbraco website, which most likely at http://localhost/umbraco

- Once logged go to the Developer section from the bottom left hand corner.

- Once the Developer section has loaded expand the Packages folder and select Install local package

- Browse to the CWS2 package you downloaded to your computer and check the tick-box in regards to the warning and then press Load Package.

More +

i n S t a l l a t i o n

Page 5: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 5

installation

- The next step will tell you about the package, who made it and what the package does. As you can see we have a red warning letting us know that CWS2 package contains a DLL called PackageActionsContrib.dll.

This is nothing to be concerned about and this DLL is used to help us run some custom Package Actions when installing the package. If you have any concerns about the DLL you can look into the source code for the DLL at the Package Actions Contrib project on Codeplex - http://packageactioncontrib.codeplex.com

Tick the Accept license check-box and press Install package.

- As in the previous step mentions do not refresh

the page or navigate away as installing CWS2 into Umbraco can take some time. Once it is done you will see the following confirmation message.

Congratulations you have just installed CWS2 for Umbraco!

i n S t a l l a t i o n

Page 6: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 6

initial Configuration

OK now we have got CWS2 installed we need to configure the email settings for the contact form and email a friend form, to do this we need to open up the web.config which can be found at the root of your Umbraco website.

If we scroll down in the web.config file until we find the mailSettings section as shown below.

<!--This Replaces the old umbracoSmptpServer config--><system.net> <mailSettings> <smtp> <network host=”127.0.0.1” userName=”username” password=”password” /> </smtp> </mailSettings></system.net>

You will need to update the <network> tag with the correct values for your email server.

You may need to contact your ISP/Network admin for these details.

Host This is the SMTP mail server’s address. e.g: mail.yourcompany.co.uk

Username This is the username required to send messages out on the SMTP server.

Password This is the password required to send messages out on the SMTP server.

Port (optional) This is in case you need to supply a specific port number other than the default port number of 25.

Once you have amended the web.config file, save and close the file. If your mail server requires SSL to connect to it, then there is an option inside the CWS2 package to enable SSL for the contact and email a friend form. Now the email settings are setup we can carry on to configure the rest of our site.

i n i t i a l C o n f i G U r a t i o n

Page 7: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 7

Configuration and Use of site

Now we have setup the mail server settings for our forms, we need to learn how to configure and use our site.

Firstly, let’s login into Umbraco by typing http://localhost/umbraco/umbraco.aspx

You may need to replace localhost with your site’s domain if you are not running this locally.

Now that you have logged into Umbraco you will see the content section. On this screen in the left-hand side you will see the pages of your site where you can click on each page and change the content and any relevant settings for that page. On the right-hand side of this screen you will see two tabs called Contact Logs and Email a Friend Logs these are where you are able to view the logs from the visitors using the forms on your site and I will explain this section later on in this document. Next I will go through some common tasks with you.

C o n f i G U r a t i o n a n D U S e o f S i t e

Page 8: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 8

How to create a new photo gallery

Login to the Umbraco admin and by default you will be in the Content section of the administration interface. If you expand the Home node and right click on the Gallery node you will see the context menu. From this context menu select the Create option.

After selecting Create from the context menu you will see the Create dialog box. In the Name box type in the name of the gallery you want to create and press the Create button. You might call it My New Gallery.

More +

C o n f i G U r a t i o n a n D U S e o f S i t e

Page 9: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 9

How to create a new photo gallery

After selecting the Create menu, Umbraco will take you to the new node you just created. Now we need to fill in some properties to use this gallery. In the header textarea you can type in a header you want to display in the custom font header of the Gallery page.

Making any part of the text Bold inside the Header property will make that piece of text pink and the rest will be white.

The header is composed of Your Gallery Name plus the text inside the header property. For example using “This is my header.” inside the header property will give you the following results.

Next, you will need to create a thumbnail to represent the gallery using your favourite image editor to the following dimensions 151px width by 108px in height and then browse to the image on your computer in order for it to be uploaded to the site.

More +

C o n f i G U r a t i o n a n D U S e o f S i t e

Page 10: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 0

How to create a new photo gallery

On the next tab called Settings there are two properties you will need to set to configure how you want the photos to be sorted within the gallery. You can sort the photos by the following items by using the Sort By property:

- Sort Order You can sort the photos by reordering the child photo nodes in Umbraco.

- Create Date You can sort the photos by the date when the photo node is created in Umbraco.

- Update Date You can sort the photos by the date when a photo node is updated in Umbraco.

After you have decided how you want to sort your photos you will need to decide if you want the photos to be sorted Ascending or Descending by setting the Sort Order property.

Additionally you may want to set the page’s Meta Description and Meta Keywords tag which you can fill in optionally.

Once this is all done we need to Save & Publish the node by pressing this button which will make the changes to the website publicly visible.

C o n f i G U r a t i o n a n D U S e o f S i t e

Page 11: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 1

How to add a new Photo to a gallery

C o n f i G U r a t i o n a n D U S e o f S i t e

Now that we have a new gallery it would be good to add some photos to it. Go back to the content section in Umbraco and right click on the new gallery we created and select the Create option.

After selecting Create a new dialog will appear which will allow you to type in the name of the photo you want to add to your gallery in the Name box and press the Create button.

You will notice you can only select Photo from the Choose Document Type dropdown. This is to prevent you from accidentally creating the wrong type of pages within the gallery. For example, adding a contact document type (page) in a gallery would not be logical.

After pressing create we will be taken to the new node we just created in Umbraco, where we can setup the properties for the photo.

More +

Page 12: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 2

How to add a new Photo to a gallery

C o n f i G U r a t i o n a n D U S e o f S i t e

Next we need to fill in the properties of our photo node.

Photo TextEnter a small description of the photo or a credit to the photographer for example.

PhotoBrowse to the photo you wish to be uploaded.

ThumbnailBrowse to the image that you wish to be used as the thumbnail of the photo which is 151px by 108px. This image is used in the gallery page which lists the photos in that gallery.

Once this is all done we need to Save & Publish the node by pressing this button which will make the changes to the website publicly visible.

Page 13: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 3

How to create a new news or event item

C o n f i G U r a t i o n a n D U S e o f S i t e

To create a news or event item we need to login to Umbraco and go to the content section and right click on the News and Events node and select the Create option.

After doing so you will see the create dialog box where you can select either to create an event or news item from the Choose Document Type dropdown. Enter a name for your news item or event into the Name box and press Create.

Once you have created your news or event item you will have the following fields to edit:

Date (only for events)This is where you would enter the date for your event. Clicking the calendar icon will help you select the date.

TextThis is where you write up your news story or event using the richtext editor.

PhotoThis is an optional field if you want to display a photo at the top of the news or event item.

Once you have filled in these fields press the Save and Publish button and you will see the new item has been published on the site.

Page 14: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 4

How to configure the Contact form

C o n f i G U r a t i o n a n D U S e o f S i t e

When you are inside Umbraco, go to the Content section and then click the Contact node.

Click the Settings tab at the top; this is where we can configure the contact form.

OK now I will talk you through the different settings on this tab:

Email ToThis is where the email will be sent when someone fills out the contact form on the website.

Email SubjectThis is where you can set the subject of the email that will be sent to you when someone fills out the contact form.

Email MessageThis is the message of the email that will be sent to you when someone fills out the contact form. For the email to display what the user entered into the form we need to use some placeholders for the system to insert the fields (see following page).

More +

Page 15: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 5

How to configure the Contact form

C o n f i G U r a t i o n a n D U S e o f S i t e

The following placeholders are available:

- [Date] This outputs the date when the form was filled out.

- [Time] This outputs the time when the form was filled out.

- [Name] This outputs the Name field on the form.

- [AddressLine1] This outputs the first Address Line field on the form.

- [AddressLine2] This outputs the second Address Line field on the form.

- [Email] This outputs the Email field on the form.

- [Message] This outputs the Message field on the form.

Email Reply FromThis is the email address that the automated reply email will be sent from to the email address that the user filled in on the contact form.

Email Reply SubjectThis is the subject line you want the automated reply email to have.

Email Reply BodyThis is the contents of the automated reply email you want to send back where you can use this placeholder [Name] to insert their name they typed into the form.

Enable SSLIf your SMTP server requires a SSL connection to send messages then set the value to yes.

Now that you know all the settings for the contact form, this is when you could go off and customise the form to your own needs.

The Thank You tab contains two properties for you to update which are the Thank You Header and Thank You Message. These allow you to customise the text for the thank you message when the user successfully completes the contact form.

Page 16: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 6

How to configure the email a friend form

C o n f i G U r a t i o n a n D U S e o f S i t e

When you are inside Umbraco, go to the Content section and then click the Email a Friend node.

Click the Settings tab at the top; this is where we can configure the email a friend form, which is similar to the Contact form above.

OK, now that you are ready I will talk you through the different settings on this tab:

Email FromThis is the email address that the automated reply email will be sent from to the friends email address that the user filled in.

Email Subject to FriendThis is the email address that the automated reply email will be sent from to the friends email address that the user filled in.

Email Message to FriendThis is the message of the email that will be sent to you when someone fills out the email a friend form. For the email to display what the user entered into the form we need to use some placeholders for the system to insert the fields (see following page).

More +

Page 17: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 7

How to configure the email a friend form

C o n f i G U r a t i o n a n D U S e o f S i t e

The following placeholders are available:

- [FriendName] This outputs the Friends Name field on the form.

- {FriendEmail] This outputs the Friends Email field on the form.

- [YourName] This outputs the Your Name field on the form.

- [YourEmail] This outputs the Your Email field on the form.

- [Message] This outputs the Message field on the form.

- [Date] This outputs the date when the form was filled out.

- [Time] This outputs the time when the form was filled out.

- [URL] This outputs the URL that the user wants to send to their friend.

Enable SSLIf your SMTP server requires a SSL connection to send messages then set the value to yes.

Now you know all the settings for the email a friend form, this is when you could go off and customise the form to your own needs.

The Thank You tab contains two properties for you to update which are the Thank You Header and Thank You Message. These allow you to customise the text for the thank you message when the user successfully completes the email a friend form.

Page 18: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 8

Understanding the Dashboards for the Contact and email a friend form

C o n f i G U r a t i o n a n D U S e o f S i t e

The dashboards for the contact and email a friend form can be found when you login to Umbraco and then click on the content section from the left hand corner.

You will see two tabs on the right hand side of the Umbraco window called Contact Logs and Email a Friend Logs. These two dashboards are to allow you to easily view the XML log file that each form creates, so you have a copy of the emails that are sent.

When you first view either of the dashboards you will see the following warning

This is NOT an error but to inform you that your XML log file does not yet exist. This is because no one has filled out your contact or email a friend form. When someone fills in either form for the first time the XML log file will get created and the warning will go away. The two XML files are stored in your website here:

/data/contact_form_log.xml/data/email_a_friend_form_log.xml

After the first person fills out a form you will see the warning message disappear. It will be replaced with a list of log items. When you click on an item from the list on the left you will see the details for that item, as shown to the right.

Page 19: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 1 9

General fields on all Document types

G e n e r a l f i e l D S o n a l l D o C U m e n t t y P e S

In this section I want to cover the general fields that are on all of the Document Types.

Page 20: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 0

meta tab

On this tab you will find common properties to set the meta Keywords and Description tags for that page.

Meta DescriptionThis property allows you to set the description for that page for the <meta> description tag.

<meta name=”description” content=”Your descriptionthat you enter” />

Meta KeywordsThis property allows you to set the keywords for that page for the <meta> keywords tag.

<meta name=”keywords” content=”the keywords,that you enter,into umbraco” />

Both of these properties are recursive, which means that if you leave either of these fields blank it will look to see if the parent page has these properties and will use their values if present. If the parent page also has empty values it will continue to its parent page until it finds a value to use or gets to the top-most page in the site.

G e n e r a l f i e l D S o n a l l D o C U m e n t t y P e S

Page 21: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 1

Properties tab

On this tab you will find extra properties that you may or may not want to use in your CWS site.

Umbraco URL NameThis property allows you to change the URL of the node without changing the name of the node/page you have created.

For example, in the Gallery we have a gallery called the bookhouse boys with a photo called Catherine Turner and Paul Van Oestren which creates the following URL by default

/gallery/the-bookhouse-boys/catherine-turner-and-paul-van-oestren.aspx

If we were to enter catherine-turner in the Umbraco URL Name box you will change the URL of the page to

/gallery/the-bookhouse-boys/catherine-turner.aspx

Umbraco URL AliasThis property allows you to give the node multiple URLs.

For example if we were to enter warrenbuckley, test/this-is-a-test this would create the following urls to the same page.

/warrenbuckley.aspx/test/this-is-a-test.aspx

Umbraco RedirectThis property allows you to redirect the node to another node within your site.

Hide in NaviThis property is used to allow you to hide nodes you create from the navigation. In CWS2 the node that we hide is the Email a friend as we don’t want this to be part of the main navigation.

The rest of the properties on this tab are the default ones that Umbraco creates for every document type in Umbraco.

G e n e r a l f i e l D S o n a l l D o C U m e n t t y P e S

Page 22: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 2

Customisation

Now that you have set up and configured your CWS2 site you may be thinking, “how do I customise the look and feel of my site?”

The first thing you may want to change is the custom font. The custom font is implemented with a technique called sIFR, there are links in the further reading section to help you get you up to speed with the sIFR technique.

Basically, it is a technique that uses Flash to let you have any font you like on your site, even if the website visitor does not have that font installed.

C U S t o m i S a t i o n

Page 23: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 3

How to change the sifr font colours

C U S t o m i S a t i o n

Log in to the Umbraco backend and click on the settings section in the lower left hand corner.

From the tree expand the Scripts folder and select the JavaScript file called sifr-config.js inside the sIFR subfolder.

Once the file has loaded in the textarea editor scroll down until you find this:

//Replace header <h1> with class of flashHeadersIFR.replace(Amasis_MT_font, { selector: ‘h1.flashHeader’, css: [ ‘.sIFR-root { font-weight:normal; color:#f49ac1; leading:-10; letter-spacing:-2; text-transform:uppercase; }’, ‘a { text-decoration: none }’, ‘a:link { color: #f49ac1 }’, ‘a:hover { color: #FFFFFF }’ ], wmode: ‘transparent’});

More +

Page 24: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 4

How to change the sifr font colours

C U S t o m i S a t i o n

This sIFR rule above is replacing <h1> tags with a class of flashHeader with our custom font. In this JavaScript method we are styling the font the way we want it to appear.

In the .sIFR-root class you can see we are setting the hexadecimal colour, and in the rules for a:link and a:hover we are setting different colours for the different markup inside the <h1> tag. The a:link sets the colour of the text inside the <a> tag and the a:hover rule is for when users rollover (hover) over the link which will change colour to white.

Change the hexadecimal colour values to the new values and press the save button. After saving you will see the confirmation message bubble in the bottom right-hand corner.

Alternatively, if you prefer you can edit the JavaScript file in your favourite editor as the file is available in the following folder of your website./Scripts/sIFR/sifr-config.js

Page 25: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 5

How to change the font used for sifr

C U S t o m i S a t i o n

To begin this tutorial you will either need to learn how to create your own sIFR font, which you can find out about from the sIFR tutorial link in the Further Reading section, or for simplicity I recommend you download a sIFR font file from http://www.sifrvault.com

Once you have found a font you want to use, download it from the site and save the SWF inside the folder

/media/Assets/sIFR

As with the previous how-to tutorial on changing the sIFR colour we need to open the sifr-config.js file from the settings section under Scripts and sIFR folders.

Once the file has loaded in the textarea editor scroll down until you find this:

// Make an object pointing to the location // of the Flash movie on your web server.// Try using the font name as the variable name, // makes it easy to remember which// object you’re using.var Amasis_MT_font = { src: ‘/Media/Assets/sIFR/Amasis_MT.swf’ };

From this we are setting up a variable called Amasis_MT_font and setting the src to be the swf file we want to use. To setup our new font I recommend we create a new variable called the “name_of_font” and set the src to where we saved the SWF file earlier. For example:

var our_new_font = { src: ‘/Media/Assets/sIFR/Our_New.swf’ };

More +

Page 26: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 6

How to change the font used for sifr

C U S t o m i S a t i o n

Further down in the JavaScript file you will find this code.

// Next, activate sIFR:sIFR.activate(Amasis_MT_font);

// If you want, you can use multiple movies, like so://// var futura = { src: ‘/path/to/futura.swf’ };// var garamond = { src ‘/path/to/garamond.swf’ };// var rockwell = { src: ‘/path/to/rockwell.swf’ };// // sIFR.activate(futura, garamond, rockwell);//// Remember, there must be *only one* `sIFR.activate()`!

From this code you can see we are activating the example Amasis_MT_font variable to allow us to use it in our flash text replaces. Also, as you can see from the commented code that comes in sIFR, you can allow multiple fonts to replace our headers:

sIFR.activate(Amasis_MT_font, our_new_font);

Finally if we want to change the logo text header above the navigation we will change the variable in the sIFR.replace line which I have highlighted in bold with our new variable.

//Replace header <h1> with class of flashHeader sIFR.replace(Amasis_MT_font, { selector: ‘h1.flashHeader’, css: [ ‘.sIFR-root { font-weight:normal; color:#f49ac1; leading:-10; letter-spacing:-2; text-transform:uppercase; }’, ‘a { text-decoration: none }’, ‘a:link { color: #f49ac1 }’, ‘a:hover { color: #FFFFFF }’ ],wmode: ‘transparent’});

Which will change the rule to look something like this.

//Replace header <h1> with class of flashHeader sIFR.replace(our_new_font, { selector: ‘h1.flashHeader’, css: [ ‘.sIFR-root { font-weight:normal; color:#f49ac1; leading:-10; letter-spacing:-2; text-transform:uppercase; }’, ‘a { text-decoration: none }’, ‘a:link { color: #f49ac1 }’, ‘a:hover { color: #FFFFFF }’ ],wmode: ‘transparent’});

As before you may be more comfortable editing this JavaScript in your favourite editor by opening the js file from your website at /Scripts/sIFR/sifr-config.js

For further information on the sIFR technique and customisation of sIFR I recommend you read the links in the Further Reading section to help you learn it.

Page 27: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 7

How to change the background colour of the page

C U S t o m i S a t i o n

Once logged into the Umbraco backend click the settings section in the lower left hand corner.

From the tree, expand the Stylesheets folder and select the stylesheet called Styles

Once this is open scroll down until you see the following in the CSS file.

body { background-color:#191919; font-family:Arial, Verdana, Sans-Serif; color:#cccccc; }

From this CSS rule we are interested in changing the hexadecimal colour which I have highlighted in bold above. Change the value to the new colour you want and press the save button.

After saving you will get a speech bubble in the bottom-right corner to confirm it has been saved. Now go to the public site and you will see the new colour change you have made.

Alternatively, if you are more comfortable editing the CSS file in your favourite editor rather than the textarea box inside Umbraco then you can find the CSS files stored in the “css” folder found at the root of your Umbraco site files.

Page 28: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 8

Understanding how it all works

U n D e r S t a n D i n G H o W i t a l l W o r K S

Now that you are using the site and making basic amendments to it I am sure you will want to understand how all the components work together and learn more about how to best use the Umbraco CMS system to build your own websites.

You may purchase my other book for a small fee. In it I will take you step-by-step through all the elements of how the Umbraco site is built.

Currently this second book is in progress.

Page 29: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 2 9

further reading

f U r t H e r r e a D i n G

Now that we have covered the basics, I recommend you look at the following list of sites that provide useful resources.

Creative Website Starter Site The project’s home where you can find future updates, submit issues and discuss the projecthttp://umbracocws.codeplex.com

My Blog Umbraco and XHTML tips & trickshttp://www.creativewebspecialist.co.uk

The Umbraco ForumTHE best place to find answers to most questionshttp://forum.umbraco.org Tim GeyssensMVP (08-09) & Umbraco Core Team Memberhttp://www.nibble.be

Ruben VerborghUmbraco Core Team Memberhttp://ruben.3click.be

sIFR Tutorialhttp://designintellection.com/2008/this-is-how-you-get-sifr-to-work

sIFR Project Homehttp://wiki.novemberborn.net/sifr3

I’m always interested with any site customisations you have done with my package, so please post your site in the discussions section of the Creative Website Starter on Codeplexhttp://umbracocws.codeplex.com/Thread/List.aspx

Page 30: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 3 0

thanks

t H a n K S

Thanks goes to Douglas Robar for XSLT Search, which is included in CWS2, along with Richard Soeteman for coding the URL Rewriting package action, whose DLL is used in CWS2, and Sam Grady doing some fantastic design work. But most of all, a BIG thanks goes to Emma, my other half, who has made me endless cups of tea and supported me.

Page 31: How to use Creative Website Starter Site for Umbraco › Docs › 0000000 › ...HoW to USe Creative WebSite Starter Site for UmbraCo P3 introduction Hello! My name is Warren Buckley,

H o W t o U S e C r e a t i v e W e b S i t e S t a r t e r S i t e f o r U m b r a C o P 3 1

Changelog

C H a n G e l o G

Version Date Comments

2.0.0 4th March 2009 Initial release.

2.0.1 12th March 2009 Prefix alias’s for unique alias’s and ensure it works with Umbraco Runway.

13th March 2009 Moved Assets folder from root to /media for better standards.

27th March 2009 Added NEW Package Actions DLL for new installer action to allow the CWS: Richtext datatype to have the correct CSS associated with it after install.

2.0.2 27th April 2009 Fixes the following bug/issues: #2123 #2124 #2460 #2461