Posted by
amccarthy - November 2011
Hi Folks,
sorry if this is a stupid question but I'm a newbie. How can I edit the css in the index.css file? When I hit edit it only opens the file as an xml file

<?xml version='1.0' encoding='UTF-8'?>

If I select view I can see the stylesheet, but how can I actually get at the styles and edit them?

Posted by
Marcus Wellhardh - November 2011

The index.css file is a dynamic page that has an associated xsl template. It is normally screen.xsl that contains the actual css code.

Posted by
amccarthy - November 2011
Hi Marcus,

thanks for your reply. I find that explanation is even more confusing? as I thought it was common.xsl that contains the actual default css code? Is there any documentation outlining how css works within Roxen CMS? (aprt from the vague paragraph in the manual) I have read the web developers manual and it is of no help what so ever. (I have a good grounding in css & xslt btw) I'm sorry but it is terribly vague to a newbie.

I'm finding learning how the xsl templates and css work together in Roxen very difficult and vague to understand.  Has anyone got any practical suggestions on tutorials hopefully relating to creating skins/templates in roxen? 

thanks again for your help Marcus, very much appreciated! :)
Posted by
Erik Dahl - November 2011
cms-common.xsl (or perhaps common.xsl in your case) only imports other templates, so I'd say that the css are located in more than one xslt file.

To locate where the XSL Tranformations starts you could use the source search finder (Shift+f in CE) and search for xslt templates containing the string: match="css-screen"
Check that it searches in roxen-files/ folder also (which is important).

This article explains how you find the wizard:

How to modify things you have to consider:

- Make sure the template is either imported in /cms-common.xsl or /cms-components.xsl. Which is decided if the template is needed in the editor. E.g. the page-layout.xsl that generates the overall layout in the site is imported in cms-common.xsl since that template is not part of the things you edit, function templates used for both rendering part of things in the editor should be imported in the cms-components.xsl template.

Or if you have a lot of templates that you modify (which is very common) you have a directory and another template that import the templates so that each template handles one a set of related functions, such as handling a database table or handle different layout of a component, such as the Text & Picture component.

And remember, changes that you make is yours, and therefore importing a template to work on does not need commit of that file, just use view and you should see your own changes.

If you have never changed anything in Roxen you could try the following and see if this gives you an idea of how you change things:

In cms-common.xsl add a line like this (after the last line of <xsl:import/> statements):

<xsl:import href="/templates/my-page-layout.xsl"/>

In the file /templates/my-page-layout.xsl (if it does not exists, create it) you should have something like this in it:

<?xml version="1.0"?>
 xmlns:xsl="" version="1.0">
  <xsl:template match="/">


You only need to save the files. And then do view on the /index.xml file and you should see you hello and the content that the /index.xml file contains. In the above code you could add the <link/>-tag to include the css file, or your own css file.

I would recommend that you look at the import structure in the templates to see how it works, and the documentation does show that part and is fairly self explanatory.

I would also suggest you look at how the xml structure look like in the xml files then you should have a fairly good view of the template system.

I understand that above is not exactly what you are looking for, but I hope it give you some more clues how to get further.
Posted by
Pontus stlund - November 2011
In screen.xsl (in the CSS directory) you can put common CSS definitions that should be used on devices with a screen, e.g a regular computer.

In common.xsl (in the CSS directory) you can put CSS definitions that's shared between different devices.

Also note that component specific CSS is in each component XSL file (in components/*-comp.xsl).
In components.xsl (in the CSS directory) templates in each component XSL file are called like:

    <xsl:call-template name="header-component-common-css"/>
    <xsl:call-template name="footer-component-common-css"/>

to genererate component specific CSS. So if you want to edit the CSS for the "text and picture component" you do that in "picture-comp.xsl" (which originally is located in /roxen-files/cms-sites/4.5/components).

I've been down your path before and know what a hassle the CSS template structure can be at first glance. But once you get grips of it it's kind of nice to deal with.

So in short:

  common.xsl (Shared CSS)
  components.xsl (Component specific CSS)
  screen.xsl (Screen device CSS)
  handheld.xsl (Hand held device CSS, cellphones and such)
  print.xsl (CSS to apply when printing a page)

Hope this helps!
Posted by
amccarthy - November 2011
Thanks very much for all your advise Eirk & Pontus. Hopefully this will help me to try and get a clearer understanding of the structure. I'm sure the layout structure is very powerful when I eventually get a full understanding of it, but out of the box it can seem pretty confusing.

Thanks for your help very much appreciated! I will do my best to make sense of this! :)
Search this thread: