Update Change Skin Documentation

[andersd]

The Change Skin needs more useful tips and a small correction of the existing Tips and Advice section needs to be made. The following should work (probably needs some editing from Eli). Below is the source information that could be used to update the change skin doc.

Tips and Advice

---

Changing just the Header Image

While some folks may want to change the entire look of the site you may only wish to change the header image to match your website. Follow all three steps above. This creates a unique skin for your site. Then change to the skin's image directory::

cd htdocs/skins/myskin/images

In that directory is the "logo_top.png" image. This is the image that is used in the header, it is 670 pixels by 59 pixels. Making a replacement image of similar size (the height is especially important) will change the logo atop the website! If your logo does not match the dimensions of the GeoMoose logo just edit the myskin.css file and change the padding-left and padding-right style properties for the logo to more closely match your images dimensions. If you change the background color of your logo and want the padding to match this color then change the color of the "menubar.png" image to match your logo's background color.

Changing the Background Color of Menus

You can change the background color of both the toolbar and menubar (links menu) by changing the background color property style for each. For example, go to #toolbar and add a background: red; or background rgb(255,0,0) ; to change the background property for the toolbar style to red.

Changing the contents of the Menubar

The Menubar is the first menu under the logo above the toolbar. You can change the links in this menu by editing the mapbook.xml file in the conf directory. Change the links_bar_html parameters to as needed.

Moving the Links from Left to Right

You can also change the layout in the header by also changing styles. For example, you can move the menubar of links to be right justified by a) removing the "display:block ;" property from the #logo and #menubar styles, b) adding a "float: right;" property to #menubar, and c) adding display: block ; and clear: both; properties to the #toolbar style.

[EliL]

#113 added some comments into the css to help too.

Thanks for update, added in trunk, ​http://geomoose.org/trunk/howto/skin.html, with r889. Consider possible incorporation and removal of ​http://geomoose.org/trunk/howto/menubar.html which I added a link to from this.