Tabs color, botton.
Question

Hi.

I Already managed to change my tabs color using:

.tabs-header-item.active {

    color: red !important;

}

but the color of the line below did not change.

What is the CSS to change also the botton one?

thank you.

Kind regards.

Solution

.tabs-header-tab.active{

border-bottom: var(--border-size-m) solid var(--color-green);

}

Where is bold, choose your colour.

Dont forget that you must do the same thing when you hover, because if you don't it will stay with the color from the outsystems theme.

.tabs-header-tab.active:hover {

border-bottom: var(--border-size-m) solid var(--color-green);

}

Another thing is, you don't need and you shouldn't use !important all the time you want to give another style...

Have a look at this guided path it will explain everything and all the tricks you should use to conquer your goals :)

https://www.outsystems.com/training/paths/16/becoming-a-front-end-developer-in-outsystems/

For example, using just the chrome(or any other browser) inspect I could see what I needed to put on my theme to have another style.

Have a look at this course.

https://www.outsystems.com/training/courses/199/css-in-outsystems/?LearningPathId=16

https://www.outsystems.com/training/lesson/2510/overriding-styles?LearningPathId=16


Thank you very much !!

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.