Border color in primary menu

Hello,

The Solo theme uses CSS variables for most of its styling, making it easy to override them. For example, if you want to change the border color, you can use the Google Inspector to examine the HTML tag. In the screenshot, the color for the primary menu is set in the following CSS rule:

.page-wrapper .has-border .primary-menu-inner .navigation__primary > li {
    border-right: 1px solid var(--r-br) !important;
}

To change this color, you can use an ID selector, which will override a class selector due to its higher specificity. Here is how you can do it:

#page-wrapper .navigation__primary li {
  --r-br: #B1B894;  /* New border color */
}

It is the same for button, link or text.
In the next screenshot I am changing the text color for the button.

#page-wrapper input.button { 
  --r-tx-bt: red; 
}
#sidebar-box-second input.button {
    --r-tx-bt: green; 
}

Following these variables, you can apply it to any region.

  --r-bg: Controls the background color.
  --r-tx: Determines the color of the text.
  --r-h1: Sets the color for h1, h2, and h3 headings.
  --r-lk: Changes the link text color.
  --r-lk-h: Alters the hover color of link text.
  --r-br: Specifies the border color.
  --r-bg-fr: Defines the background color of input forms.
  --r-tx-lk: Adjusts the menu link text color.
  --r-tx-lk-h: Modifies the hover color of menu link text.
  --r-bg-lk: Sets the menu link background color.
  --r-bg-lk-h: Changes the hover background color of menu links.
  --r-tx-bt: Determines the button text color.
  --r-tx-bt-h: Alters the button text color on hover.
  --r-bg-bt: Specifies the button background color.
  --r-bg-bt-h: Sets the button background color on hover.

CSS Variables: Simplifies theme customization by allowing you to modify styles in one place.
Specificity: ID selectors are more specific than class selectors, which makes them powerful for overriding styles.
Important Note: When using !important in your CSS, it is to ensure that these styles have precedence over others that might conflict.

Best wishes,
Alaa

Perfect, thank you very much.

Automatically closed - issue fixed for 2 weeks with no activity.