Can you provide some additional examples about when and where CSS should be added within an app? I searched and read all of the community topics, but unfortunately, I am missing something. For instance, can you give an example of an object that shows how the CSS would be added in each possible location (e.g. in the header, on the page, or on the item itself)? I purchased CSS Scan, but I think a visual would be very helpful. Thanks!
@DeeDee welcome to the community!
We will work on a more comprehensive doc to explain all the different ways of customizing CSS. Just wanted to bring this link to your attention in case you haven’t seen it: https://docs.tadabase.io/categories/solution-guides/section/design-customization
The link above is not quite as comprehensive as I’d like, but we’ll soon add more customization docs.
Without more knowledge of your comfort level with CSS, I’ll try and tell you how I go about customizing CSS.
First, you can add custom CSS in many different ways.
- In Header code in the app settings - this will impact the entire app.
- In a Layout - this will be loaded in the layout and all pages that use that layout.
- In a page - this will only impact the specific page where the CSS exists
- In a Row/Column or Component - within each of these there is generally a CSS tab that custom CSS code can be interested into.
With CSS Scan, you can simply find the element you want to customize, copy the code and paste it into the CSS of the page or layout. Then make any changes you wish to that CSS. Keep in mind whereever you’re pasting the code will depend the scope of where it gets applied.
If you add it into the header section of the app settings, something like this:
<style>
h1 {color: blue; }
</style>
It will apply to your entire app and all your H1 headings will be blue. If you add it to a specific page’s, only that page will be impacted. Keep in mind when adding it directly into a page’s css you should not include the tags, only the CSS code. For example:
h1 {color: blue; }
If you have a specific design you’re looking to implement, let me know and I’ll try and respond with more specific answer, my answer above is from a birds-eye view.
Here’s some screenshots of where you can add custom CSS code:
Header Code
Layouts:
Pages:
Row/Colum/Component:
3 Likes