Fruity CSS variations

Plus d'informations
il y a 1 mois 4 semaines #193899 par reetspetit
Fruity CSS variations a été créé par reetspetit
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)

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 1 mois 4 semaines #193901 par holch
Réponse de holch sur le sujet Fruity CSS variations
I don't think you can/should work on the standard themes. Make a copy of the theme and add your variation there.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 4 semaines #193905 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations
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?

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 4 semaines - il y a 1 mois 4 semaines #193912 par Joffm
Réponse de Joffm sur le sujet Fruity CSS variations
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


Volunteers are not paid.
Not because they are worthless, but because they are priceless
Pièces jointes :
Dernière édition: il y a 1 mois 4 semaines par Joffm.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193917 par tpartner
Réponse de tpartner sur le sujet Fruity CSS variations

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.

<option value="css/variations/my_customversion_of_sea_green.css">My Custom Sea Green</option>
<option value="css/variations/sea_green.css">Sea Green</option>
<option value="css/variations/my_customversion_of_sea_green.css">My Custom Sea Green</option>
<option value="css/variations/apple_blossom.css">Apple Blossom</option>
<option value="css/variations/bay_of_many.css">Bay of Many</option>
<option value="css/variations/black_pearl.css">Black Pearl</option>
<option value="css/variations/free_magenta.css">Free Magenta</option>
<option value="css/variations/purple_tentacle.css">Purple Tentacle</option>
<option value="css/variations/sunset_orange.css">Sunset Orange</option>
<option value="css/variations/skyline_blue.css">Skyline Blue</option>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Les utilisateur(s) suivant ont remercié: DenisChenu

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193935 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations
Fab :-)

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193942 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193944 par tpartner
Réponse de tpartner sur le sujet Fruity CSS variations
It works perfectly for me in version 3.22.0.

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

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193946 par reetspetit

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193957 par holch
Réponse de holch sur le sujet Fruity CSS variations
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.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193959 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations
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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193960 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations
> 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #193962 par holch
Réponse de holch sur le sujet Fruity CSS variations
The templates that ship with Limesurvey should not be touched. This is why they are (or at least were) in a different folder than custom templates.

This is why you are supposed to make a copy of one of these templates via the template editor, when you want to modify things. This isn't rocket science.

Now you are playing with the idea to basically add a new color scheme, which is slightly different than to just change the colors of a template, you are adding a feature to a template, which might involve some more than just changint a CSS file, depending on how this theme was created and the function to change color schemes was implemented.

At the beginning the template system of Wordpress was very simple, but also very limited. Today there are lot of things that you can do in a theme, but at the same time it has become a lot more complex to change a template for someone who doesn't have much experience in coding.

I have the same issue. Before it was simple to change the templates in Limesurvey and I could easily do it with my HTML/CSS/PHP skills. Today, with my skills being rusty and the system becoming more powerful (but also more complicated) it is not easy for me anymore.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #194004 par reetspetit
Réponse de reetspetit sur le sujet Fruity CSS variations

holch écrit: The templates that ship with Limesurvey should not be touched. This is why they are (or at least were) in a different folder than custom templates.


I didn't actually touch them per se.... well, I did at first because silly old me thought it would be easy to duplicate the css colour file and mod the colours. When it became apparent that this was way too difficult for the system to cope with I then reverted it, and just duplicated one of the existing themes on the basis it was a working theme and I could import and mod the way I wanted it. I can see the selectors/colours I needed to modify. It shouldn't be more difficult than a search and replace in a css file of say #123456 to #654321

Clearly not.

This is why you are supposed to make a copy of one of these templates via the template editor, when you want to modify things. This isn't rocket science.


Actually as someone who used LS years ago but not touched it for a long time I can tell you that template modification/override system is an unintuitive convoluted tricky mess, hence why I figured a simple manual replace in a css file would be much quicker and easier.

It is probably fine if you are used to it, and changed with it over time, but it isn't if it is slapped in your face.

So I want to modify Fruity and the green theme?? Nothing obvious about that.

Now you are playing with the idea to basically add a new color scheme, which is slightly different than to just change the colors of a template, you are adding a feature to a template, which might involve some more than just changing a CSS file, depending on how this theme was created and the function to change color schemes was implemented.


So changing a bit of text colour, radio button colour etc is so hard?? Why? JUST colours?? Nothing more. I am not trying to rebuild the whole system here. Someone spent a lot of time building a working template that I do not want to fundamentally modify, just recolour a little because I don't like any of the colours available. It really should be simple and intuitive and fast. It is anything but.

Take 'Copy to local theme and save changes'. Local? Where. This computer, another computer? It is meaningless.

CSS Files - Click theme.css It opens in the editor.

With a big DO NOT TOUCH sign near the top of the file. So a) why can you even open it and b) why can you 'Copy to local theme and save changes' especially when you have 'custom.css' ??

And where are the 'colour' css files eg sea_grass.css that it uses that I actually want to base my own colours on? ALL I want to do is change some really simple stuff - not rewrite the whole theme.

Completely illogical with no decent explanations.

At the beginning the template system of Wordpress was very simple, but also very limited. Today there are lot of things that you can do in a theme, but at the same time it has become a lot more complex to change a template for someone who doesn't have much experience in coding.


Gutenberg [slapshead] What a mess that is. All that glisters is not gold.

I have the same issue. Before it was simple to change the templates in Limesurvey and I could easily do it with my HTML/CSS/PHP skills. Today, with my skills being rusty and the system becoming more powerful (but also more complicated) it is not easy for me anymore.


I am not completely stupid. No, I am not a professional coder, but I run a lot of systems, code a bit in php and perl, and know my way about vaguely well.

It just shouldn't be this awkward and cumbersome and obscure. Sorry. I don't really want to be negative and I appreciate the efforts of the developers, but if you come to LS with no experience of it, it is not easy to do simple things like this. It is not self explanatory.

After much trial and error I have managed to hack about an extended theme. It is a truly painful experience just to change less than a dozen selectors with a different colour.

I also note that there seems to be no way to send test emails and preview links without actually activating the survey. That strikes me as somewhat illogical too. Hey ho.

Thanks.
Les utilisateur(s) suivant ont remercié: mrli999

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 1 mois 3 semaines #194062 par holch
Réponse de holch sur le sujet Fruity CSS variations

I am not completely stupid.


No one said that.

It just shouldn't be this awkward and cumbersome and obscure.


I think it is only so awkward and cumbersome because we do not have experience with the template engine. From what I could see, many of the developers were very much looking forward to the use of Twig. I wasn't too happy about the use of Twig and Bootstrap, because I would have to learn both of them. So my few tries to adapt a template since a couple of years have been very basic and also not very successful. With 4.x I think I really need to get back onto this. Sorry, I can't be much of a help here, besides telling you that you are not the only one suffering.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!