A basic introduction to using CSS in Greenstone

A basic introduction to using CSS in Greenstone

From GreenstoneWiki

Contributed by Richard Managh, DL Consulting

The macros in greenstone help to generate the html for each page that greenstone displays. As a simple example, lets say for a certain page greenstone spits out the contents of the following macros, which form an html page. 

_header_ {
<html>
<head>
<title>Sample page</title>
</head>
<body>
}

_content_ {
<p>This is some content</p>
}

_footer_ {
</body>
</html>
}

You need to change the macros to change the way the page looks. But whether you use css or not, is up to you. (You might use <b> </b> tags which are not considered css)

Lets say you wanted to change the color of the text in the content of the page to blue. This is an example of changing the look of the page using css, but with an inline style, that is without using an external stylesheet. You might change the _content_ macro to be as follows 

_content_{
<p style="color: blue;">This is some content</p>
}

Here are a few more examples: Changing the content text color to blue using an internal style sheet: You would change the _header_ macro to something like: 

_header_ {
<html>
<head>
<title>Sample page</title>
<style type="text/css">
</style>
</head>
<body>
}

_content_ {
<p class="bluetext">This is some content</p>
}

You need the if you want to be compatible with older browsers.

Using an external stylesheet: Contents of lets say a file called style.css 

--------Start Contents----------
.bluetext { color: blue; }
--------End Contents-----------

You could have header and content macros like: 

_header_ {
<html>
<head>
<title>Sample page</title>
<link rel="stylesheet" type="text/css" href="_httpprefix_/collect/apples/macros/style.css" />
</head>
<body>
}

_content_ {
<p class="bluetext">This is some content</p>
}

In the above example the collection name is "apples", and the style.css file would be placed in the greenstone-install-dir\\collect\\apples\\macros\\ directory.

If at all possible prefer external stylesheets before internal stylesheets before inline styles. This is because external stylesheets are more powerful, as they can be used to change hundreds of pages, by just modifying the one css file that all of those pages specify as their stylesheet. For more information on stylesheets see http://www.w3schools.com/css/css_howto.as or http://www.w3schools.com/css/default.asp

So, from the above examples, you can see that if you want to use css to change the look of your page, you need to modify the macros to apply css to the final generated html.

Collection specific macros should be placed in a file called extra.dm in the macros directory of the collection. To link to a collection specific style sheet, you would put something like the following into your extra.dm (assuming that the collection is called apples). 

package Style
-----------------------------------------------------
_htmlhead_ [c=apples] {
<html>
<head>
<title>_pagetitle_</title>
<link rel="stylesheet" href="_httpprefix_/collect/apples/macros/style.css">
_globalscripts_
</head>
<body>
}

There are different macro "packages" which control display for different pages in greenstone. Here we are "overriding" the default _htmlhead_ macro in the Style package, when it applies to the apples collection [c=apples]. This would change many of the pages of greenstone (the Style macro package applies to many pages) to have your style.css cascading stylesheet available, you would of course need to override other macros such as _content_ macros to apply your css rules to your content. You might look at the _content_ macros of different default macro files, such as query.dm or document.dm in your greenstone-install-dir\\macros directory. In these files, you can find many macros that you might override in your collection to get the desired display results in your collection.

For more information about working with macros, see Section 2.4 of the Greenstone Developers guide, available here: http://www.greenstone.org/cgi-bin/library?e=p-en-faq-utfZz-8&a=p&p=docs. There is also a link to customising the greenstone interface on this page.