htmlcssjoomlajoomla3.3

How to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text?


How to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text) ?

Example of real mini-calendar jEvents image link.

Becuase CSS coding to example.

.saturday > a.mod_events_daylink:link {
    color: red;
    font-weight: 900;
}

.saturday > a.mod_events_daylink:visited {
    color: red;
    font-weight: 900;
}

.sunday > a.mod_events_daylink:link {
    color: red;
    font-weight: 900;
}

.sunday > a.mod_events_daylink:visited {
    color: red;
    font-weight: 900;
}

but cannot to change text color of Saturday and Sunday day to red text (change 4-5 , 11-12 , 18-19 and 25-26 to red text).

Full sample code.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
}

.mod_events_td_daywithevents > a.mod_events_daylink:link {
    color: red;
    font-weight: 900;
}

.mod_events_td_daywithevents > a.mod_events_daylink:visited {
    color: red;
    font-weight: 900;
}

.saturday > a.mod_events_daylink:link {
    color: red;
    font-weight: 900;
}

.saturday > a.mod_events_daylink:visited {
    color: red;
    font-weight: 900;
}

.sunday > a.mod_events_daylink:link {
    color: red;
    font-weight: 900;
}

.sunday > a.mod_events_daylink:visited {
    color: red;
    font-weight: 900;
}

</style>
</head>
<body>

<table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
<tbody><tr class="mod_events_dayname">
<td class="mod_events_td_dayname"><span class="sunday">S</span></td>
<td class="mod_events_td_dayname">M</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">W</td>
<td class="mod_events_td_dayname">T</td>
<td class="mod_events_td_dayname">F</td>
<td class="mod_events_td_dayname"><span class="saturday">S</span></td>
</tr>
<tr>
<td class="mod_events_td_dayoutofmonth">29</td>
<td class="mod_events_td_dayoutofmonth">30</td>
<td class="mod_events_td_dayoutofmonth">31</td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
<td class="mod_events_td_daywithevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
<td class="mod_events_td_todaynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
</tr>
<tr>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
<td class="mod_events_td_daynoevents">
<a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
<td class="mod_events_td_dayoutofmonth">1</td>
<td class="mod_events_td_dayoutofmonth">2</td>
</tr>
</tbody></table>

</body>
</html>

Output of sample code image link.

I have coded CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text with imagination link.


Solution

  • Try using :first-child and :last-child

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th, td {
      border: 1px solid black;
    }
    
    .mod_events_td_daywithevents > a.mod_events_daylink:link {
        color: red;
        font-weight: 900;
    }
    
    .mod_events_td_daywithevents > a.mod_events_daylink:visited {
        color: red;
        font-weight: 900;
    }
    
    tr :is(td:first-child, td:last-child) a.mod_events_daylink {
        color: red;
        font-weight: 900;
    }
    
    </style>
    </head>
    <body>
    
    <table style="width:250px;height:;" align="center" class="mod_events_table" cellspacing="0" cellpadding="2">
    <tbody><tr class="mod_events_dayname">
    <td class="mod_events_td_dayname"><span class="sunday">S</span></td>
    <td class="mod_events_td_dayname">M</td>
    <td class="mod_events_td_dayname">T</td>
    <td class="mod_events_td_dayname">W</td>
    <td class="mod_events_td_dayname">T</td>
    <td class="mod_events_td_dayname">F</td>
    <td class="mod_events_td_dayname"><span class="saturday">S</span></td>
    </tr>
    <tr>
    <td class="mod_events_td_dayoutofmonth">29</td>
    <td class="mod_events_td_dayoutofmonth">30</td>
    <td class="mod_events_td_dayoutofmonth">31</td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/01/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">1</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/02/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">2</a></td>
    <td class="mod_events_td_daywithevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/03/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">3</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/04/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">4</a></td>
    </tr>
    <tr>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/05/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">5</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/06/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">6</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/07/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">7</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/08/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">8</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/09/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">9</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/10/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">10</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/11/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">11</a></td>
    </tr>
    <tr>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/12/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">12</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/13/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">13</a></td>
    <td class="mod_events_td_todaynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/14/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">14</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/15/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">15</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/16/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">16</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/17/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">17</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/18/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">18</a></td>
    </tr>
    <tr>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/19/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">19</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/20/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">20</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/21/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">21</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/22/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">22</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/23/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">23</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/24/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">24</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/25/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">25</a></td>
    </tr>
    <tr>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/26/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">26</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/27/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">27</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/28/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">28</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/29/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">29</a></td>
    <td class="mod_events_td_daynoevents">
    <a href="/index.php/component/jevents/day.listevents/2022/06/30/-?Itemid=1" class="mod_events_daylink" title="Go to calendar - current day">30</a></td>
    <td class="mod_events_td_dayoutofmonth">1</td>
    <td class="mod_events_td_dayoutofmonth">2</td>
    </tr>
    </tbody></table>
    
    </body>
    </html>