TABLE OF CONTENTS



Custom CSS opens up a lot of ways to fine-tune how your Screen looks, but knowing what to write is often the hardest part. This article collects some of our most popular Custom CSS snippets in one place, ready to copy, paste, and tweak to fit your needs. 


If you haven't added Custom CSS before, or want a refresher on where to paste these snippets and how block targeting works, please check out our article Applying Custom Styles to Screens.



Before You Begin:


A few reminders before you start copying snippets:

  • Always save your changes, then click the Refresh Displays button to see them take effect.
  • If you have more than one of a block type (for example, two Calendar blocks) and only want to change one of them, give that block a Block Title in the Editor first. See Applying Custom Styles to Screens to learn how block naming works.
  • Some snippets below target specific Block types. If a snippet doesn't seem to do anything, double-check that it matches the type of block you're using.



Available Styles:


Below are some premade style enhancements for you to try. 


Preserve Line Breaks in Event Descriptions:


If you type your Event Descriptions with line breaks, DAKboard may display them as one long, run-together line of text. This snippet tells your Screen to respect those line breaks so your description displays the way you originally typed it. 



.block-calendar .calendar-schedule .day-now > div:nth-child(5) 
{
       white-space: pre-line;
       font-style: italic;
}

.block-calendar .calendar-schedule .day-container UL > LI > .event-description 
{
       white-space: pre-line;
       font-style: italic;
}

.block-calendar .calendar-agenda .agenda-event-description 
{
        margin-top: 0;
        white-space: pre-line;
}



NOTE: The 5 in div:nth-child(5) refers to the position of the description field among the other elements DAKboard displays for that day. This number can shift depending on which options you've enabled in your Calendar block's settings. If this snippet doesn't seem to target your description text, try adjusting that number up or down until it does. 



Hide Disabled Events and Days in Big Monthly Calendar:


If certain events or days have been marked as disabled in your Big Monthly calendar, this snippet hides them from view entirely instead of showing them grayed out. 


.calendar-monthly-big .event-day.disabled, .calendar-monthly-big .event-items.disabled 
{
      display: none;
}



Shorten Long Event Titles in Monthly Calendar:


Long event titles can crowd a Monthly calendar and push other events out of view. This snippet truncates event titles that are too long to fit, adding "…" at the end. This applies to every event on the calendar, not just long ones. Shorter titles won't be affected. To show more or less of each title, adjust the width: 5.25em value up or down. 


.calendar-monthly .summary-text 
{
      display: inline-block;
      width: 5.25em;
      overflow: hidden;
      text-overflow: ellipsis;
      text-wrap: nowrap;
      vertical-align: text-bottom;
      text-align: left;
      padding-left: 0.1em;
}



Fix Video Playback on Predefined Screens:


On the Mobile/Tablet Layout of a Predefined Screen, video content can sometimes appear cropped or fail to fill its block properly. This snippet corrects the video's sizing so it displays as expected. 


.video-foreground 
{
      top: 0;
      left: 0 !important;
      width: 100% !important;
      height: 100%;
}


NOTE: Custom CSS only works on your Predefined Screen if you have a Paid Subscription. 


Remove the Background on Countdown Timers:


By default, each number in a Countdown Timer block sits on its own shaded background. This snippet removes that background for a cleaner, more minimal look.


.countdown-timers-container .countdown-item 
{
      background: none;
}



Hide the Start Time on Monthly Calendar Events:


Each timed event on a Monthly calendar displays its start time before the title. If you don't need to see the start times, this snippet hides them. 


This only affects timed events. All-Day events are untouched, since they don't display a time to begin with. 


.calendar-monthly .daybox UL > LI:not(.event-all-day) .summary-container SPAN:first-child 
{
      display: none;
}



Remove Text Shadow on All Calendar Types:


DAKboard adds a subtle shadow behind calendar text by default to help it stand out against different backgrounds. If you'd prefer shadow-free text, this snippet removes it across different calendar types. 


/* Monthly calendar */
.calendar TABLE.calmonth 
{
      text-shadow: none;
}

/* Big Monthly calendar */
TABLE.calendar-monthly-big 
{
      text-shadow: none;
}

/* Agenda calendar */
.calendar-agenda 
{
      text-shadow: none;
}

/* Weekly calendar */
.cal-weekly-grid-container 
{
      text-shadow: none;
}

/* Availability calendar */
.calendar-availability 
{
      text-shadow: none;
}



Expand Event Text on Hover in Weekly Calendar:


In the Weekly grid calendar, longer event titles can get cut off if they don't fit within their time slot. This snippet lets you hover over an event to expand it and read the full text.


.cal-weekly-grid>.grid-item:hover 
{
      z-index: 10001!important;
      overflow: visible;
}


NOTE: This only works with a mouse or touchscreen device.



Change the Text Color of All-Day Events:


On Monthly and Big Monthly calendars, All-Day and Multiple-Day events display white lettering on top of a colored block so they stand out. If your calendar color is light, this text can be hard to read. This snippet changes that lettering to a different color. You can adjust the color to one of your choosing.


.calendar-monthly-big .event-all-day, .calendar-monthly .event-all-day 
{
    color: #000000 !important;
}



Adjust Calendar Width on Predefined Screens:


This snippet adjusts the width of the Agenda calendar type on Predefined Screens. You can adjust the 100vw value to change how much horizontal space the calendar takes up.


.calendar-scrollable-container 
{
    display: table;
    width: 100vw;
}



Change the Event Start Time Color in Weekly Calendar:


This snippet changes the color of the start time text shown on each event in the Weekly calendar type. You can adjust the color to one of your choosing. 


.cal-weekly-grid>.grid-item .event-time-start 
{
    color: #000000 !important;
}



Display Start and End Time Inline in Agenda Calendar:


By default, an event's start and end time may stack on separate lines in the Agenda calendar type. This snippet displays them side by side on the same line.


The first rule also sets the time's color and visibility, since some calendar color themes can otherwise cause it to blend into the background. You can adjust the color to one of your choosing. 


.agenda-event-time 
{
    opacity: 1;
    color: #ffffff; /* this can be adjusted to your preference */
}

.agenda-event-time-start,
.agenda-event-time-end 
{
    display: inline-block;
}

.agenda-event-time-end 
{
    font-size: 100%;
    font-weight: 500;
    margin-right: 0.5em;
}

.agenda-event-time-end:before 
{
    content: " - ";
    margin-left: 0.25em;
    margin-right: 0.25em;
}



Customize How Event Times Are Displayed:


DAKboard applies formatting to event times by default. This snippet lets you turn any of these off individually to show times as per your preference.


You don't need to use all four rules together. Include only the ones that match the look you want. 


/* Hides :{minute} on top of the hour times */
.time-val.top-of-hour .minute-val 
{
    display: none;
}


/* Change "am" to "a" */
.time-val.isAM .meridiem:after 
{
    content: "a" !important;
}


/* Change "pm" to "p" */
.time-val.isPM .meridiem:after 
{
    content: "p" !important;
}


/* Hides ":" separator */
.time-val .minute-val:before 
{
    display: none;
}



Scroll a Text Block Vertically:


This snippet makes the content inside a Text block scroll vertically.


.text .convert-markdown 
{
     overflow: hidden;
     height: auto;
}

@keyframes scroll-vert-marquee-1 
{
     0%   {transform: translateY(100%);}
   100%  {transform: translateY(-100%);}
}

.text .convert-markdown 
{
    animation-name: scroll-vert-marquee-1;
    animation-duration: 5s; /* lower = faster, higher = slower */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}



Scroll an Agenda Calendar Horizontally:


This snippet enables horizontal scrolling for the Agenda calendar type, letting you display more days than would normally fit across the block.  In this example, the calendar is set to show 30 days worth of events. 


.calendar-agenda.calendar-agenda-horiz .day-container 
{
      max-width: 20vw;
      display: table-cell;
      min-width: 20vw;
}

.calendar-agenda.calendar-agenda-horiz .day-container 
{
       overflow: hidden;
       --myscrollerwidth: 100vw;
}

@keyframes scroll-horiz-marquee-1 
{
       0% { transform: translateX(calc(var(--myscrollerwidth))); }
      100% {transform: translateX(-3000%);}
}

.calendar-agenda.calendar-agenda-horiz .day-container 
{
      animation-name: scroll-horiz-marquee-1;
      animation-duration: 120s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;    
}


If you change how many days your calendar shows, you'll want to adjust two values to match:

  1. animation-duration: This controls how fast the days scroll by. Lower the number of seconds to scroll faster, raise it to scroll slower.
  2. The -3000% value in the keyframes: This controls how far the scroll travels. At -3000%, it's tuned to scroll through about a month's worth of days. Increase this to cover more days, or decrease it to cover fewer.

  


Customize the Current Time Line in Weekly Calendar:


The Weekly calendar shows a line and a small label marking the current time. This snippet gives you four optional ways to adjust it. Use whichever option matches what you'd like.


/* Option 1: change color of current time line*/
.cal-weekly-grid .now-line 
{
    border-top: 8px solid green !important;  /* can be adjusted to your preference*/
}


/* Option 2: remove the current time line*/
.cal-weekly-grid .now-line 
{
    border-top: none !important;
}


/* Option 3: remove the current time indicator */
.cal-weekly-grid .timelabel-now 
{
    display: none;
}

/* Option 4: change color of the current time indicator */
.cal-weekly-grid .timelabel-now 
{
    background: #e803fc !important; /* can be adjusted to your preference*/
}

 


Hide Days from Other Months in Monthly Calendars:


Monthly and Big Monthly calendars sometimes show grayed-out days from the previous and next month. This snippet hides those extra days so only the current month is shown. 


.month-future .disabled, .month-past .disabled 
{
      display: none;
}

.calmonth .other-month-day .daybox 
{
      display: none;
}



Remove Background Blending Behind the Calendar on Predefined Screens:


On Predefined Screens, your calendar can blend into the Screen's background with a soft gradient. This snippet removes that blending effect. 



header:after 
{
    background-image: none !important;
}



Add a Border to Calendar Events:


This snippet adds a colored border around events in the Monthly or Big Monthly calendar, letting you visually separate All-Day events from timed events, or just add a decorative touch. 


You don't have to add both. Use only the rule for the event type you'd like to border. 


For the Monthly calendar type: 


/* add a border to all-day events in the Monthly calendar type */
.calendar-monthly .event-all-day
{
      border: 6px solid #f7f42d !important; /* Adjust the color and thickness as needed */
}


/* add a border to timed events in the Monthly calendar type */
.calendar-monthly .event-container:not(.event-all-day) 
{
      border: 6px solid #f72dcf!important; /* Adjust the color and thickness as needed */
}


For the Big Monthly calendar type: 


/* add a border to all day events in the Big Monthly calendar type */
.calendar-monthly-big .event-all-day
{
      border: 6px solid #f54927 !important; /* Adjust the color and thickness as needed */
}


/* add a border to timed events in the Big Monthly calendar type */
.calendar-monthly-big .event-container:not(.event-all-day) 
{
      border: 6px solid #00fff4!important; /* Adjust the color and thickness as needed */
}



Hide Timed Events:


This snippet hides timed events (any event that isn't an All-Day event), leaving only All-Day events visible. It works on the Monthly, Big Monthly, and Agenda calendar types. Just use the rule that matches your calendar. 


For the Monthly calendar type:


.calendar-monthly .event-container:not(.event-all-day) 
{
     display: none;
}


For the Big Monthly calendar type: 


.calendar-monthly-big .event-container:not(.event-all-day) 
{
      display: none;
}


For the Agenda calendar type:


.calendar-agenda .agenda-event-time:not(.all-day), .calendar-agenda .agenda-event-time:not(.all-day) ~ * 
{
       display: none;
}



Simplify an Up Next Calendar:


This snippet hides the titles and any additional events in an Up Next calendar, leaving just the essentials on display. 



.block-calendar .calendar-schedule .day-container 
{
      padding-bottom: .5em;
      display: none;
}

.block-calendar .pull-left 
{
      display: none;
}



Display To-Do List Items in Two Columns:


If your To-Do list has more items than fit in a single column, this snippet arranges them into two columns side by side instead, so more tasks are visible at once before you need to scroll.



ul.task-list 
{
      display: flex;
      flex-flow: column wrap;
      max-height: var(--block-height-px);
}

UL.task-list > LI.task-item 
{
      width: 50%;
}



Resize the Event Editor Pop-Up:


Add brief info about what this CSS does: It was discovered that when using Larger Screen resolutions or the new Auto Scaling screens, the Add Event block for Google and Microsoft calendars can appear very small and difficult to use. This snippet lets you scale that pop-up block up or down to a comfortable size.


Increase the --resolution-scale-tweak value to make the pop-up block larger, or decrease it to make it smaller. 

 


@media (orientation: landscape) 
{
      #screen-container-no-edit 
      {
          --resolution-scale: calc(100vw / 1920px);
      }
 }

@media (orientation: portrait) 
{
       #screen-container-no-edit 
      {
          --resolution-scale: calc(100vw / 1080px);
      }
 }


/**
 *
 * EDIT THIS TO TWEAK SCALE FACTOR!
 *  - Use small increments when testing, such as tenths
 *  - Negative values will shrink it, positive will enlarge it
 *
 */

#screen-container-no-edit 
{
     --resolution-scale-tweak: 0.3;
}


#calendar-update-event-modal .modal-content 
{
      transform-origin: top;
      transform: scale(calc(var(--resolution-scale) + var(--resolution-scale-tweak)));
}

 


Frequently Asked Questions:


Why isn't this snippet working on my Screen?


If a snippet doesn't seem to be working, here are a few things to check:

  • Block type: Make sure the snippet matches the block you are using. Several snippets in this article are written for a specific block type and calendar type (Monthly, Big Monthly, Agenda, etc.), so the same code won't apply to a different type.
  • Save and refresh: Confirm you saved the CSS changes, then click the Refresh Displays button afterward.
  • Block naming: If you're targeting one specific block among several of the same type, double-check that the block has the correct Block Title set, and that your CSS uses the matching .block--YourBlockName selector.


If it still doesn't apply, your Screen's underlying structure may have changed, which may affect existing custom styles. We work to keep things backward-compatible, but if your Screen's appearance changes unexpectedly, please review your CSS rules to make sure they are still working as intended.  



I already have the Text block's "Scrolling" setting turned on. Can I add this CSS too?


Not at the same time on the same block. The built-in setting and this CSS will both try to animate the same content, which can cause unpredictable or glitchy movement. Use the built-in setting if horizontal scrolling is all you need, or turn it off and use the CSS above if you want vertical scrolling instead. 



Helpful Articles:


Having trouble?  See if these articles help.


Applying Custom Styles to Screens