Practical Examples: How to Use and Define Custom Variables in the Solo Theme

Hello,
It appears that the variables you are attempting to use are not defined. Below is a list of the available custom CSS variables that you can utilize:

  --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.

Example Usage of Defined Variables
To apply these variables within your CSS, refer to the following examples:

/* Applying predefined variables for heading colors */
#page-wrapper #main-container #sidebar-box-main .node__content h2 a {
    --r-h1: blue;
}
#page-wrapper #main-container #sidebar-box-main .node__content h3 a {
    --r-h1: green;
}

Defining and Using New Variables
If the existing variables do not meet your needs, you can define new ones as follows:

/* Defining new custom variables */
#sidebar-box-main {
    --r-h2: blue;  /* New variable for h2 headings */
    --r-h3: green; /* New variable for h3 headings */
}

/* Using newly defined variables */
#sidebar-box-main .node__content h2 a {
    color: var(--r-h2) !important;
}
#sidebar-box-main .node__content h3 a {
    color: var(--r-h3) !important;
}

Best wishes,
Alaa

Thank you so much. I thought --r-h1 only referred to h1 and not also to h2 and h3.

Greetings