How to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text?
By doanga2007 on Wednesday, 06 July 2022
Posted in JEvents (Free Access)
Replies 2
Likes 0
Views 745
Votes 0
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.
If you give us the URL where you have this implemented we may be able to help in your specific situation


Thanks you very much for introduce , I share how to coding CSS in jEvents plugin to support change text color of Saturday and Sunday day to red text.

Code credit link.

1. Login to Joomla Administrator and access to components/com_jevents/views/alternative/assets/css/modstyle.css path with Phoca Commander

2. Add CSS code to example.



tr :is(td:first-child, td:last-child) a.mod_events_daylink {

    color: red;

    font-weight: 900;

}


3. Have support change text color of Saturday and Sunday day 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;

}



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>
doanga2007
·
2 years ago
·
0 Likes
·
0 Votes
·
0 Comments
·
If you give us the URL where you have this implemented we may be able to help in your specific situation
geraint
·
2 years ago
·
0 Likes
·
1 Votes
·
0 Comments
·
View Full Post