Webcenter Sites Look n feel

Webcenter sites All about Look n feel changes

Objective : let us change the look n feel , content and navigation of pre-installed website Avisports into James Medical Hospital Website all this can be done without any coding by just using existing Assets of Webcenter Sites.

login to Webcenter Sites at http://localhost:8080/cs/wem/fatwire/home (admin/welcome1)

Select Avisports from the Website Drop down, we can see all the pages of Avisports site under “Placed Pages” ensure Contributor mode is selected

This is the Original Navigation and Look and Feel of Home Page of Avisports Page

changing home page

Click on View and Preview in New Window

Go Back to Contributor Mode double click on Home Page, you can see form and web buttons at top, select Form Button as shown below

We can change the template from the drop down, but for current use case lets keep the same template “HomeLayout1”

lets change the Banner Image , double click on “Sky Banner Large” , click on Browse Button and Pick up a new banner image as shown

Save and Preview for the New Banner Image.

Changing Images and Text – Editing Assets

Let us scroll further down we can see “Teaser Images” lets double click on them and change

Lets now change the Name , Upload a New Image (by using Browse button) and save changes as shown

Repeat the above steps for all the images under the banner.

changing in the web mode

Once images are changed , in the Web Mode we can double click the current text and change it in a Rich Text Editor as shown below.

Repeat the same process for all the text content , using the Rich Text Editor one can also change to Source and Edit the Source code as well. if needed.

changing navigation

On the left side under the sites we can see “Placed pages” and “Unplaced pages”, if you wish to add or remove pages from Navigation you can simply drag n drop the pages into or out of Placed pages.

Double click on the Placed pages by selecting a page, then select “form mode” and edit the page Name and Title ( remembers its title thats displayed as navigation item )

changing the logo

Note : You can use Chrome browser and “Inspect Element Option” to find the exact path of css and images directory

Logos are defined in all.css this file is placed under /apache-tomcat-6.0.35/webapps/cs/avisports/css directory

Edit the following tag element in the all.css

.logo a {
	height: 34px;
	width: 920px;
	text-indent: -9999px;
	overflow: hidden;
	background: url(../images/jameslogo2.png) no-repeat 0 80%;
	margin-left: -5px;

place the new image in images folder , this is under

/apache-tomcat-6.0.35/webapps/cs/avisports/images directory, Ensure that the logo size matches the original image size.

Save all, Preview the site in New window ,

Note 1 : Once changes are done click on Tick icon to Approve the changes,

Note : Under Contributor mode -> Click on Edit button, there are 2 ways you can edit content, one is click on Form button upload images or edit text, the other is Web mode where you get an option to drag n drop the images on the existing images

Final Healthcare Site


Author Profile

Leave a Reply

Your email address will not be published. Required fields are marked *