Extend the core theme.

www.limesurvey.org/manual/New_Template_System_in_LS3.x/en

Following up on this thread with information for noobs.  Details:

1) Tpartner - thanks for the response. 

2) I have a lot of non-nice things to say about NOT being able to just copy/paste an existing them, rename a few things in a file and go but I won't.  Not being able to just copy / paste an original theme, rename a few things in a text file and load it up and go is disappointing.  I just want to put the frustration out front so that I don't paint a rosy picture by accident.

.... however ...

3) Overall, the templating and theming system is extremely powerful and implemented at all of the levels of resolution necessary.  Being able to theme globally, group, per survey use variations is powerful.  I am okay with the complexity because I can see why it was done, it is future proofing the project and perhaps styling frustrations can be reduced a lot by extending some of the customization options + extending documentation in ways that make it at least easy to create variations of a theme which is what most people really want to be able to do.

In addition, as I was hacking around the variations css I was NOT able to break the templating system that on most systems can make the admin section / interface inaccessible without either ftp access or sometimes even having to dig into the database to turn off some parameter or two.  If the templating system is difficult for novices to use it is worth it simply because of this robust level of integration.

Whoever implemented the templating on LS did an amazing job, that was obviously a huge amount of work and everyone did a great job.

4) WORKFLOW  - I decided to EXTEND the Fruity theme and the process of that is just go to THEMES and select EXTEND on the theme.  I named my new theme appropriately and then I LEFT THE THEME ALONE.  I tried editing the theme using the Theme Editor but that was an absolutely useless process. 

The minimum changes I wanted to do would need to go into the custom.css file and it just wan't obvious on any level how to quickly select a css class, change the properties and go.  In addition, all of the suggestions to use Bootsrap customizers to generate css are useless, you cannot just generate a Bootstrap theme, drop the css into the custom.css file and go.

So created an extended theme and left it alone.  It's not worth the effort without doing coursework on the latest Bootstrap classes, on Twig and how to integrate everything nicely. 

5) THE SIMPLE SOLUTION - Apply my new theme and just create a VARIATION.

This was the chosen approach because I mostly just wanted to change colours.  The process is simple:

a) Copy one of the variation themes from /original-theme/css/variations/
b) Drop the source theme file into /your-new-extended-theme/css/variations/

Edit the new file and go.

6) IT'S NOT THAT SIMPLE - MY WORKFLOW

For any newbs reading / looking for information on how to quickly create a theme VARIATION, here is why I did:

a) Extend the Fruity theme - CONFIGURATION / ADVANCED / THEMES --> select EXTEND

b) Apply my new theme to an existing survey so that you can have a meaningful visual reference.  In the survey go to THEME OPTIONS and select CUSTOMIZE and then select a VARIATIONS theme in the SIMPLE OPTIONS tab.

c) FTP - Ftp into my server, download the Fruity theme as well as MY-NEW-EXTENDED-THEME. 

The official themes are located in your /install-directory/themes/surveys/ directory.
Your EXTENDED theme is located in your /installation-directory/upload/themes/survey directory.

d) On my machine, copy one of the variations from /fruity/css/variations/ to /my-new-extended-theme/css/variations

e) Rename the css I copied into my /variations folder to something meaningful.  It doesn't matter what you call it, just note the name because you will need to tell LS what the new VARIATIONS theme is called.

f) Add the name of my new VARIATION css to the /my-new-extended-theme/config.xml file in the options section at the bottom.  Here is what mine looks like:

<cssframework type="dropdown" category="Simple options" width="12" title="Variations" parent="cssframework">
            <dropdownoptions>
                <option value="css/variations/my-new-variation-theme.css">My New Variation Theme</option>
                <option value="css/variations/sea_green.css">Sea Green</option>
                <option value="css/variations/apple_blossom.css">Apple Blossom</option>
              </dropdownoptions>
        </cssframework>

g) Go back to the survey and in the THEME OPTIONS / SIMPLE OPTIONS tab you should now be able to select your new variation theme.

h) You can now start to edit the css and upload the updated css to your server so that you can see the changes.  Please note that these variation css files are WAY more complex than I expected them to be.  First, they need to be formatted to be human readable so you will need to do a search and replace on the } character with a }+carriage return in your editor so you have something you can work with.  Next finding the actual selectors is going to be a bit of a nightmare but it can be done. 

At minimum, it will be possible to change most of the base colours that cannot be changed in the THEME OPTIONS section of the survey or the theme.

f) APPLY THE FOLLOWING WORKFLOW: In order to retain your sanity editing the variations css, I had to apply the following workflow:

* Edit my variations file.
* Upload it to the server.
* In one browser tab have CONFIGURATION / GLOBAL OPEN and select: CLEAR NOW (Clear assets cache)
* In another browser tab have the survey admin section open and select PREVIEW SURVEY to see the changes.  NOTE:  You mostly cannot reload an open survey and see all of your changes because the system caches assets.  Making sure you select CLEAR NOW above helps keep your sanity in check.
* REPEAT

Once you get in the iteration groove it is okay and you can make quite a good amount of changes without knowing too much Bootstrap. 

5) SUMMARY: If you are just starting out and want to quickly create a theme for your survey with some minimal colour changes, I think this is probably the quickest workflow before it becomes necessary to learn Bootstrap, some of the advanced css features such as @mediaqueries as they are used here and the Twig templating framework.

Overall, I did hack around quite a bit and I could not get anything to break.  This speaks volumes for the quality of the engineering of LS and I really cannot actually complain.  I will try to help with some of the manuals and other documentation to help reduce the barrier to entry to future users that wan to jump into customization.

Thanks for your help Tpartner.




 

linuxhooligan wrote:

USECASE: I don't want to extend a theme, I really don't like dependencies between themes.  I want a theme to be completely isolated from other themes so I can make mistakes without the issue of tracking down what is propagating and what isn't.


 

Even after years : i didn't set skelvanilla as a stand alone theme … then i don't think it's a good solution currently. It can in future when we move some part form vanilla theme to core view (like Questions), but … need reporting issue and limesurvey GMBH interested by the project.

The only way to do this are

1. Get a copy of this directory : github.com/LimeSurvey/LimeSurvey/tree/ma...hemes/survey/vanilla
2. Update each twig file and set it as empty content
3. Update config.xml and remove the added js + css + the options + packages

About  template_editor part:and needed twig file : you need to check for each files if it was included by core (in application directory) or only by vanilla.

For example
- layout_global.twig : came from core
- footer/footer.twig : from vanilla theme
- survey/group.twig : i think it's core
- /subviews/survey/group_subviews/* : i think it's by theme

etc …

Maybe best is to create a copy of Vanilla and just rename it to myVanilla for directory and config.xml …

Thank you for the information. I will review in future iterations and educate my self.

As I make my way through the learning process I will try to help with the manuals and other documentation to help others through the process.

I appreciate the feedback.