Change the style of tagview

Post Reply
occiso
Posts: 5
Joined: 17 Apr 2015, 00:24

18 Jan 2018, 15:25

I change the style of tabview

Code: Select all

body .ui-tabs.ui-tabs-top .ui-tabs-nav li a {
    color: #fff;
    font-weight: bold;
    background-color: #337ab7;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav li {
    background: #337ab7;
}

body .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-state-active a {
    color: #000;
    background: #fff;
}
capture image: https://imgur.com/KdUfMqX



But the Syle is forever blue ¿How can I adapt the color to the chosen theme??

User avatar
aragorn
Posts: 3411
Joined: 29 Jun 2013, 12:38

08 Feb 2018, 16:58

You need to define custom variable or use variables in *theme.scss file for color/background-color. Then, you need to add the above css code with the defined variable in _data.scss.

occiso
Posts: 5
Joined: 17 Apr 2015, 00:24

10 Feb 2018, 12:01

¿Could you introduce this behavior in a new version?

The tabs do not look good with the default style.

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

12 Feb 2018, 08:22

Hi,
I define variables based on your post before to change the style of tabs in _theme.scss file. You can use them to change style according to any theme you want. The variables below;

Code: Select all

$panelHeaderBgColor:#337ab7;
$panelHeaderTextColor:#ffffff;
$panelHeaderActiveTextColor:#000000;
$panelHeaderActiveBgColor:#ffffff;
You will use these in which themes' scss file that you want to change. For example, primefaces-avalon-lime layouts' theme.scss file.

Then I wrote these scss codes in _panels.scss file to make it work;

Code: Select all

body {
	.ui-tabs {
        &.ui-tabs-top {
            .ui-tabs-nav {
                li {
                    background: $panelHeaderBgColor;

                    a {
                        color: $panelHeaderTextColor;
                        font-weight: bold;
                        background-color: $panelHeaderBgColor;
                    }

                    &.ui-state-active {
                        a {
                            color: $panelHeaderActiveTextColor;
                            background: $panelHeaderActiveBgColor;
                        }
                    }
                }
            }
        }
    }
}
Please try it this way.

Best Regards,

occiso
Posts: 5
Joined: 17 Apr 2015, 00:24

17 Feb 2018, 01:44

I will Try
Thanks !!!

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

20 Feb 2018, 07:48

Glad to hear! Let me know

Regards

Post Reply

Return to “Avalon - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest