How to round filter tabs

App Development
1

Trying to style the filter tabs to look more like “tabs”, like adding a small radius to the top right/left and perhaps a little white space between them. Is this possible with css? I can’t seem to locate how to reference it.

Screen Shot 2021-02-19 at 1.29.12 PM
Screen Shot 2021-02-19 at 1.29.12 PM810×262 12.7 KB

Thanks!

2

Hi Marc-

This should be possible through CSS. If you follow the instructions in this Tada Doc page to find the specific element you can then add the following into the CSS tab of the page that the filter tabs are on:

CUT AND PASTE YOUR SELECTED ELEMENT HERE
{
border-radius: 0px 0px 0px 0px;
}

Remember that this css starts with the first “0px” as the top left corner then moves clockwise (e.g. top right, bottom right, bottom left)

Alternately you can use the following css code:
CUT AND PASTE YOUR SELECTED ELEMENT HERE
{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

Hope this helps,
Adam

3

Thanks @SafetyUniversity. I’m having trouble finding the specific element for the tabs.

4

My apologies Marc, I forgot to paste the link to the Community page that shows the instructions.

Try this link: https://community.tadabase.io/t/finding-the-specific-element-to-update/181

Adam

5

@mdykstra

Here ya go :grinning:

Tabs with colored Label

.nav-tabs .tab-colored a {
    border-radius: 10px 10px 5px 5px;
}

Tabs without colored Label

.nav-tabs > li > a {
    border-radius: 10px 10px 5px 5px;
}
6

Thank you both for the help!

1 Like
7

Is there a way to override the color of the tabs?

8 
.nav-tabs .tab-badge-wh-2.tab-colored a, .nav-tabs .tab-badge-wh-2.tab-colored.active a  {
    color: #fff;
    background-color: #0c97a4;
    border-color: #ff8300; /* Remove this line if you chose to use the optional line below */
    border: 3px solid #ff8300; /* OPTIONAL - if you want to change border width */
}

To target a specific filter tab, change the number here wh-2

9

Hmm. I added the code to my custom header code, but it does not seem to change anything. I currently have the color of the tabs set to the darker blue in the builder and I’m trying to override that color.

10

You may have to use !important.

This might be helpful as well, I just found out this was on the support docs. For tabs, we just add tab-badge-wh-x.

1 Like
11

Thank you that helps! One more :slight_smile: how do I reference the Add and Refresh buttons globally? I’d like to hide the refresh button and change the color of the Add New button.

12 
.t-refresh-button {
    display: none;
}
.t-new-record-button {
    background-color: red;
}
.t-new-record-button:hover {
    background-color: darkred;
}
1 Like
13

Once again… You Rock! Is there a list somewhere of these? Would be super helpful - and I wouldn’t bother you all the time :grin:

14

Haha, I’m happy to answer these questions anytime!

Are you familiar with the developer tools/inspect element?

If not, check out this post.

This can be accessed in major browsers (chrome/firefox/safari).

We’ve done some work to standardize a lot of the css classes so that they prefix with t-xxxxxx, just t-datatable, t-list.

15

Yes I am, but I usually end up with page-specific stuff and not the global elements.