Recently, there was a question on my blog related to drop-down list styling.
Refer: Original Question
How do we apply different colors to drop-down list values?
In this post, I will walk through a few examples of how we can use CSS to apply different background colors to drop-down list values. As an example, we will be using the 'Branding System Options' classic page which contains two drop-down lists.
Navigation: PeopleTools > Portal > Branding > Branding System Options
Identifying the style classes to target
The first step to overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.
Overriding CSS using Component Branding
Since we are focusing on Classic UI, we can use the Component Branding feature which is available via the Branding Framework configuration to apply a custom Stylesheet object to the Component (PTBRANDINGSYSTEMOP).
Navigation: PeopleTools > Portal > Branding > Component Branding
Zebra Striping
In this approach we will use the nth-child() CSS to alternate between two different background colors as shown below.
Option 1: All Drop-Down lists on the page/component
Option 2: Specific Drop-Down list on the page/component
Notice the
Styling specific rows
In this scenario, we will assume that we already know the rows that we want to style differently. Let's say, we want to display the custom Themes (with "SV_" prefix) differently.
Option 1: If we know the row numbers
Option 2: CSS based on attribute value prefix
Refer: Original Question
How do we apply different colors to drop-down list values?
In this post, I will walk through a few examples of how we can use CSS to apply different background colors to drop-down list values. As an example, we will be using the 'Branding System Options' classic page which contains two drop-down lists.
Navigation: PeopleTools > Portal > Branding > Branding System Options
Identifying the style classes to target
The first step to overriding delivered CSS is to identify the style class(es) to target. We can do this using the browser's developer tools.
Overriding CSS using Component Branding
Since we are focusing on Classic UI, we can use the Component Branding feature which is available via the Branding Framework configuration to apply a custom Stylesheet object to the Component (PTBRANDINGSYSTEMOP).
Navigation: PeopleTools > Portal > Branding > Component Branding
Zebra Striping
In this approach we will use the nth-child() CSS to alternate between two different background colors as shown below.
Option 1: All Drop-Down lists on the page/component
Option 2: Specific Drop-Down list on the page/component
Notice the
#PSBRSYSTOPT_WRK_PTBRANDTHEME in the CSS selector.Styling specific rows
In this scenario, we will assume that we already know the rows that we want to style differently. Let's say, we want to display the custom Themes (with "SV_" prefix) differently.
Option 1: If we know the row numbers
Option 2: CSS based on attribute value prefix
No comments:
Post a Comment