Layout

 

Layout customizations in OpenACS are a difficult thing as the design is spread across a couple of packages and file locations. The first thing I recommend you to do therefore is to create a custom package for your site to hold all the customizations including the layouts.

Preparations 

Log into your server using "SSH", so you need to be on the shell to access the packages directory. Go to /var/lib/aolserver/service_name/packages/service_name assuming this is where you installed things (which you did if you followed the installation instructions). Create a new package called "templates":

mkdir templates

To store the CSS and images files you need to have a resources directory

mkdir www/resources

Feel free to separate images and CSS code by adding subdirectories, I will assume you are as lazy as I am and are not doing this. Last but not least you need a directory for you custom form and list templates

mkdir resources
mkdir resources/forms
mkdir resources/lists

Templates

Having done this it is time to copy the Templates into their new locations. I am going to advise you to copy *all* templates to the new locations so you will not run into any nasty surprises if you upgrade ACS Core to a newer version and suddenly your design looks different because a template changed.

 

It is better to compare the template afterwards for changes done in OpenACS and adopt your own versions or copy the OpenACS version over your existing one, if you do not care (or did not make any changes).

Okay, enough admonishment, let's get started. I am going to assume a full install of .LRN with theme-zen, if you do not have some of the packages mentioned installed, do not worry, most likely you do not need it anyway. First copy the site templates:

cd templates
cp /var/lib/aolserver/service_name/www/*master* .

This should always work and give you the following files:

  • blank-masterblank-master is the template that drives some of the basic functionality, such as form field input focus, linking in CSS stylesheets for lists and forms, developer-support, translator-mode, etc., that master template authors would otherwise easily mess up, or they wouldn't keep their versions up-to-date. It doesn't show anything inside the browser frame, though (apart from translator mode/developer-support stuff), leaving complete design freedom to the template designer. It should next to never be necessary to change this, except for your custom lists and forms.css files. 
  • site-master: The main site master template which deals with user messages and some other things. Also probably not something your want to change, but definitely the master to include in your custom master templates!
  • default-master: This is the master for you to go wild . Add your logo, change your footer, add navigation and do anything that suits you. This is your master. And being a little bit conservative, make a copy of it, naming it "service_name-master" and go wild then.

Now we go for .LRN and theme-zen:

cp /var/lib/aolserver/service_name/packages/dotlrn/www/dotlrn-master* .
cp /var/lib/aolserver/service_name/packages/theme-zen/lib/lrn-master* 

The above has given you the two masters from .LRN, one for dotlrn itself (which I think is not used anymore, but not sure at the moment) and the theme-zen master called "lrn-master". I would advise not to go wild on them, but focus on changing their respective CSS files. Sadly, that is not always an option as you will see with [[theme-zen-custom|Theme Zen customization]].

Resources (CSS) 

One thing you most definitely want to change is customize are the CSS files that are shipped with OpenACS as this is where the magic happens. Therefore we copy them as well into the www/resources directory: 

cd ../www/resources 
cp /var/lib/aolserver/service_name/packages/acs-subsite/www/resources/*.css .
cp /var/lib/aolserver/service_name/packages/acs-templating/www/resources/forms.css .
cp /var/lib/aolserver/service_name/packages/acs-templating/www/resources/lists.css .
cp /var/lib/aolserver/service_name/packages/dotlrn/www/resources/*.css .

This should get you the following CSS files into your directory: 

  • site-master.css: CSS definitions in use for OpenACS most of the time dealing with core functions. Most likely you do not want to change that
  • default-master.css: This is where calender definitions are done.
  • forms.css: Here you can change the look and feel of your forms
  • lists.css: Here you can modify the look of the lists
  • dotlrn-master.css: The master definition for .LRN

Most likely you want one more CSS file though: service_name.css.

Sadly, just copying the CSS files does not make them available to your system. You still need to do some editing to make your site aware of the new locations for the CSS files. Go into the templates directory and change the following files:

  • blank-master.tcl: Exchange /resources/acs-templating/  in the header links section with "/resources/service_name
  • site-master.tcl: Exchange /resources/acs-subsite/  in the links section with "/resources/service_name"
  • service_name-master.tcl: Exchange /resources/acs-subsite/  in the "Add standard CSS" section with "/resources/service_name". Also add your own stylesheet using this code: 
    template::multirow append link \
        stylesheet \
        "text/css" \
        "/resources/service_name/service_name-master.css" \
        "SERVICE_NAME Styles" \
        en \
        "all"