- Posts: 11
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
How to change default templates, e.g., fruity, with a .css file?
- horsti2010
- Topic Author
- Offline
- New Member
Less
More
6 years 3 months ago #162671
by horsti2010
How to change default templates, e.g., fruity, with a .css file? was created by horsti2010
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!
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!
The topic has been locked.
- jelo
- Offline
- Platinum Member
Less
More
- Posts: 5033
- Thank you received: 1257
6 years 3 months ago #162680
by jelo
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on 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
manual.limesurvey.org/New_Template_System_in_LS3.x
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 3 months ago #162686
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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.
The following user(s) said Thank You: mdhls94
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 3 months ago - 6 years 3 months ago #162689
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic How to change default templates, e.g., fruity, with a .css file?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 6 years 3 months ago by tpartner.
The topic has been locked.
- LouisGac
- Visitor
6 years 3 months ago #162707
by LouisGac
Replied by LouisGac on 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.
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)
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)
The topic has been locked.
- LouisGac
- Visitor
6 years 3 months ago #162712
by LouisGac
Replied by LouisGac on 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
manual.limesurvey.org/New_Template_Syste...not_applied.3F.22.29
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3593
6 years 3 months ago - 6 years 3 months ago #162721
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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:
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:
Code:
.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: 6 years 3 months ago by tpartner.
The topic has been locked.
- jelo
- Offline
- Platinum Member
Less
More
- Posts: 5033
- Thank you received: 1257
6 years 3 months ago #162759
by jelo
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.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic How to change default templates, e.g., fruity, with a .css file?
Wouldn't a button to rebuild the local asset cache be helpful?LouisGac wrote: So, when you're editing CSS of a theme you have various possibilities:
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.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
The topic has been locked.
- LouisGac
- Visitor
6 years 3 months ago #162766
by LouisGac
Replied by LouisGac on 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.
But yes, I'll add that button.
The topic has been locked.
- jelo
- Offline
- Platinum Member
Less
More
- Posts: 5033
- Thank you received: 1257
6 years 2 months ago - 6 years 2 months ago #164500
by jelo
Ok, found it:
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Replied by jelo on topic How to change default templates, e.g., fruity, with a .css file?
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.LouisGac wrote: Indeed, saving a page from TemplateEditor refresh all assets.
But yes, I'll add that button.
Ok, found it:
You can refresh the assets cache: from Global Settings -> General -> Clear asset cache
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users
Last edit: 6 years 2 months ago by jelo.
The topic has been locked.