1 Installation 1. Place snipsnap.war into webapps dir. 1. Start Server 1. Check server logs, it will provide initial install key. 1. Point browser to snipsnap url ---- 1 Themes/stylesheet Taken from {link:Snip Snap Theme Tutorial|http://snipsnap.org/space/Theme+Tutorial}~~(see for more info.)~~ 1.1.1 SnipSnap CSS and Page layout To change your theme structure you must change the .../page.css Snip. The basic styles in this file are:\\ {image:snipsnap_layout.png } 1.1.1.1 Example: Changing the page-portlet-1 from right to left - Open your currently used themes __page.css__ Snip. {code:html} #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; } {code} - Now, change the float positions of #page-content and #page-portlet-1. {code:html} #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; } {code} - Possibly clean your cache and reload the page. ---- 1.1.1 Creating A New Theme: The easiest way to create a new theme is to copy one of the existing themes. Do this by viewing the main theme Snip, i.e. __SnipSnap/themes/blue__. 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" Now you can import "MyGreatTheme.snip" into every other SnipSnap. 1.1.1 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 1.1.1 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: {code}#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; } {code}\\ ---- 1 MCS Customisation 1. main.jsp: (to alter heading content) 1. favicon.ico 1. MCS_20x20.gif which is used by modified main.jsp 2006-03-09 11:14:42.0 2003-12-22 04:35:59.0 Wed Mar 08 19:12:04 EST 2006