Hyper Open Edge Cloud

How To Change CSS Style

How To showing how to change the appearance of ERP5 UI without interfering with core code.
  • Last Update:2016-02-09
  • Version:001
  • Language:en

How to overwrite default styling of ERP5 site without messing with core code. There are sometimes cases when one wants to modify the look of ERP5 site - either to please the client, or to add some dynamic behaviour to the style (e.g. differentiate something by url or user name - very useful for testing). The style sits in erp5.css in erp5_xhtml_style skin; though, for obvious reasons, it is not a good idea to overwrite it or modify it.

Table of Contents

Solution

The solution to create a Python script named "erp5.css", like this:

context.REQUEST.RESPONSE.setHeader('Content-type', 'text/css')
css = getattr(context.portal_skins.erp5_xhtml_style, "erp5.css")(portal_url=context.getPortalObject().absolute_url)
css += getattr(context, "my_style.css")()
if whatever_condition:
  css += getattr(context, "conditional_style.css")()
return css

The script covers the original erp5.css, and retrieves its contents by acquiring it directly from the erp5_xhtml_skin, so that we do not have circular import. Then it can import other sheets, or do any postprocessing imagineable. Sets the appropriate header and returns the final stylesheet. That's all.

Related Articles