Hey guys,

I’m new to this forum and have a rather general question regarding Limesurvey and templates. I used older version of Limesurvey including version 1.9x and edited and changed existing templates in the design area or by adding stuff to the .css files (in the template area of Limesurvey or per FTP-upload) – and this was working nicely including javascript and jquery tweaking.

Now I am working with a brand new Limesurvey version 3.xy and really like the bootstrapping features and new responsive templates like fruity or vanilla. However, I don’t know now where I can edit or change the layout except for basic things provided in the general area of Limesurvey. E.g. my question is where I can change the colors of the progress bar and its background? Where can I edit the (max) width of the container that contains the questions? Where can I change the color or font size of the question text? I tried everything including the custom.css file of the template, etc., and even the theme.css or (for fruity) the sea-grass.css that is used per default. This is what I would need for the fruity template (or of course a copy of that core template that I have already created). I tried so many things, but nothing happens and according to my Firefox browser, .css is loaded from a /tmp subfolder (seems to be a session-based things or something like that?).

But literally nothing happens. No effect except for the few settings in the general menu that I can change for fruity from “inherit” to a custom color. But this does not include some things I’d like to change as well, e.g., the progress bar. The design/ template area appears to have no effect at all. I guess I’m missing a simple thing here, so sorry for that potentially stupid question. It would be great to have a .css file that overrides the settings and that I can fill with my custom settings, color, size, padding, etc. Something like custom.css but that actually works.

Thanks for your help in advance!

Perhaps you can get some insights via the manual.
www.limesurvey.org/manual/New_Template_System_in_LS3.x

To get the template files to load directly from your template instead of the assets manager, set debug to 1 in application/config/config.php.

After extending the theme, did you copy the CSS file to the local theme?

Since 2.50, LS use the Yii asset manager:
www.yiiframework.com/wiki/148/understanding-assets/

It moves the CSS files of a theme to a tmp/ sub-directory with a random string (eg: "tmp/1ef64ml/"). So if you make any change to a css file, and tell it to the asset manager, the files are copied to a new sub-directory with a new name so the user browser's cache is updated and they see the new css (else, they would have to clean their browser cache...). Of course, if the Asset Manager doesn't know you changed the file, the old file from the old tmp/directory remain unchanged.

So, when you're editing CSS of a theme you have various possibilities:
1. You can use the the LS Theme Editor: it deals with the asset manager and you don't have to worry about anything
2. You can turn debug mode on: it will turn asset manager off, so the real css/js files of your themes are called (but then, you have to refresh your browser cache at each load)
3. Change (increase or decrease...) the asset version number to refresh all the tmp directories ( github.com/LimeSurvey/LimeSurvey/blob/70...nfig/version.php#L19 )


Using the theme editor to edit the custom CSS is by far the best solution.

It will help you to understand the architecture of the new theme engine.
Also, if your customizing fruity, be careful with CSS specifity: most of the definitions use the selector ".fruity" (one of the class of the body element)

for further reference I just completed the wiki about it:
www.limesurvey.org/manual/New_Template_S...not_applied.3F.22.29

Further to Louis' comment about CSS specificity...the more specific a CSS selector, the more "weight" it has in the style cascade.

1) If you copy template.css to the local template, it will be loaded last, which helps.

2) When extending a theme, a new class is applied to the <body> element. If the new theme is named "extends_fruity", that class will be applied so, to increase CSS selector specificity, you can do something like this:

LouisGac wrote: So, when you're editing CSS of a theme you have various possibilities:

Wouldn't a button to rebuild the local asset cache be helpful?
It's a learned concept for many users from different tools (Browser, CMS, etc).

Searched for a feature request from Tony, but found one from me. Wasn't aware of that.
bugs.limesurvey.org/view.php?id=12210
But Tony mentioned something similar.

Indeed, saving a page from TemplateEditor refresh all assets.
But yes, I'll add that button.

LouisGac wrote: Indeed, saving a page from TemplateEditor refresh all assets.
But yes, I'll add that button.

Is the button already available in LS 3.4.X? I'm asking cause people keep asking about Assetmanager in the forum. And currently I recommend modifying version.php.

Ok, found it:

You can refresh the assets cache: from Global Settings -> General -> Clear asset cache