Getting started with CSS in Stacker

What is CSS?

CSS (Cascading Style Sheets) is a language used in software to define how a website or app should look. In Stacker, you can use it to change how specific parts of your app look. For instance, you could change the background color of your app, the shape of your buttons, or the amount of drop shadow under a record.

This tutorial is for people who are new to using CSS. By the end of the tutorial you will have a good idea of how to get started using it in Stacker.

Using CSS in Stacker

Let’s start by understanding how CSS works within Stacker. To change how something in your app looks, you need to know its class. The class is the text used to describe the thing you want to change in your app. For instance, if you wanted to change how your Save button looks, you’d use the class .stk-save-button or if you wanted to change the text in your app, you’d use .stk-text.

You then need to tell Stacker what attribute of that class you want to change, and this is put within curly brackets. Let’s try out a couple of examples.

To input CSS, click App settings → Appearance → Custom CSS.

To change the background color of your app, you can target the .stk-content class. Here’s an example:

.stk-content {
  background-color:#f6f6f1;
}

This gives our background this off-white color:

Untitled__23_.png

We’ve used the background-color property combined with a hex code to choose a color. You can use a tool like Adobe Color to create hex codes.

Or, we could change the background color and height of the Add New button using the .stk-add-new-button class:

.stk-add-new-button {
  background-color:#7FA4B3;
  height:40px;
}

This makes our button a bit taller and changes its color:

Untitled__24_.png

You can also use some color names like CornflowerBlue rather than hex codes - there’s a full list here: HTML Color Names.

Now, let’s say we want to change how the a table on a list view looks. We could change the background color of both the list and the header, as well as giving it a more visible border.

.stk-table {
  background-color:#E8F8FF;
  border:solid;
  border-color:#7FA4B3;
}
.stk-table-header {
background-color:#CFF1FF;
}

Which gives us the below:

Untitled__25_.png

We could also make it so when you hover over a row it’s highlighted using the :hover selector:

.stk-table-row:hover {
  background-color:#7FA4B3;
}

Untitled.gif

You can also use :hover for buttons to change how they look when a user hovers over them.

Accessibility

Something consider when changing the colors in your app: You always want to think about accessibility. Ask yourself: Is the text still readable?

These changes we’re making are currently affecting all tables in our app. It might be that you only want to change how a list view looks on a particular page. To do that, use this handy snippet of CSS:

.stk-page-PAGE_NAME .stk-table {
  background-color:#E8F8FF;
  border:solid;
  border-color:#7FA4B3;
}
.stk-table-header {
background-color:#CFF1FF;
}

Where PAGE_NAME is the name of your page (you can get this from the page URL).

Now you’re familiar with the basics, you can start using the CSS classes listed in our Custom CSS article to customise your app. And check out w3schools to understand more about what you can change about each class. There are loads of options that let you change the shape, color, size, font, etc.

Dynamic CSS classes in Stacker

One important thing - if you’re familiar with developer tools, you’ll find you can reveal CSS classes in your app that look like css-o342e34 - these CSS classes are generated by Stacker, and are subject to change without notice. So while your app might look ok at the time of you inputting the CSS, there’s no guarantee it will remain that way in the future.