SnipSnap

Installation

1. Place snipsnap.war into webapps dir.
2. Start Server
3. Check server logs, it will provide initial install key.
4. Point browser to snipsnap url

Themes/stylesheet

Snip Snap Theme Tutorial

SnipSnap CSS and Page layout

The basic styles in this file are:

Example: Changing the page-portlet-1 from right to left

• Open your currently used themes page.css Snip.

#page-content {
  float: left;
  margin-top: 10px;
  margin-left: 5px;
  height: auto;
  width: 55%;
  max-width: 55%;
}
#page-portlet-1 {
  background-color: white;
  float: right;
  width: 23%;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-right: 10px;
  overflow: hidden;
}

• Now, change the float positions of #page-content and #page-portlet-1.

#page-content {
  float: right;
  margin-top: 10px;
  margin-left: 5px;
  height: auto;
  width: 55%;
  max-width: 55%;
}
#page-portlet-1 {
   background-color: white;
  float: left;
  width: 23%;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  margin-right: 10px;
  overflow: hidden;
}

• Possibly clean your cache and reload the page.

Creating A New Theme:

Follow these directions to create new theme that other can use:

• Copy the theme Snips to a new name:
• Select [copy] from the available snip actions
• Enter a new name, like SnipSnap/themes/My Great Theme
• Select the additional sub snips to be copied
• Press the Copy Snip(s) button
• Change the theme:
• Enter Setup
• Go into the Theme Selection
• Select My Great Theme
• Press the Save Changes button
• Return to SnipSnap
• Edit the CSS Snips below My Great Theme (changes are seen immediately after saving the Snip)
• Change the icons and images if you want
• If you are happy with your work, make a screenshot and scale it to about 200x200 pixels
• Attach the screenshot as PNG image to SnipSnap/themes/My Great Theme using the name screenshot.png
• Export your theme:
• Enter Setup
• Go into the Theme Selection
• Press the Export Theme button
• Use your browsers "Save as" dialog to store the file as "MyGreatTheme.snip"

Editing Theme CSS:

• Go to the main theme snip, for example /space/SnipSnap/themes/Sky
• Edit the snip and add the following {snip-tree:/space/SnipSnap/themes/Sky}
• Then you will see the tree links to the CSS pages and you can edit them as needed

Using images within CSS:

• After theme is created as above, attach images to main theme snip as usual
• these images will be located at the following path on your drive: /snipsnap-0.5.1a/applications/_<port>__<app_name>/webapp/WEB-INF/files/<SID>/snips/SnipSnap/themes/<theme name>
• the url to use within the CSS code should look like this: ../../space/SnipSnap/themes/<theme name>/<image file name>
• Sample:

#page-portlet-2 {
	float:right;
	display: block;
	top: 207px;
	position: absolute;
	left: 684px;
	height: 464px;
	background-image: url(../../space/SnipSnap/themes/Sky/new_upload.jpg);
	background-repeat: no-repeat;
}

MCS Customisation

1. main.jsp: (to alter heading content)
2. favicon.ico
3. MCS_20x20.gif which is used by modified main.jsp