Building a Custom Theme with CSS | XM Community
Solved

Building a Custom Theme with CSS

  • 26 June 2018
  • 4 replies
  • 428 views

Userlevel 7
Badge +6
Hello Qualtrics friends. I am working on a pet project where I use a 'survey' as a sort of home page / landing page to distribute information and host various forms (in the form of separate surveys). I am using Qualtrics because 1) it is a tool we are trying to promote within our Org. and 2) web development skills are lacking (to say the least) in our Org. and 3) I am knowledgeable enough in Qaultrics that I think I can build out a fairly cohesive experience.

The area I am having the most trouble is using CSS to tweak the theme in order to make the web page feel right. By finding random articles online I have been able to piece together a very rough example of what I am concepting, but I need help with some of the nuts and bolts as my coding skills have (thus far) only gone as far as needed in order to accomplish a goal, and never with any formal training.

I have 2 questions to this community.
1. Does anyone have good resources for understanding the foundation of CSS? I find W3 school is good if I know the exact challenge I am trying to face and Codecademy is good for general education. Just curious of other sources.
2. Would anyone be willing to message back and forth on how to do very specific things within the Qualtrics platform. Some examples would be:
* Adjust padding between questions.
* Adjust the max-width of the question area. (I think Qualtrics calls this .skin .skininner)

Everyone should feel free to check it out (again very rough) Pet Project Landing Page. What you see is my adjustments from the Blank (for styling) theme Qualtrics provides. I will probably keep this project open while I tweak things, so feel free to see the evolution of the pet project.

Also, I know that I can do this all by having Qualtrics build me a custom theme, and to be honest I may end up doing that, but I am really using this project as a way to improve my skills.
icon

Best answer by mattyb513 12 July 2018, 04:59

View original

4 replies

Userlevel 6
Badge +6
As far as places to go - I would take a look at CSS Tricks, Codecademy, and Udemy.

When you are working with a theme, this guide I wrote a while back might be helpful to understand the structure of Qualtrics Surveys: https://medium.com/@mc_bloomfield/javascript-and-qualtrics-getting-started-34f113cbeaaa#6bfe
Userlevel 2
Badge +1
As much as I know. Only Qualtrics support can create/modify themes. Although you can include custom CSS but it does very basic formatting.

I am may be wrong though. Experts may conform.
Userlevel 6
Badge +6
> @Rahul said:
> As much as I know. Only Qualtrics support can create/modify themes. Although you can include custom CSS but it does very basic formatting.
>
> I am may be wrong though. Experts may conform.

It’s true that only Qualtrics can build a theme in the sense of a saveable, reusable, easily-applied theme in the Look and Feel. However, on the backend a theme is simply a big wad of CSS, which can also be applied in the Look and Feel. Typically the best way to go is to start with a theme that you basically like and then add your CSS on top of it to customize.
Userlevel 4
Badge +21
Thanks for sharing these details. I do like the Date Widget.

Leave a Reply