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

Created on 12 February 2024, 12 days ago
Updated 14 February 2024, 11 days ago

Problem/Motivation

Classes added to table rows tr do not apply, but when added to table cells td they do.

Steps to reproduce

 <table class="w3-table-all">
        <thead>
            <tr class="w3-blue w3-center">
                <th>
                    here, there is no blue background, nor content centered
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="w3-hover-pale-blue">
                <td>
                    here, there is no pale-blue on hover
                </td>
</tr>
<tr>
<td class="w3-blue w3-text-white">
here instead, the background is blue and the text white
</td>
</tr>
</tbody>
</table>

Check the table after the point 5 in this page: https://cat-tobi.upf.edu/labelling_system/description

📌 Task
Status

Fixed

Version

1.0

Component

Miscellaneous

Created by

🇨🇱Chile Andrés Chandía

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Andrés Chandía
  • Assigned to flashwebcenter
  • 🇺🇸United States flashwebcenter Austin TX

    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

  • 🇨🇱Chile Andrés Chandía

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

  • Status changed to Fixed 11 days ago
  • 🇺🇸United States flashwebcenter Austin TX

    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; }

  • 🇨🇱Chile Andrés Chandía

    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>
    
Production build https://api.contrib.social 0.61.6-2-g546bc20