Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Edit theme

  • twigpro
  • twigpro's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 1 month ago #195355 by twigpro
Edit theme was created by twigpro
Hi,
I'am writing because I would like to change one of default theme that there are in Limesurvey.
I read this link: ( manual.limesurvey.org/New_Template_System_in_LS3.x ) but I need some clarification because I don't know the programming language so I have difficulties to understand some parts.
I extended the Vanilla Theme and now I would like to change the font, the size of font, the color of font and insert an image.

I attached the photo of what file I see in the editor theme part.

1) What file have I to change in order to change the font or the size/color of font?
2) I used this suggestion ( {{ image('./files/myfile.png', 'alt-text for my file', {"class": "myclass"}) }}) in order to upload my image, I see the image buti t is very big and I want to reduce the size.
Even in this case where have I to get my hands in order to change the size of my image?

Could you give me some specific example ?

Thanks in advance to whom answer me.
Attachments:
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 month ago - 4 years 1 month ago #195357 by Joffm
Replied by Joffm on topic Edit theme
Hi,
in your screenshot you see the file "custom.css".
Here you enter your new classes or overwrite classes.

E.g. to import a new font from Google fonts
Code:
@import url('https://fonts.googleapis.com/css?family=Raleway');

and set this font as general font with font-size 16pt.
Code:
body {
  font-family:  Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}

The same way you set the styles for your image.
Here some lines of the "navbar.twig" where the logo is included.
Code:
{% if( aSurveyInfo.options.brandlogo == "on") %}
            <div class="{{ aSurveyInfo.class.navbarbrand }} logo-container hidden-xs"  {{ aSurveyInfo.attr.navbarbrand }}  >
                {{ image(aSurveyInfo.options.brandlogofile, aSurveyInfo.name, {"class": "logo img-responsive"}) }}
            </div>
        {% else %}

You see the classes "logo" and "img-responsive". Change them to your needs or add a new class.

So you only need some knowledge of css.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 1 month ago by Joffm.
The following user(s) said Thank You: twigpro
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source