Many low code to no code tools offer the ease of creating apps or websites quickly without needing any knowledge of actually writing code. Not saying no code experience is not helpful, but this space has made app and website building more accessible to a larger group of people. One place many no code/low code sites lack are the ability to customize outside the box.
For example, backgrounds and colors are not exactly interchangeable by clicking a button on the screen. This does not mean it is not possible! This can be done with basic CSS knowledge or just the ability to ‘search’.
CSS
A helpful tool is W3 School. You can go to their CSS tab and learn about the many different options or you can search for different CSS options.
An example to search for would be font types. In the search bar type in “CSS Fonts”. This will provide you with examples of fonts and what they are called. At the bottom of the page it shows you how to use the CSS and gives you a place to try it yourself!
Find your target class
You can use Stackers pre classifications to edit buttons, headers and other page elements. These can be found here.
If the Target you are trying to edit is not on this list you can potentially still make CSS changes by finding the CSS class. Disclaimer: these are subject to change at any time.
To find what you want to change or edit on Stacker you will need to right click on the element and select Inspect on the drop down menu. This will open the Developer tools on the right hand side of your screen.
Next, you will need to find the class (typically in the form of CSS-xxxxxx (this consists of numbers and letters)
Then you can use your desired target in the CSS on Stacker.
Use your CSS in Stacker
This CSS can then be brought into Stacker by going to:
- App settings
- Click Custom CSS to expand the input field (you must be on the Pro plan for this!)
- Type in your Target Class
- Use the CSS
Example:
/* Customize Edit button for all buttons */
.stk-edit-button .stk-button-text {
font-size: 0px;
}
.stk-edit-button .stk-button-text:after {
font-size: 14px;
content: 'Edit All Records';
}
Find other related tips and tricks on using CSS in our Community forum:
https://community.stackerhq.com/search?q=css
Also check out this help article on Getting Started with Custom CSS