Customize the W3.CSS to Enable Its Classes to Work with Solo Variables Directly

Hello,

Currently, the approach to utilize w3 classes involves disabling solo variables. You can integrate this into the sub-theme or through CSS injections. Moving forward, I plan to customize the w3.css to enable its classes to work with Solo variables directly, eliminating the need for this code snippet.

.page-wrapper table,
.page-wrapper table * {
  --r-br: initial;
  --r-bg: initial;
  --r-tx: initial;
}

Best wishes,
Alaa

Thanks Alaa,
Based on your answer I assumed that I could change w3.css classes by style, but they neither apply on <tr></tr>, while style or w3.css do apply on <code><table> or <th>, <td>.

Finally, instead of disabling solo variables, I just applied classes to <td>...

In the Solo theme, each region is customizable with 15 specific CSS variables, as follows:

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

You have the option to override these variables. For instance, if you wish to change the background color on hover for all table rows, you can do so as follows:

table tr:hover {
  --r-bg: #ddffff;
  background-color: var(--r-bg);
}

I have made updates to the w3.css library classes to incorporate Solo's variables. The development version, which includes these changes, is available for download. You can find the updated styles within the css/w3-css directory. In this development version, you can utilize classes like w3-hover-pale-blue and w3-table-all. The w3-hover-pale-blue class adds a pale blue hover effect, while the w3-table-all class applies striping similar to that found in the original w3.css library.

I've introduced three variables to customize table backgrounds within the theme. These can be adjusted through Solo settings at your-site.com/admin/appearance/settings/solo. Navigate to "Global Site" and then use the CSS Injector to tailor these variables as desired:
#page-wrapper { --solo-odd: white; --solo-even: #f1f1f1; --solo-thead: gray; }

OK, understood, and thanks, I did what you suggested on overriding options for tables...
and it works as expected...
thanks again...

<style>
table .trh:hover {
  --r-bg: #f6f5f4;
  background-color: var(--r-bg);
}
table thead {
  --r-tx: #ffffff;
  --r-bg: #2196f3;
  color: var(--r-tx};
  background-color: var(--r-bg);
}
</style>
<table class="w3-table-all w3-hoverable w3-card-4">
    <thead>
        <tr>
            <th class="w3-center">
                Event
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="trh">
            <td>
                disfluencies
            </td>
        </tr>
    </tbody>
</table>

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