Snippets / HTML
HTML
PHP
CSS
Highlight Current Day in Work Hours Widget
I
innuvo
·
171 views
·
Updated 1 year ago
This is intended for someone using a child theme and is happy adjusting code / playing with code.
First off you need to find the work hours template file, it's located in Voxel >> Templates >> Widgets (it's called work-hours.php). Then follow these steps:
1. Copy that file into the same hierarchy of your child theme (Child Theme >> Templates >> Widgets) - you will need to create the folders2. Once the file is in there, open it and then find line 793. That is currently (v 1.5.2) a single
opening tag.4. Change that for the HTML below5. Once that is saved, copy the php code below for the functions.php and put it in there6. Copy the CSS below into your child theme or into the regular wordpress CSS section, but be sure to change the colours to match your branding.
First off you need to find the work hours template file, it's located in Voxel >> Templates >> Widgets (it's called work-hours.php). Then follow these steps:
1. Copy that file into the same hierarchy of your child theme (Child Theme >> Templates >> Widgets) - you will need to create the folders2. Once the file is in there, open it and then find line 793. That is currently (v 1.5.2) a single
opening tag.4. Change that for the HTML below5. Once that is saved, copy the php code below for the functions.php and put it in there6. Copy the CSS below into your child theme or into the regular wordpress CSS section, but be sure to change the colours to match your branding.
This is the code to replace at line 79 (currently) of the work-hours.php file you have copied across to your child theme
<li class="<?= $key === $today ? 'today' : '' ?>">
HTML · 1 lines
Here is the code to go into functions.php
// Add a CSS class for highlighting today's day in the work hours table.
add_filter('body_class', function($classes) {
$classes[] = 'highlight-today';
return $classes;
});
PHP · 5 lines
Finally the CSS needed, be sure to change this to suit your branding
/* Work Hour Amends */
/* background color */
.highlight-today .ts-work-hours-list li.today {
background-color: #2A4635;
}
/* text colour of highlighted day */
.highlight-today .ts-work-hours-list li.today p, .highlight-today .ts-work-hours-list li.today span {
color: #FBF5D5 !important;
}
CSS · 10 lines
Discussion
Ask a question or share how you used this.
Log in
to join the discussion.
No comments yet — be the first.