Welcome to the LimeSurvey Community Forum

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

Edit theme

twigpro
Topic Author
Offline
New Member

More

5 years 5 days 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: ( www.limesurvey.org/manual/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:

...limesurvey.PNG

The topic has been locked.

Joffm
Away
LimeSurvey Community Team

More

5 years 5 days ago - 5 years 5 days 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: 5 years 5 days ago by Joffm.

The following user(s) said Thank You: twigpro

The topic has been locked.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Edit theme

Lime-years ahead

Legal

About Us

Open Source