Where is the Perspective horizontal menu getting its selected left side border color from?

[r123]

When any of the folders or the root are selected there's a color added to the left side, like a breadcrumb. I can't find where this is defined. I can associate a style class and add element states like hover or selected or visited or checked none of them override this when an item has been selected.

Element State

State	Description
active	The component is being activated by the user. For example, clicking on it with a mouse.
checked	The component is checked or toggled to an "on" state. Applies to checkboxes, radio buttons, etc.
default-choice	The component is the default selection in a group of related options.
disabled	The component is disabled and it cannot be selected, clicked on, typed into, or accept focus.
empty	Represents any element that has no children. Children can be either element nodes or text (including whitespace).
enabled	The component is enabled and can be selected, clicked on, typed into, or accept focus.
first-child	Changes the style for the first element among a group of sibling elements.
fullscreen	Automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
focus	The component receives focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.
hover	User hovers mouse over the component.
in-range	Element whose current value is within the range limits specified by the min and max attributes.
invalid	The component has an invalid input or selection based on the input type or validation rules.
last-child	The component is the last element among a group of sibling elements.
link	The component acts as a hyperlink, navigating the user to a different location when activated.
only-child	The component is the only child of its parent
out-of-range	The component's current value is outside the range limits specified by the min and max attributes
read-only	The component is read-only.
read-write	The component is available for read and write.
required	The component must be filled before submitting a form.
valid	The component has a valid input or selection based on the input type or validation rules.
visited	The component links that the user has already visited.

[Transistor]

The first step on this is usually to try and find it using your browser's Developer Tools:

• Launch the page in a browser.
• Hit F12 to open Developer Tools.
• Hit the Inspect button (usually top left corner) and then hover around until the feature you're looking for (the 'selected' border in this case) is highlighted. Click on it.
• The applicable styling will appear in the CSS pane. You can edit the properties there to change its appearance or make it disappear. Take not of what works.
• After that you might want to open the Designer's Advanced Stylesheet and create the modified style class there. You only need to add it the changes. Let everything else default.

Let us know how you get on.

[r123]

I was just driving myself crazy trying to find the correct element state. It seems weird that there's not just like a selected option there to utilize.

There's no way to modify it inside the existing style class, like hover and active element states do?

I had tried to use inspect option but I didn't know about Select Element Tool. This appears to be what it's using if I change the width from 3px, it changes all the ones that have been selected.

I guess it's part of dark.css theme?

.ia_horizontalMenuComponent__item__leftItem--active {
border-left: 3px solid var(--callToAction);
}

[Transistor]

Try this in your Advanced Stylesheet:

div.ia_horizontalMenuComponent__item__leftItem--active
{
    border-left: 8px solid var(--success);
}

This is based on Adding a style to an icon using the Horizontal Menu Component In Perspective - #2 by cmallonee.

---

Try this too:

div.ia_horizontalMenuComponent__item__leftItem--active
{
    border-left: 44px solid var(--success);
    border-top: 22px solid #ffffff00;
    border-bottom: 22px solid #ffffff00;
}