Community Created Themes

Hi Community,

I’m assuming themes are based on a generic set of CSS attributes.

Would it be possible to download a template set, modify it, then upload it as a community submission? For other users to try, etc.

Like a chrome/Firefox community based theme.

It would certainly inspire multiple more ideas, and multiple new looking apps.

1 Like

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

As promised, here are 2 themes you can use and build upon.

3 Likes

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

Great but where do I host the .css file? @tim.young

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

@moe

Whoa, this will make complex customization 1000 times easier. Well done.

1 Like

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”

Can I also import SCSS @tim.young how?
Hosted from my dropbox too…

@tim.young do you have a way to target the icon on Card Component?
image
But without !important? I just need to make the css clean, without any important.