Skip to main content

Adding a Logo

It is quite possible you will want a logo or branding within the tutorial. Please remember whilst doing this that if it is to be outputted to Blackboard or any other hosting VLE this will already be branded so you may be repeating efforts unnecessarily. Any scheme or logo content must also adhere to the best practice disseminated by the Vice Chancellors office regarding colours and logo usage.

The first thing you will need to do is open the file directory and find Wimba Create within your Program files. To do this you will need administrative access to the machine you are using.

  1. Go to your schemes folder as directed previously.
  2. Then select your logo's image file and copy it into the buttons folder within your scheme directory.

  1. Name it something memorable if it has a long or untypical name.

  1. From the buttons directory go up a level to your scheme folder.

  1. Open the styles.xml file. This will usually open in a web browser. For example -

Try and open it by right clicking on the file and selecting notepad.

  1. Opening the editor display -

  1. To point towards the appropriate file and to make visible you will need change some text within the editor. Scroll down and find the section pertaining to the Logo. The text will be as such -
 
<!-- Logo -->
<!-- ================================ -->
	<logo>
		<filename>logo.gif</filename>
		<width>180</width>
		<height>29</height>
		<show-on-indexpage>false</show-on-indexpage> {This will be changed}
		<show-on-contentpages>false</show-on-contentpages> {This will be changed}
		<alt>Logo</alt>
		<url>http://www.wimba.com</url>{This will be changed}
	</logo>
 

Depending where you want the logo to appear, i.e. front page only or on all pages, you will need to change the show-on sections from false to true.

You can hyperlink from the logo to a specific webpage and this can be done by changing the web address at the bottom of the text. Change the name of the logo to the exact name and extension of your file and the height and width dimension of the file.

  1. Add something about setting height and width to match actual image dimensions.This scheme looks as follows -
 
<!-- Logo -->
<!-- ================================ -->

	<logo>
		<filename>UoBlogo.gif</filename>
		<width>239</width>
		<height>60</height>
		<show-on-indexpage>true</show-on-indexpage> {Changed}
		<show-on-contentpages>true</show-on-contentpages> {Changed}
		<alt>Logo</alt>
		<url>http://www.bristol.ac.uk</url> {Changed}
	</logo>
 
  1. Now save your notepad file. When the editor is closed you will need to refresh the web page to see changes. The logo will be entered a follows -

Formatting

You will need to use the cg.css file to format how it appears on the page and other formatting.

  1. Open the cg.css file from the scheme directory and find the section pertaining to the logo. This should read -
 
/*Logo*/

#logo {
position: relative;
padding-left: <u>4px; {This will be changed}</u>
padding-right: <u>4px; {This will be changed}</u>
 
  1. To align your logo to the right hand side you will need to change the 4px to 10px and the same is true for the right hand side. Making the text read
 
/*Logo*/

#logo {
position: relative;
padding-left: <u>10px; {changed}</u>
padding-right: <u>10px; {changed}</u>
 
  1. This allows a neatening of logo presentation like so -

  1. You will see now the logo and coloured title bart are now aligned.

Add how to remove grey bar when rollover logo