This document provides guidance on customizing a website created with WCM and iParts. It discusses how to create a new website by copying an existing sample site and then customizing various aspects like themes, logos, banners, icons, colors, and content layout. It provides steps for customizing header elements, social media images, the welcome banner, favicon, and copyright statement. It also covers changing theme colors by modifying sprite images and CSS styles.

1. Working with WCM
and iParts

2. Introduction
• Web Designer with iFINITY
• Background – web and graphics design and
CMS implementation
• I take Photoshop designs and customise for
WCM

3. Objectives
1. Create a new website
2. How and where to customise a theme
3. Themes
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

4. The basic framework

5. The finished site

6. Objectives
1. Create a new website
2. How and where to customise a theme
3. Themes
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

7. Getting started
To create a website it is easiest to copy an
existing sample site, such as Member, and
change it to meet your needs

8. Getting started
To create a website it is easiest to copy an
existing sample site, such as Member, and
change it to meet your needs

9. Content Management

10. Sites

11. Create a new website

12. Create a new website

13. Create a new website

14. Objectives
1. Create a new website
2. How and where to customise a theme
3. Themes
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

15. Next steps
Customise
• Look and feel
• Navigation areas
• Content

16. Look and Feel

17. Look and Feel

18. Look and Feel
You can change the look and feel of sites by
selecting different combinations of a master
page and its matching themes

19. Navigation

20. Content

21. Objectives
1. Create a new website
2. How and where to customise a theme
3. Themes
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

22. Cities
MasterPage/Template to use for the site's
layout
• Forest
Theme (colors, fonts, etc.)
• Aspen
• Austin

23. Planets

24. Forest

25. Choosing a theme
The iMIS themes give you a head start on
developing your web site
Decide which theme is closest to the final look
and layout that you want

26. Forest

27. Objectives
1. Create a new website
2. How and where to customise a theme
3. Themes
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

28. Photoshop design
• Slice the design
• Save images as JPG for photos and complex
images
• Save images as PNG for icons, buttons and
background colors
• Optimise images

29. Photoshop design

30. Start by changing theme headers
Highly visible header elements
• Logo
• Social networking links
• Welcome banner
• Favicon
• Copyright statement

31. Logo
• To add your own logo, edit this content
record, remove the contents in the HTML
iPart, and replace with your own logo
• You can change the logo in the CSS.

32. Logo
• To add your own logo, edit this content
record, remove the contents, and replace with
your own logo
• You can change the logo in the CSS.

33. Logo

34. Logo

35. Logo

36. Logo

37. Logo

38. Logo

39. Logo

40. Logo

41. Social networking images
• The social networking icons in the top
(auxiliary) navigation are also defined in a
content record
• To change, edit the content record and change
the links on the icons.

42. Social networking images

43. Social networking images

44. Social networking images

45. Welcome banner
• You change the home page banner by editing
the reference in the CSS.
• And change the background image to your
banner
• Or you can simply swap the existing
background image for the new image

46. Welcome banner

47. Welcome banner

48. Welcome banner

49. Welcome banner

50. Favicon
• The favicon is the little icon that displays next
to the website in your bookmarks
• create an icon sized either 32x32 or 64x64
pixels and name it Favicon.ico
• Then overwrite the original file

51. Favicon

52. Create the favicon

53. Create the favicon

54. Copyright Statement
From NetTemplatesMasterPages, edit your
website’s master page. Scroll to near the bottom
of the page to find the copyright statement, and
update it for your organization.

55. Copyright Statement

56. Copyright Statement

57. Objectives
1. Create a new website
2. Themes
3. Customising a theme
4. Logo, banner and icons
5. Colour and CSS
6. Content – content layout and zone properties

58. Changing theme colours
The next step is to change the colours.
You make these changes both in CSS and in
images
• Sprite colours
• CSS colours

59. Sprite colours
• A sprite is a single image that combines
several frequently used images into one image
or file.
• Few http requests
• Page loads faster

60. Sprite colours

61. Sprite colours

62. Sprite colours

63. Sprite colours

64. Sprite colours

65. Sprite colours

66. Sprite colours

67. Sprite colours

68. Sprite colours

69. CSS colours
• Change presentation properties for border,
background and color
• Adjust positioning
• Navigation look and feel

70. CSS colours
• Change font to Arial
• Change links to colour blue
• Change background to white
Further
• Change navigation style
• Move banner up

71. CSS colours
#MainHtml {
background-color: white;
}

72. CSS colours
#MainHtml {
background-color: white;
}
body {
font-size: 12px;
}

73. CSS colours
#MainHtml {
background-color: white;
}
body {
font-size: 12px;
}
a {
color: navy;
}

74. CSS colours
#MainHtml {
background-color: white;
}
body {
font-size: 12px;
}
a {
color: #217AA4;
}

75. CSS colours
#MainHtml {
background-color: white;
}
body {
font-size: 12px;
}
a {
color: #217AA4;
}
.TitleBarCaption, .PanelTitle {
font-family: "Times New Roman";
color: #217AA4;
}

76. CSS colours

77. CSS colours

78. CSS navigation

79. Objectives
1. Create a new website
2. Themes
3. Customising a theme
4. Logo, banner and icons
5. Color and CSS
6. Content – content layout and zone properties

80. Changing theme home pages
The Member site uses a pair of home pages
• One that appears to guests (unauthenticated
view) and
• Another that appears to those who have
signed in (authenticated view).
• You can change one or both of them, or drop
one entirely (have one home page appear to
all).

81. The Content

82. The Content

83. The Content

84. The Content

85. Remove unwanted content

86. Remove unwanted content

87. Remove unwanted content

88. Remove unwanted content

89. Change the layout

90. Change the layout

91. Change the layout

92. Change the layout

93. Change the layout

94. Add new content

95. Live

96. More complex changes
• Design your own theme
• Hand built pages
• Skins (navigation)
• Special effects - animate / Fade

97. Tools
Code
• Text editor
• Code inspection (Firebug or Chrome)
Graphics / color
• Photoshop Elements (GIMP free)
• Color picker (www.colorzilla.com)
• Favicon (www.favicon.co.uk)

98. Further reading
Docs.imis.com
• http://docs.imis.com/15.2/#!ipartsites.htm
Sources for HTML and CSS
• w3schools.com
Slides
• Slideshare.net