Custom TabView in Ultima

[maulikjn]

Hi there,
I want to make some customization for my tabs (p:tabView & p:tab) to make it more noticeable or presentable to the user community.
By default in Ultima theme, the actual tab is just a white space with selected tab is showing like a underline in pink color. But I want to show something like gray box for all the tabs (how it is in default showcase) with selected tab is shown in different color, so fill different color in that box for the selected tab.

Is this something possible? Basically can I customize tabs in Ultima theme by changing underlying code? If yes then can you please provide some suggestions on how to achieve this?

Thanks,
Maulik

[mert.sincan]

Hi,

Sorry for the delayed response. Please try the following scss;

Code: Select all

/* Add your customizations of theme here */
body {
    .ui-tabs {
        &.ui-tabs-top {
            > .ui-tabs-nav {
                background-color: grey;

                > li {
                    border: 0 none;

                    &.ui-state-active {
                        background-color: $primaryColor;
                    }

                    a {
                        color: #ffffff;
                    }

                    > .ui-icon-close {
                        color: #ffffff;
                    }

                    &.ui-state-hover {
                        background-color: lighten($color: grey, $amount: 20);
                    }
                }
            }
        }
    }
}

You can add it into _theme_styles.scss and then provide new css files using SASS command.

Best Regards,