Custom Admin Themes

An admin theme controls the look of the LimeSurvey administration pages. LimeSurvey comes with the core admin theme Sea Green. You can create your own admin theme to change colors, add your logo or load your own CSS and JavaScript files.

An admin theme only changes the classic administration pages. The new survey editor does not use admin themes.

If you are a LimeSurvey Cloud customer, you first need to download the archive of the Community edition from the Community edition download page. Unzip the archive to a local temporary directory to find all the files you need.

Creating a new theme

• Copy the folder of a core admin theme from /yourLimeSurveyDirectory/themes/admin/ to /yourLimeSurveyDirectory/upload/admintheme/ and rename it (let's say "yourTheme").
• In /yourLimeSurveyDirectory/upload/admintheme/yourTheme/config.xml, change the name, description and any other items in the <metadata> tag. Keep the <compatibility> tag: a theme that does not list your LimeSurvey version cannot be selected.
• Select the new theme, either under Configuration > Themes > Admin themes or with the Administration theme setting in Global settings > General.
• After any change to the CSS or JavaScript files, clear the cache: in Global settings > General, click Clear now next to Clear frontend cache.

Insert a JavaScript file into a custom theme

• Add your file (let's say "custom.js") to the scripts folder of your theme: /yourLimeSurveyDirectory/upload/admintheme/yourTheme/scripts/. Create the folder if it does not exist. Do not use a folder named "js", files in there will not be found.
• Add the file name, without the folder, to the <js> tag in /yourLimeSurveyDirectory/upload/admintheme/yourTheme/config.xml:

        <js>
            <filename>custom.js</filename>
        </js>

• Additional CSS files work the same way: put them into the css folder of your theme and add them to the <css> tag.
• Clear the cache as described above.

For right-to-left languages such as Arabic or Hebrew, LimeSurvey loads the CSS files listed in the <css> tag inside <rtl> instead. Add your CSS files there as well if your administrators use such a language. JavaScript files from the <js> tag are loaded for all languages.

Changing the logo

To use your own logo, replace logo.svg in the images folder of your theme. LimeSurvey shows this logo on the welcome page of the administration, on the login pages and in password emails. If the file is missing, LimeSurvey uses the logo of the Sea Green theme.