htmlfossil

How can I change the background color of a cell in a wiki Fossil (fossil-scm)?


Statically set the color so:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td bgcolor="#FF0000">January</td>
    <td bgcolor="#00FF00">$100</td>
  </tr>
</table>

But how can you dynamically change the background color of a cell, for example, when you hover over the text under the table?


Solution

  • Welcome to SO :)

    It's more of a CSS question than a Fossil question.

    To change the background colour of a cell (or any other element) on hover, you can use something like this:

    <style>
     td.hovercolour {
       background-color: #00FF00;
     }
     td.hovercolour:hover {
       background-color: yellow;
     }
    </style>
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td bgcolor="#FF0000">January</td>
        <td class="hovercolour">$100</td>
      </tr>
    </table>
    

    Note that for the CSS to work, the table cell has been given a class rather than the hard-coded colour value. The class is just called 'hovercolor' for illustration, it could be anything as long as it starts with a letter. For any element that has an class, the browser will expect a style declaration of that class. The declaration in this example tells the browser to change style (background-color) on hover using a 'psuedo-selector'. If you need to do anything fancy with mouseovers/etc, CSS selectors/psuedo-selectors will probably get you most of the way there before you need to resort to JavaScript.

    In this example, the stylesheet is inline. If you want to use the same style/CSS on multiple pages of your fossil without a lot of copying and pasting, you'll need to create a new skin by copying the one you're currently using (this will cause less headaches than just editing the current skin), then add your style declarations on the CSS page for the skin and add your CSS classes/IDs to HTML elements in your wiki pages or by editing the templates for the relevant pages (e.g. in the ticket setup pages of the admin panel).

    Editing and drafting your skin using the web interface is easy/entirely painless, but if you prefer a desktop IDE then there are some notes on drafting with files instead of the web interface on Fossil's website ('Suggested Skin Customization Procedure' at the bottom of the 'Theming' page).