Cascading Style Sheets, or CSS, controls the style and layout of websites and apps. In App Maker, you can use CSS to specify widgets' colors, fonts, borders, and more to customize the look of your app.
Add your CSS in the Style tab, in the right-hand menu of the Page editor. For example, to turn a button named Button1 orange, you could select the button in your page, and add following code in the Style tab:
.app-NewPage-Button1 {
background-color: orange;
}
Basic CSS
Fonts
| Effect | CSS/Style | Original | With applied style | Possible values |
|---|---|---|---|---|
| Bold | font-weight: bold; | sample text | sample text | normal, bold |
| Italic | font-style:italic; | sample text | sample text | normal, italic |
| Strikethrough | text-decoration: line-through; | sample text | sample text | underline, line-through, overline |
| Text color | color: red; color: #ff0000; |
sample text | sample text | Color name or an HTML color code |
| Text size | font-size:20px; | sample text | sample text | pixel size or em units |
| Text alignment | text-align: right; | sample text | sample text | left, center, right |
Panels, buttons, etc.
Borders
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
| Add or change borders | border: 1px red solid; | ||
| Remove borders | border: none; |
Rounded borders
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
| Round all corners | border-radius:5px; | ||
| Round corners individually | border-top-right-radius: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 10px; border-bottom-right-radius: 15px; |
sample text |
sample text |
Background color
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
| **Add or change color ** | background-color: lightgreen; | ||
| Remove color | background: none; |
Cursor
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
| Pointer (clickable elements) | cursor: pointer; | sample text | sample text |
| Arrow (non-clickable elements) | cursor: default; | sample link | sample link |
Handle overflowing content
Sometimes your app's content is too large for its container. Whether it's text that's too long for a label widget, or a group of widgets that don't quite fit in a panel, CSS can define how your app responds when content overflows its container.
Hide overflowing content
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
Cut overflowing content |
overflow: hidden; | CSS IS AWESOME |
|
Enable scrolling |
overflow: auto; | CSS IS AWESOME |
CSS IS AWESOME |
Cut content that's too wide |
overflow-x: hidden; | CSS IS AWESOME |
|
Enable scrolling for content that's too long |
overflow-y: auto; | CSS IS AWESOME |
CSS IS AWESOME |
Use ellipses for overflowing text
| Effect | CSS/Style | Original | With applied style |
|---|---|---|---|
| Ellipses | overflow: hidden; text-overflow: ellipsis; |
Internationalization |
Change standard browser effects
Your browser has a standard way of displaying most interactive elements. For example, links you've already visited usually show up underlined and purple. You can redefine these styles using CSS pseudo selectors.
Hovering
Positioning your mouse over an element is called hovering. Buttons and links have built-in hover effects, but you can add hover effects to any app maker widget, including input fields and panels.
| CSS/Style | Original | With applied style |
|---|---|---|
| .blueButton {background-color: blue;} .blueButton:hover {background-color: pink;} |
||
| .testClass {} .testClass:hover {background-color: #FFA500;} |
sample text |
sample text |
Focusing and the !important modifier
Interacting with an element brings it in focus. For example, when you click on an input box, a text cursor appears. Having focus means that all input from keyboard goes straight to the focused element.
Sometimes, your styles conflict with styles defined by browser or App Maker themes. If your CSS fails to render, try adding the !important modifier to your style to ensure it's not overridden by browser or theme styles. Try not to apply the modifier too widely; it might override important built-in styles.
| CSS/Style | Original | With applied style |
|---|---|---|
.inputClass {} .inputClass:focus {border:1px solid red;} |
||
.inputClass1 {} .inputClass1:focus {border:1px solid red !important;} |