Please help us help you and fill where relevant:
Your LimeSurvey version: 5.3.31
Own server or LimeSurvey hosting:
Survey theme/template: extends.bootswatch (basic)
==================

Hi!
I am trying to style my survey to my liking, but have trouble with multiple elements in it.

1: Styling of Survey name
    - I want to change the colour and font of the survey name. I tried to add the following to custom.css, but it had no effect:
.h1.survey-name {
    font-family:lufga;
    font-weight:800;
    font-size: 3em;
    color: #94c13d;
}


2: Adding a background image or color to my survey
    - I tried to add a BG color to my survey and it didn't work. An image would also suffice, but it also didn't work. Current code in custom css:
.body {
    background-color: #fff;
}

3: Selected radio buttons are not visible as selected
    - If I select a radio button, the conditions I set up for this answer work correctly (so I know it is selected), but I don't see it is selected (no change of color or anything). How can I change this? 

4: Don't show label for slider question
    - I have a slider question, and Limesurvey expects a label before the slider. However I have a question above the slider, so I want to skip the label. How can I center the slider on my survey page? (see attached image)

5: Left align (and narrow down) answer boxes in text-array question. 
    - I have a text-array question for short answers (numerical), but the out-of-the-box answer text boxes are very wide. when I make them narrower, they center out in the column. How can I align them on the left side (just after question text). 

Hi,
1. I do not see an issue with  
And this font-family? Did you load it?


2.
body is not a css class
Or with image

3.

    - If I select a radio button, the conditions I set up for this answer work correctly (so I know it is selected), but I don't see it is selected (no change of color or anything). How can I change this? 

I do not understand this.
 
Or do you want to preset this answer?
What does it mean "the condition I set up"?

4.
Use the "display" settings.

5.
Why do you use a array(text) question for numerical input?
Why not a multiple numerical input?
And set the "label wrapper" and "field input" widths
 

Joffm

 

Just to elaborate on Joffm's comment: This will only work if the font "lufga" is installed on the device where the survey is taken. If this is not the case, any other standard font will be shown.

If you want to guarantee that a specific font is shown to everyone, then you will either need to use something like Google Fonts or upload the fonts to your server and reference them accordingly via CSS (but make sure you have the license to upload the files to your server).

Here an article that explains the different ways to implement fonts:
www.digitalocean.com/community/tutorials...ustom-fonts-with-css

Do you really start your these css styles with a dot?

Because H1 and body are HTML elements, not CSS classes. CSS classes start with a dot. Elements don't.

Thanks for the answers Joffm!

1. The font is a Google font, the problem was the same as with the body background; not a css class, so I didn't need to put a .
It works now!

2. Also works, thanks!

3. I set up a condition for the next question: If a choose 'Yes', a follow-up question is shown. But the radio button that is selected is still white. However, that was the case before I changed the background color of the survey from white to light blue (previous issue). Now the selected radio button shows as light blue. So a selected radio button uses the background color of the body... I have not figured out how to change this.  

4. Thanks!

5. The problem is that my input fields are not aligned left (just next to the label). 

I was sure the Lufga font was a Google font but it isn't. So I will look for another useful font.

But if I use a different Google font, then it will show correctly even if the respondents of my survey don't have it installed, right?

If you import it correctly, it should be fine.
See here

 

Joffm