Guide for Softr Tabs Customization

Custom Coding
, ,
21

Thank you again for your kindness, @matthieu_chateau. Soft’s tech team decided to fix the code anyway. Here is the working version, and it is the only custom code on the page:

/* Based on https://community.softr.io/t/guide-for-softr-tabs-customization/11069 */
<style>
#tab-container [role="tablist"] {
    border-bottom: 0px solid #FFFFFF !important;
}

/*#tab-container button:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s;
    border-radius: 15px 1115px 0 0 / 15px 15px 15px 15px;
}
*/
#tab-container [data-testid="tab-button"]:hover:not([title="Prev"]):not([title="Next"]),
#tab-container [data-testid="tab-button"]:active:not([title="Prev"]):not([title="Next"]),
#tab-container [data-testid="tab-button"][data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container [data-testid="tab-button"][data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #fcf7ff !important;
    border: 1px solid #4b0082; !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
    border-bottom: 2px solid #4b0082; !important;
}
</style>
1 Like
22

Perfect! I could have done it but thanks Softr team for saving me time!

23

UPDATE: After discussing with the engineering team, I’ve updated the entire thread with the latest stable selector that prevents interference with other elements inside the tabs.

Jean, for your very specific use case, it should be:

<style>
#tab-container .tab-list {
    border-bottom: 0px solid #FFFFFF !important;
}

#tab-container .tab-list button:not([title="Prev"]):not([title="Next"]) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    font-family: Arial, sans-serif;
    outline: none;
    transition: background-color 0.3s; /*transition: all 0.3s; for a strong change effect*/
    border-radius: 15px 1115px 0 0 / 15px 15px 15px 15px;
}

#tab-container .tab-list button:hover:not([title="Prev"]):not([title="Next"]),
#tab-container .tab-list button:active:not([title="Prev"]):not([title="Next"]),
#tab-container .tab-list button[data-state="active"]:not([title="Prev"]):not([title="Next"]),
#tab-container .tab-list button[data-state="active"]:hover:not([title="Prev"]):not([title="Next"]) {
    background-color: #fcf7ff !important;
    border: 1px solid #4b0082 !important;
    border-radius: 15px 15px 0 0 / 15px 15px 15px 15px;
    border-bottom: 2px solid #4b0082 !important;
}
</style>

[data-testid="tab-button"] is acceptable but mainly intended for internal use by Softr (hence the test in testid). It is supposed to be stable, but there is no guarantee.

#tab-container .tab-list button is stable.

1 Like