Limesurvey

You would think it was easy...

Rather than creating an entire theme I was trying to figure out how to add a simple colour variation to the fruity variations.

So we have:

apple_blossom.css
bay_of_many.css
black_pearl.css
free_magenta.css
purple_tentacle.css
sea_green.css
skyline_blue.css
sunset_orange.cs

I just wanted to add 'my_colours.css'

I can see the links are in the options and if I add an option I can see it in the list but the css never gets selected:

fruity/options/options.twig:220:<option value="css/variations/black_pearl.css">Black Pearl</option>


Any advice on the recommended way of doing this? (am on 3.20.x and just about to upgrade to latest)

I don't think you can/should work on the standard themes. Make a copy of the theme and add your variation there.

OK, thanks,

So I copy off the theme.

But presumably I am still stuck with the exactly same issue when copying one of the css files to 'my_customversion _of_sea_green.css' ?

How does the copied theme pick up this CSS variation?

Hi, sorry, do you talk about an admin theme like "Black Pearl"?
Or about a survey theme like "fruity"?

1. Admin theme: As said here



copy it (the entire folder) to "upload/admintheme", adapt it to your desire and it will be there



2. Survey theme:
Go to the theme editor, extend it, and change it to your desire.

Joffm

I just wanted to add 'my_colours.css'

1) Extend the fruity theme.

2) Copy the contents of /themes/survey/fruity/options/ into /upload/themes/survey/yourThemeName/options/.

3) Place your my_customversion_of_sea_green.css file in /upload/themes/survey/yourThemeName/css/variations/

4) Modify the variations options in /upload/themes/survey/yourThemeName/options/options.twig so they look like this.

Fab

Hmmm - except it isn't quite so simple as....

I updated to the latest stable Version 3.22.4+200212 (upgrading to v4.x broke with a sql issue)

Then:

copy fruity to fruityCompany (have tried with and without extending first)

Edit options
Add your CSS file

Admin, Theme option, Installed survey themes
Theme Options, Install (Note if you click on Theme Editor before it is installed you will get an error, so that's a bug)

Now Theme editor
Theme Options, Select variations, 'MycssVariation'

Set the template in your Survey, General

Go to Survey, Theme options, Select 'MyCssvariation'

Theoretically it should now be using your theme.css

It does. Partly..... I can for instance change the colour of a radio button, but not text-info which reverts to bootstrap-min.css Why??

This comes from bootstrap-mis.css

.text-info {
color:
#31708f; <<<< should be D4A965
}

But it picks this up from my theme.css

body .answer-item label::after {
background-color:
#D4A965;
}

Tried clearing assets. Still the same

If I revert back to the fruity template, it all works again eg the text-info will come from sea_green.css rather than bootstrap-min.css

Not quite sure why this is so unbelievably difficult to just duplicate a template and modify the colours - I don't want to rewrite the whole thing, or rebuild Rome. Just adjust the core text colours!

Something somewhere isn't playing.

Any ideas appreciated. It has me stumped.

It works perfectly for me in version 3.22.0.

Have you looked at the page source to see what CSS files are loaded?

Hmmm:

manual.limesurvey.org/New_Template_Syste...a_theme_from_scratch

Are you creating the copy of fruity via the Template editor or are you copying it physically on the disc?

I would not recommend to create a template from scratch, as you will probably face a lot more difficulties than the current one and a lot more complicated. You really need to know what you are doing if you want to create a template from scratch.

Yes, I did (I coped the above from the browser code inspector).

Both loaded from assets/wherever but I recall they were different directories. I need to check exactly.

<scratches head>

Currently can't edit as we are test mailing (is there a way to do a full test including mailing links? Do you need to run it with dummy accounts and then go back and delete them out - only way I can see.)

I'll try and look again later tomorrow.

> Are you creating the copy of fruity via the Template editor or are you copying it physically on the disc?

That was what I did try when I saw all the messing about with overrides. Should be able to just copy the entire template and then hack about a few bits. It shoudn't be rocket science.

I was not going to create from scratch. I just wanted to recolour some of the text & buttons - noting exactly complicated.

I first figured just copy a css file in the existing template/variations to a new name, edit the colours, and refer to that in the variations - you'd think it was easy.

But that wasn't at all simple, so lets copy the entire template and hack that about. Except when I try copying sea_green.css to mycolours.css the system, doesn't want to recognise all the code in it.

I am no code guru, but I am not exactly stupid either (usually!!!!).

Hey ho.