Webcenter sites All about Look n feel changes |
Objective: let us change the look n feel, content and navigation of the 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 Dropdown, 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 the current use case let’s keep the same template “HomeLayout1”
let’s 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 { display:block; 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 2 : 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 |
ABOUT THE AUTHOR |
Author Profile