If you want to customize your Cards app using CSS in your Template sheet, this article provides a list of the main snippets of CSS code you might need.
2
Customize your titles
Change the title font style
To change the font size of the titles in your app, copy the following code and paste it in your Template sheet:
.header {
font-family: 'fantasy', cursive;
}
You need to add the Google font source link if you select a font which is not installed on your computer.
Example of a Cards app with header font style 'fantasy', cursive;
Change the font size of titles
To change the font size of the titles in your app, copy the following code and paste it in your Template sheet:
.header {
font-size: 20px;
}
In our example, we changed the font size of the titles to 20px. Our titles are in the column Name on our data sheet called Training module.
In the Template sheet, make sure you apply the CSS rule to the class of HTML element that contains your marker. In our example, the class is named header.
You can also change the name of the class selector, but make sure the class of HTML element that contains your marker has the same name.
Example of a Cards app with 20px title font size
Customize your content
Change the content font style
To change the content font style, copy the following code and paste it in your Template sheet:
.card-content{
font-family: 'modak', cursive;
}
Example of a Cards app with content font style 'modak', cursive;
Change the content font size
To change the content font size, copy the following code and paste it in your Template sheet:
.card {
font-size: 20px;
}
Example of a Cards app with 20px font size
Customize your images
Add images and modify their size
To add an image, copy the following code and paste it in your Template sheet:
<img class="Image" src="https://i.imgur.com/om5M8uU.png"/>
- Google Drive
- OneDrive
- SharePoint
To change the size of your images, copy the following code and paste it in your Template sheet on another column:
.Image {
height: 124px; width: 124px;
}
You can also change the name of the class selector, but make sure the class of HTML element that contains your marker has the same name (green text).
Example of a Cards app with a 124px size image displayed on every card
Add different images
To add different images, copy the following code and paste it in your Template sheet to get all the links from the data sheet:
<img class="Image" src="{{Cards}}"/>
In our example, our list of image links is in the column Cards, on our data sheet called Training module.
In our Template sheet, we added the column <style> to make sure our images are displayed with the right size.
Example of a Cards app with different images