How to change default templates, e.g., fruity, with a .css file?

More
7 months 3 days ago #162671 by horsti2010
horsti2010 created the topic: How to change default templates, e.g., fruity, with a .css file?
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!

Please Log in or Create an account to join the conversation.

More
7 months 3 days ago #162680 by jelo
jelo replied the topic: How to change default templates, e.g., fruity, with a .css file?
Perhaps you can get some insights via the manual.
manual.limesurvey.org/New_Template_System_in_LS3.x

Please Log in or Create an account to join the conversation.

More
7 months 3 days ago #162686 by tpartner
tpartner replied the topic: How to change default templates, e.g., fruity, with a .css file?
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.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in or Create an account to join the conversation.

More
7 months 3 days ago - 7 months 3 days ago #162689 by tpartner
tpartner replied the topic: How to change default templates, e.g., fruity, with a .css file?
After extending the theme, did you copy the CSS file to the local theme?




Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last Edit: 7 months 3 days ago by tpartner.
The following user(s) said Thank You: LouisGac

Please Log in or Create an account to join the conversation.

More
7 months 2 days ago #162707 by LouisGac
LouisGac replied the topic: How to change default templates, e.g., fruity, with a .css file?
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. B)

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)

Please Log in or Create an account to join the conversation.

More
7 months 2 days ago #162712 by LouisGac
LouisGac replied the topic: How to change default templates, e.g., fruity, with a .css file?
for further reference I just completed the wiki about it:
manual.limesurvey.org/New_Template_Syste...not_applied.3F.22.29

Please Log in or Create an account to join the conversation.

More
7 months 2 days ago - 7 months 2 days ago #162721 by tpartner
tpartner replied the topic: How to change default templates, e.g., fruity, with a .css file?
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:
.fruity.extends_fruity .progress {
    background-color: red;
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 7 months 2 days ago by tpartner.

Please Log in or Create an account to join the conversation.

More
7 months 2 days ago #162759 by jelo
jelo replied the topic: How to change default templates, e.g., fruity, with a .css file?

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.

Please Log in or Create an account to join the conversation.

More
7 months 1 day ago #162766 by LouisGac
LouisGac replied the topic: How to change default templates, e.g., fruity, with a .css file?
Indeed, saving a page from TemplateEditor refresh all assets.
But yes, I'll add that button.

Please Log in or Create an account to join the conversation.

More
5 months 4 weeks ago - 5 months 4 weeks ago #164500 by jelo
jelo replied the topic: How to change default templates, e.g., fruity, with a .css file?

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

Last Edit: 5 months 4 weeks ago by jelo.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!