This is a great idea!!
I’ll start by uploading one of our custom themes and you can modify it accordingly. Ill upload a link for this soon.
Regards!
1 Like
how do I import my own theme on my app instead of using all the default themes in tadabase?
I will use your CSS template as a guide to targeting the elements in the components.
You can add a stylesheet to the of the app by linking to it in Settings -> Customer Head / Footer Code
<link rel="stylesheet" href="your_stylesheet.css">
1 Like
You can make a Data Table in your app and host the file there. Check out this post, I go over it in more detail.
thanks @tim.young
@moe those elements you’ve targeted in the CSS like .t-list .another class name, those were ALL the classes used in the TB components?
Yes, we label all our components with a t-{type}, for example “t-form”
1 Like
Thanks @moe
Follow up, I want to target each field in the FORM COMPONENT, do you have the lists of all the classes to target each field whenever they will be used in a form, I am trying to build a style that will be applied to all field type in the form…
Just a follow up on my inquiry, I am trying to style the whole Form Component and I need to target each “field” in tadabase, I know I have your light.css theme already, but anyone can provide all the field classes for me to target them specifically?
@moe @tim.young
Field types don’t necessarily have their own specific classes. Fields used in a component do have some standardized formatting though. They’re usually listed as #field_block_38 or something like that in forms. Can’t remember exactly.
Using the themes posted here that you mentioned + inspecting the element you’re trying to style are your best best for creating a custom theme.
Tim is right, there aren’t necessarily unique classes for each field.
Within one week we’re releasing the Javascript API as well as making our CSS Classes more standardized. You will be able to access each field element in a form via t-form-{type}.
For example:
- t-form-currency
- t-form-datetime
etc…
We’ll add detailed documentation on how to achieve this and also work with the Javascript parts. The JS will be able to listen for almost any event within the app.
For example:
2 Likes
Thank you, it will be a lot faster to work on the forms and making sure that every part of the element will be targeted and add style to match the rest of the theme.
Is there a way to target dropdown menu of connection field in form without affecting other forms? I try to add CSS class inside the form I only want to edit and also tried on the connection field itself, it still doesn’t work…
What are you looking to do? Modify the drop down itself?
Yes @tim.young, as part of the overall theme design
I actually have the same issue with signature as I can’t change the colour of the “ink”
@tim.young do you have a way to target the icon on Card Component?
But without !important? I just need to make the css clean, without any important.
You’d have to modify the vendor stylesheet and load that stylesheet in the custom header/footer section