Skip to content

Styling the web app

Jump to bottom Edit New page
vjrj edited this page Feb 1, 2024 · 25 revisions

Styling these apps

All the applications retrieve a banner.html, head.html and footer.html that they use to format the pages.

Basic styling

If you have installed the ala-demo, then these files should be located in the following directory:

/srv/living-atlas.org/www/ on this machine.

These applications are use a banner, footer and head html block that you can customise.

  • banner.html - the top section added to all pages. Typically a navigation menu
  • footer.html - the bottom section added to all pages. Typically a navigation menu
  • head.html - a block of html that is added to the
    • section added to all pages. This could include references to custom CSS.

Examples

GBIF Spain

NBN UK

NBN Wales

Advanced styling

The base-branding is a good start in order to have an advanced branding to start with. It uses the ALA common-ui component as dependency so you don't have compatibility issues when the branding is used with the ALA grails apps.

Using a Wordpress (or other CMS) as front page of your portal

If you are installing a test LA portal or a demo LA portal, in general is not necessary to install a front page. You can use the la-toolkit generated base-branding to just deploy the branding in:

  • the same base-brading in the / of your domain
  • and additionally in some typically /2024-branding. This will be configured to each ALA module as base-branding as, for instance:
headerAndFooter.baseURL=https://l-a.site/2024-branding

And if you want to install a different thing (like a Wordpress) in the root of your domain or subdomain, you can deploy later a WPress in the root of your domain with a similar style and /2024-branding directory will still working for the modules (in this case, you'll deploy your branding only to that directory).

How to develop a branding

  • For this you maintain a /2024-branding for production (or similar) without affecting your current portal
  • You develop in local your new branding and when start to be ready, you can
  • deploy it in /2024-dev-branding or similar. In a testing portal you can test this branding with a configuration like:
headerAndFooter.baseURL=https://l-a.site/2024-dev-branding

and see how looks like. Or just have a vhost for the testing branding (in Spain we use https://demo.gbif.es for that).

Clearing the header/footer cache during development

The header and footer is cached so during development you can call this http://collectory.your-l-a.site/headerFooter/clearCache do delete some service header/footer cache. More details.

LA Base styling

End

Index

Clone this wiki locally