DayBackOnline

Editing the Calendar's Appearance

DayBackOnline.CSS History

Hide minor edits - Show changes to output

April 25, 2018, at 08:29 PM by 192.88.134.15 -
Changed lines 206-225 from:
-->.sidebar-toggle-container {
---> margin-left: 400px;
---> margin-top: 15px;
-->}
-->.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa
-caret-right {
---> font-size: 40px ;
---> color: rgb(66, 139, 202);
-->}
-->.sidebar-toggle {
---> overflow: visible ;
---> background-color: #FFFFFF ;
-->}
-->.sidebar-toggle-label {
---> font-size: 13px;
-->}
-->.sidebar-toggle-container .fa-caret-left:before {
---> content: "\f190" !important;
-->}
-->.sidebar-toggle-container .fa-caret-right:before {
---> content: "\f18e" !important;
to:
-->@media only screen
-->and (min-device-width : 1025px)
-->and (max-device-width : 3224px) {
--->.sidebar-toggle-container {
----> margin-left: 400px;
----> margin-top: 15px;
--->}
--->.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
----> font-size: 40px ;
----> color: rgb(66, 139, 202);
--->}
--->.sidebar-toggle {
----> overflow: visible ;
----> background-color: #FFFFFF ;
--->}
--->.sidebar-toggle-label {
----> font-size: 13px
;
--->}
--->.sidebar-toggle-container .fa-caret-left:before {
----> content: "\f190" !important;
--->}
--->.sidebar-toggle-container .fa-caret-right:before {
----> content: "\f18e" !important;
--->}
April 18, 2018, at 02:48 PM by 192.88.134.15 -
Changed lines 378-379 from:
-->    content: "Selecting contacts coming soon.";
--->}
to:
--->    content: "Selecting contacts coming soon.";
-->}
April 18, 2018, at 02:48 PM by 192.88.134.15 -
Deleted lines 388-389:

While we don't yet have a built-in way of making specific fields read-only, you can prevent users from being able to click on a specific field using the following attribute
April 18, 2018, at 02:47 PM by 192.88.134.15 -
Added lines 373-391:
'''Can I change the “Selecting contacts is only available in Salesforce” message?''

Yes. Add this to remove the default message and add your own:

-->contact-selector div:first-child:before {
-->    content: "Selecting contacts coming soon.";
--->}
-->contact-selector .pad div:first-child {
--->    display: none;
-->}
-->project-selector div:first-child:before {
--->    content: "Selecting projects coming soon.";
-->}
-->project-selector .pad div:first-child {
--->    display: none;
-->}

While we don't yet have a built-in way of making specific fields read-only, you can prevent users from being able to click on a specific field using the following attribute

Changed line 408 from:
Note: Since this only prevents mouse clicks, it works great for picklist items, like Resource, or Status, but users will still be able to use the Tab button to enter a text field.
to:
Note: Since this only prevents mouse clicks, it works great for picklist items, like Resource, or Status, but users will still be able to use the Tab button to enter a text field.
February 07, 2018, at 10:45 PM by KC Embrey - Added mobile-device
Changed lines 248-250 from:
->CSS modifications to the calendar can be formatted to only apply to a specific view. Adding one of the following selectors to the beginning of your CSS will specify which view to apply the CSS to:

-->Name of CSS selector -- Corresponding tab in the calendar
to:
->CSS modifications to the calendar can be formatted to only apply to a specific view. If you'd like your changes only to apply when in the mobile (phone) calendar mode, you can use the following selector:

-->.mobile-device

->The inverse
of that, for when viewing the calendar in the full, non-mobile version is:

-->.not-mobile-device

->Adding one of the following selectors to the beginning of your CSS will specify which view to apply the CSS to:

-->'''''Name of CSS selector -- Corresponding tab in the calendar'''''
Added line 265:
-->.fc-view-basicResourceDays -- Resource daily view
Changed line 268 from:
-->.fc-view-basicResourceVertz -- Resource tab, list view
to:
-->.fc-view-basicResourceVert -- Resource tab, list view
Changed line 371 from:
For example, preventing users from clicking into the Title field (and making it darker than other events) can be done with:
to:
For example, preventing users from clicking into the Title field (and making it darker than other fields) can be done with:
February 03, 2018, at 01:18 AM by KC Embrey - Added #ReadOnly
Changed lines 362-380 from:
-->}
to:
-->}

[[#ReadOnly]]
'''Can I make a specific popover field read-only'''

While we don't yet have a built-in way of making specific fields read-only, you can prevent users from being able to click on a specific field using the following attribute:

->pointer-events: none;

For example, preventing users from clicking into the Title field (and making it darker than other events) can be done with:

-->.dbk_editEvent #title{
--->pointer-events: none;
--->background: rgb(204, 204, 204);
--->color: rgb(51, 51, 51);
--->border-color: rgb(60,60,60)
-->}

Note: Since this only prevents mouse clicks, it works great for picklist items, like Resource, or Status, but users will still be able to use the Tab button to enter a text field.
January 17, 2018, at 02:09 AM by 192.88.134.15 -
Added lines 184-191:
-->}

'''How do I remove the green plus button and the ability to make new events?'''

-> There is a just a bit of CSS to add to remove the green plus button in the lower right of the calendar and the "new event" button that shows when you click in an empty calendar cell:

-->.add-event-button, .dbk_newEvent .btn-success, .add-event-cancel {
---> display: none;
October 19, 2017, at 07:18 PM by 192.88.134.15 -
Added lines 158-169:

'''Can I color alternate rows on the schedule views?'''

-> Yes. Add this to get alternate-row scheduling that makes the calendar look more like a spreadsheet.

-->.fc-agenda-slots tr:nth-child(even){
--->background-color: rgba(173, 216, 230, 0.19);
-->}
-->.fc-agenda-slots tr.fc-minor td {
--->border-color: #9f9f9f transparent transparent;
-->}

July 31, 2017, at 08:47 PM by 192.88.134.15 -
Changed lines 27-31 from:
--> #timelineTime {
--->display: none;
-->}
-->#timelineContainer {
--->
display: none !important;
to:
--> #timelineTime, #timelineTimeVertContainer, #timelineContainer, #timelineContainerVert {
---> display: none !important;
July 13, 2017, at 02:41 PM by 192.88.134.15 -
Added lines 4-5:

https://www.youtube.com/watch?v=N1Mm3UMHdq4
July 13, 2017, at 02:40 PM by 192.88.134.15 -
Changed lines 1-2 from:
(:include DayBackForFileMaker.CSS:)
to:
(:title Editing the Calendar's Appearance:)

The look and feel of DayBack is controlled through CSS which you can edit to alter the calendar's appearance and match the colors used in your own file. You'll find examples for some common CSS changes below.

(:youtube N1Mm3UMHdq4 width=500
:)
Changed lines 15-343 from:
...and [[https://www.sublimetext.com/ | Sublime Text]] (all platforms) which offers great code completion and "multiple cursors" which are an absolute joy (shown with "next-skip" [[https://www.sublimetext.com/blog/articles/sublime-text-2-0-released | here]]).
to:
...and [[https://www.sublimetext.com/ | Sublime Text]] (all platforms) which offers great code completion and "multiple cursors" which are an absolute joy (shown with "next-skip" [[https://www.sublimetext.com/blog/articles/sublime-text-2-0-released | here]]).

!! Some Common CSS Requests

Add the CSS below into the body of your CSS file in DayBack. One tip: add the css somewhere in the middle of the existing CSS, not as the first line.

'''My users don't want to see the red line for the current time'''

-> If you don't want to see the red time line, just edit the CSS as described above and then add this:

--> #timelineTime {
--->display: none;
-->}
-->#timelineContainer {
--->display: none !important;
-->}

-> You can also change the color and font size of the current time by modifying the attributes for those CSS elements like this:

--> #timelineTime {
--->color: green !important;
--->font-size: 1.2em !important;
--->top: -14px !important;
--> }
--> #timelineContainer {
--->border-top-color: green !important;
--> }

'''Can I increase the font size for events so they are easier to read?'''

-> Yes. Add the following lines. The first changes all the views except horizon; the second class changes the horizon view.

--> .fc-event {
--->font-size: 1em;
-->}
-->.nub-content {
--->font-size: 15px;
-->}

'''How can I remove the start time from displaying?'''

-> If you don't want to see the event start time until you click on an event, you can add this to your CSS:

--> .fc-event-time {
--->    display: none;
--> }

-> To pull this from just the Schedule view, preface it with the view name like this:

--> .fc-view-agendaResourceVert .fc-event-time {
--->    display: none;
--> }

-> If you'd like to pull the event title along side the start and end times on the schedule views, try this:

--> .fc-event-time {
---> display: inline;
--> }
--> .fc-event-title {
---> display: inline;
--> }

[[#AddEvent]]
'''Can I prevent the new event popover or plus button from showing?'''

-> Yes, add this CSS somewhere after the first few declarations to hide the new event popover:

-->div[content=newEvent]{
---> display: none !important;
--> }

-> And add this to hide the draggable, green plus button for creating events:

-->.add-event-container {
--->display: none;
-->}

'''Can I remove the delete button from the event's popover?'''

-> Yes, add this CSS somewhere after the first few declarations:

-->.dbk_editEvent .dbk_button_text_danger {
---> display: none;
--> }

[[#CustomActions]]
'''Can I remove the custom actions button/cog from the event's popover?'''

-> Yes, add this CSS somewhere after the first few declarations:

-->.dbk_popover .fa-cog {
---> display: none;
--> }

'''That little handle for resizing an event makes small events look too crowded; can I get rid of that?'''

-> Yes, adding this CSS somewhere after the first few declarations will pull the handle but still let you drag the event:

-->.fc .ui-resizable-handle {
--->  opacity: 0;
--> }

'''Can we change the color/opacity of the new event highlight?'''

-> Yes, add this CSS somewhere after the first few declarations to change the color to yellow and increase opacity/visibility:

-->.fc-cell-overlay{
--->background-color: yellow;
--->opacity: .5;
-->}

-> Note: You can specify a color or enter an rgb attribute if desired. Opacity can be specified between 0 (invisible) and 1 (solid).

'''Can we rotate the column headers on the Resources / Schedule view?'''

-> Yes. This a cool little mod =) Note that you have to set your abbreviations to be the same as your resource names to get the full effect. Here's a screenshot, CSS follows:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumslg.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png]]

-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header span {
--->-webkit-transform: rotate(-70deg);
--->-moz-transform: rotate(-70deg);
--->-o-transform: rotate(-70deg);
--->-ms-transform: rotate(-70deg);
--->width: 100px;
--->margin-top: -50px;
--->top: 190px;
--->position: fixed;
--->margin-left: -1.2%;
-->}
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header {
--->text-align: left;
-->}
-->.fc-view-agendaResourceVert .fc-date-header span {
--->position: fixed;
-->}
-->.fc-view-agendaResourceVert {
--->top: 90px;
--> }
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-last span[style^="width"] {
--->margin-left: -1%;
--->position: fixed;
--->width: 100px !important
-->}

[[#HideSidebar]]
'''Can I hide one of the tabs in the sidebar, like "Filters"?'''

-> Yes. I'm not sure you'll want to hide the settings tab as without it there is no way to get to the Account Settings section of the calendar, but if you'd already entered your license--and you remember how to undo what follows--maybe that's ok.

-> Hiding the tabs is easy. Here's the code to hide Filters and Calendars, resizing Settings. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"


-->.dbk_sidebar .filters, .dbk_sidebar .calendars {
--->display: none !important;
-->}
-->.tabButtonContainer button.settings {
---> width: 258px;
-->}

'''Can we change the color of the lines between days of the month or week?'''

-> Yes; you can change the grid lines like this:

--> .fc-widget-content, .fc-widget-content {
--->    border-color: #a94442;
-->}

'''Can I make the button to show and hide the sidebar more obvious?'''

-> Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown %newwin% [[https://fontawesome.io/icons/ | here]].

-->.sidebar-toggle-container {
---> margin-left: 400px;
---> margin-top: 15px;
-->}
-->.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
---> font-size: 40px ;
---> color: rgb(66, 139, 202);
-->}
-->.sidebar-toggle {
---> overflow: visible ;
---> background-color: #FFFFFF ;
-->}
-->.sidebar-toggle-label {
---> font-size: 13px;
-->}
-->.sidebar-toggle-container .fa-caret-left:before {
---> content: "\f190" !important;
-->}
-->.sidebar-toggle-container .fa-caret-right:before {
---> content: "\f18e" !important;
-->}

'''Can I change the icons used throughout the calendar?'''

-> Sure! For example, you can change the calendar icon in DayBack's sidebar to a home icon. Scroll to the bottom of the CSS text, where you'll find placeholders for some of the different icons used in DayBack. Add a new line for the calendar icon placeholder, changing it to the home icon, like this:

-->.fa-calendar:before {
--->content: "\f015";
-->}

->At this %newwin% [[https://fontawesome.io/cheatsheet/ | link]], you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, copy the icon's code, such as "&#xf015". Then, follow the form above, replacing the "&#x" with "\", changing any of the icon placeholders or adding new lines for icons not listed.

-> Icons not already listed in the CSS theme file:

--> .fa-calendar
--> .fa-cog

->Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. (Copy/paste these "quotes" if your keyboard just doesn't want to type them in. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)

[[#viewspecific]]
'''Can I make customizations to a specific view only?'''

->CSS modifications to the calendar can be formatted to only apply to a specific view. Adding one of the following selectors to the beginning of your CSS will specify which view to apply the CSS to:

-->Name of CSS selector -- Corresponding tab in the calendar
-->.fc-view-agendaDay -- Day view with times down the left side
-->.fc-view-basicDay -- Simple Day View
-->.fc-view-agendaWeek -- Week view with times down the left side
-->.fc-view-basicWeek -- Simple Week View
-->.fc-view-month -- month view
-->.fc-view-basicHorizon -- Gantt Chart
-->.fc-view-agendaResourceVert -- Resource tab with times down left side
-->.fc-view-agendaResourceHor -- Pivot Schedule (was "Grid" view)
-->.fc-view-basicResourceVertz -- Resource tab, list view
-->.fc-view-basicResourceHor -- Pivot List

->You can see an example of CSS applied specifically to the Horizon view in the following section.

'''What about changing the popover for just one source/calendar?'''

-> You can restrict your CSS mods to just one calendar as well. DayBack uses the calendar name as the class name for the popover (use the case sensitive calendar name with spaces and the "@" sign removed). For example, this will hide the custom actions cog on just the calendar named "Sample Events":

-->.SampleEvents .dbk_popover .fa-cog {
---> display: none;
-->}

-> The calendar name is also used as a class in this way when drawing an event the calendar (such as how the event appears on the month view before you click on it). For example, this will give events for the Sample Events source a drop shadow:

--> .fc-event.SampleEvents {
---> border-color: rgba(0, 0, 0, .3);
---> border-width: 1px;
---> -webkit-box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
---> -moz-box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
---> box-shadow: 3px 10px 11px 0px rgba(0, 0, 0, 0.75);
--> }

[[#horizonlines]]
'''I'd like to shade weekends in Horizon view so it's easier to see where weeks start and stop?'''

-> Great idea:

--> .fc-view-basicHorizon .dbk_day_sat .fc-day-content, .fc-view-basicHorizon .dbk_day_sun .fc-day-content {
--->background-color: rgba(200, 201, 204, 0.11) !important;
-->}

-> You might also like this mod, which adds a vertical line to the beginning of your week. Works great with the mod above. In your CSS, replace "mon" with your start day.

--> .fc-view-basicHorizon .fc-mon {
--->border-color: rgba(10, 189, 237, 0.22) !important;
--->border-left-width: 2px;
-->}

-> Here is a before and after of what these two mods look like; it's subtle but I think it makes the horizon view easier to scan at a glance:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmod.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png]]

'''Can I change the color of the "none" resource column?'''

-> Yes! Using this technique you can assign a color to any resource column simply by replacing "none" with the name of that resource.

--> .fc-day[data-resource="none"], .fc-view-agendaResourceVert .fc-col0 {
---> background-color: #DFECF5 !important;
-->}

'''Can I style the date numbers in the sidebar's mini-calendar?'''

-> Sure thing. The .dbk_dayNumber selector will let you style all day numbers in the mini-calendar. Or, you can target just the current day or selected day (date in focus). For example, you might want to make the current day and the selected day bold:

-->.dbk_dayNumber.dbk_today, .dbk_dayNumber.dbk_selected {
--->font-weight: bold;
-->}

[[#Status]]
'''How can we remove the "New Status" button in the filters sidebar?'''

-> While you can't pull this for only some users, you can remove it entirely. (Remember that these statuses are records in FileMaker's CalendarColors table, so you can apply access privilege rules to that table if you only want some users to be able to add statuses).

-> Here is the CSS for removing the button outright:

-->.list-selector.list-event-button {
--->  display: none;
-->}

-> If you want to pull the "cog" icon for adjusting status names and colors you can use this:

-->.list-selector .fa-cog {
--->display: none !important;
-->}

[[#HideHelp]]
'''I'd like to hide the help icons that link to DayBack's docs'''

-> No problem. But note that these buttons first call a FileMaker script, so if you'd like, you can repurpose the "Calendar Help From WebViewer" script to perform another action like open your own help layout. To hide them altogether, just add this to your CSS theme:

--> button.btn.btn-link.btn-help {
---> display: none;
--> }

'''Can I change the appearance of collapsed 'breakout' rows in Horizon view?'''

-> Sure. Here is the CSS for the screenshot below:

-->.breakout-title-collapsed td {
--->color: rgb(183, 184, 190);
--->background-color: rgb(250, 250, 250);
-->}

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/BreakoutByStatusMed.png]]

[[#ResourcePivotViewColumn]]
'''Can I change the size of the label column in the Resource Pivot views?'''

-> Sure. Adjust the width value in the following CSS to adjust the column size:

-->.fc-row-label{
--->width:100px;
-->}
July 13, 2017, at 02:39 PM by 192.88.134.15 -
Changed line 1 from:
(:include DayBackForFileMaker.CSS)
to:
(:include DayBackForFileMaker.CSS:)
July 13, 2017, at 02:38 PM by 192.88.134.15 -
Changed lines 1-6 from:
(:title Editing the Calendar's Appearance:)

The look and feel of DayBack is controlled through CSS which you can edit to alter the calendar's appearance and match the colors used in your own file. You'll find examples for some common CSS changes below.

(:youtube N1Mm3UMHdq4 width=500:
)
to:
(:include DayBackForFileMaker.CSS)
Changed lines 11-174 from:
...and [[https://www.sublimetext.com/ | Sublime Text]] (all platforms) which offers great code completion and "multiple cursors" which are an absolute joy (shown with "next-skip" [[https://www.sublimetext.com/blog/articles/sublime-text-2-0-released | here]]).

! CSS Examples

!! Some common css change requests and how to enact them

'''Can I increase the font size for events so they are easier to read?'''

-> Yes. Add the following lines. The first changes all the views except horizon; the second class changes the horizon view.

--> .fc-event {
--->font-size: 1em;
-->}
-->.nub-content {
--->font-size: 15px;
-->}

'''How can I remove the start time from displaying?'''

-> If you don't want to see the event start time until you click on an event, add this:

--> .fc-event-time {
--->    display: none;
--> }

-> To pull this from just the Schedule view, preface it with the view name like this:

--> .fc-view-agendaResourceVert .fc-event-time {
--->    display: none;
--> }

-> If you'd like to pull the event title along side the start and end times on the schedule views, try this:

--> .fc-event-time {
---> display: inline;
--> }
--> .fc-event-title {
---> display: inline;
--> }

'''Can I remove the delete button from the event's popover?'''

-> Yes:

-->.dbk_editEvent .dbk_button_text_danger {
---> display: none;
--> }

'''That little handle for resizing an event makes small events look too crowded; can I get rid of that?'''

-> Yes, this will pull the handle but still let you drag the event:

-->.fc .ui-resizable-handle {
--->  opacity: 0;
--> }

'''Can we rotate the column headers on the Resources / Schedule view?'''

-> Yes. This a cool little mod =) Note that you have to set your abbreviations to be the same as your resource names to get the full effect. Here's a screenshot, CSS follows:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumslg.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png]]

-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header span {
--->-webkit-transform: rotate(-70deg);
--->-moz-transform: rotate(-70deg);
--->-o-transform: rotate(-70deg);
--->width: 100px;
--->margin-top: -50px;
--->top: 190px;
--->position: fixed;
--->margin-left: -1.2%;
-->}
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header {
--->text-align: left;
-->}
-->.fc-view-agendaResourceVert .fc-date-header span {
--->position: fixed;
-->}
-->.fc-view-agendaResourceVert {
--->top: 90px;
--> }
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-last span[style^="width"] {
--->margin-left: -1%;
--->position: fixed;
--->width: 100px !important
-->}

'''Can I hide one of the tabs in the sidebar, like "Filters"?'''

-> Yes. I'm not sure you'll want to hide the settings tab as without it there is no way to get to the Account Settings section of the calendar, but if you'd already entered your license--and you remember how to undo what follows--maybe that's ok.

-> Hiding the tabs is easy. Here's the code to hide Filters and Calendars, resizing Settings. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"


-->.dbk_sidebar .filters, .dbk_sidebar .calendars {
--->display: none;
-->}
-->.tabButtonContainer button.settings {
---> width: 258px;
-->}

'''Can I make the button to show and hide the sidebar more obvious?'''

-> Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown %newwin% [[https://fontawesome.io/icons/ | here]].

-->.sidebar-toggle-container {
---> margin-left: 400px;
---> margin-top: 15px;
-->}
-->.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
---> font-size: 40px ;
---> color: rgb(66, 139, 202);
-->}
-->.sidebar-toggle {
---> overflow: visible ;
---> background-color: #FFFFFF ;
-->}
-->.sidebar-toggle-label {
---> font-size: 13px;
-->}
-->.sidebar-toggle-container .fa-caret-left:before {
---> content: "\f190" !important;
-->}
-->.sidebar-toggle-container .fa-caret-right:before {
---> content: "\f18e" !important;
-->}

'''Can I change the icons used throughout the calendar?'''

-> Sure! For example, you can change the house icon in DayBack's sidebar to a calendar icon. Scroll to the bottom of the CSS text, where you'll find placeholders for the different icons. Change the home icon placeholder,  ".dbk_icon_home {}", to this:

-->.dbk_icon_home::before {
--->content: "\f073";
-->}

->At this %newwin% [[https://spiderqube.com/cheatsheets/FontAwesome_Cheatsheet.pdf | link]], you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.

->Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. (Copy/paste these "quotes" if your keyboard just doesn't want to type them in. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)

'''I'd like to shade weekends in Horizon view so it's easier to see where weeks start and stop?'''

-> Great idea:

--> .fc-view-basicHorizon .dbk_day_sat .fc-day-content, .fc-view-basicHorizon .dbk_day_sun .fc-day-content {
--->background-color: rgba(200, 201, 204, 0.11) !important;
-->}

-> You might also like this mod, which adds a vertical line to the beginning of your week. Works great with the mod above. In your CSS, replace "mon" with your start day.

--> .fc-view-basicHorizon .fc-mon {
--->border-color: rgba(10, 189, 237, 0.22) !important;
--->border-left-width: 2px;
-->}

-> Here is a before and after of what these two mods look like; it's subtle but I think it makes the horizon view easier to scan at a glance:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmod.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png]]
'''Can I change the color of the "none" resource column?'''

-> Yes! Using this technique you can assign a color to any resource column simply by replacing "none" with the name of that resource.

--> .fc-day[data-resource="none"] {
---> background-color: #DFECF5  !important;
--> }
to:
...and [[https://www.sublimetext.com/ | Sublime Text]] (all platforms) which offers great code completion and "multiple cursors" which are an absolute joy (shown with "next-skip" [[https://www.sublimetext.com/blog/articles/sublime-text-2-0-released | here]]).
April 07, 2017, at 03:18 PM by 192.88.134.15 -
Added lines 20-30:

'''Can I increase the font size for events so they are easier to read?'''

-> Yes. Add the following lines. The first changes all the views except horizon; the second class changes the horizon view.

--> .fc-event {
--->font-size: 1em;
-->}
-->.nub-content {
--->font-size: 15px;
-->}
March 18, 2017, at 07:57 PM by 192.88.134.15 -
Added lines 103-128:
-->}

'''Can I make the button to show and hide the sidebar more obvious?'''

-> Yes; the code below will move this button to the right of the date header, make it larger, and cause the "show sidebar" text to be visible all the time. The last two sections swap out the icon: you can use almost any of the font awesome icons shown %newwin% [[https://fontawesome.io/icons/ | here]].

-->.sidebar-toggle-container {
---> margin-left: 400px;
---> margin-top: 15px;
-->}
-->.sidebar-toggle-container .fa-caret-left, .sidebar-toggle-container .fa-caret-right {
---> font-size: 40px ;
---> color: rgb(66, 139, 202);
-->}
-->.sidebar-toggle {
---> overflow: visible ;
---> background-color: #FFFFFF ;
-->}
-->.sidebar-toggle-label {
---> font-size: 13px;
-->}
-->.sidebar-toggle-container .fa-caret-left:before {
---> content: "\f190" !important;
-->}
-->.sidebar-toggle-container .fa-caret-right:before {
---> content: "\f18e" !important;
May 02, 2016, at 03:53 PM by 192.88.134.15 -
Added lines 26-31:
--->    display: none;
--> }

-> To pull this from just the Schedule view, preface it with the view name like this:

--> .fc-view-agendaResourceVert .fc-event-time {
December 29, 2015, at 06:28 PM by 192.88.134.15 -
Changed lines 115-118 from:
-->.dbk_day_sat, .dbk_day_sun {
---> background-color: rgba(200, 201, 204, 0.11) !important;
--> }
to:
--> .fc-view-basicHorizon .dbk_day_sat .fc-day-content, .fc-view-basicHorizon .dbk_day_sun .fc-day-content {
--->background-color:
rgba(200, 201, 204, 0.11) !important;
-->}

-> You might also like this mod, which adds a vertical line to the beginning of your week. Works great with the mod above. In your CSS, replace "mon" with your start day.

--> .fc-view-basicHorizon .fc-mon {
--->border-color: rgba(10, 189, 237, 0.22) !important;
--->border-left-width: 2px;
-->}

-> Here is a before and after of what these two mods look like; it's subtle but I think it makes the horizon view easier to scan at a glance:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmod.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/cssmodsm.png]]
December 29, 2015, at 06:27 PM by 192.88.134.15 -
Added lines 117-124:
--> }

'''Can I change the color of the "none" resource column?'''

-> Yes! Using this technique you can assign a color to any resource column simply by replacing "none" with the name of that resource.

--> .fc-day[data-resource="none"] {
---> background-color: #DFECF5  !important;
December 10, 2015, at 04:37 PM by 192.88.134.15 -
Changed lines 109-117 from:
->Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. (Copy/paste these "quotes" if your keyboard just doesn't want to type them in. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)
to:
->Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. (Copy/paste these "quotes" if your keyboard just doesn't want to type them in. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)

'''I'd like to shade weekends in Horizon view so it's easier to see where weeks start and stop?'''

-> Great idea:

-->.dbk_day_sat, .dbk_day_sun {
---> background-color: rgba(200, 201, 204, 0.11) !important;
--> }
October 26, 2015, at 02:18 PM by 142.4.217.188 -
Added lines 28-36:

-> If you'd like to pull the event title along side the start and end times on the schedule views, try this:

--> .fc-event-time {
---> display: inline;
--> }
--> .fc-event-title {
---> display: inline;
--> }
October 20, 2015, at 03:53 AM by 142.4.217.187 -
Changed lines 88-100 from:
-->}
to:
-->}

'''Can I change the icons used throughout the calendar?'''

-> Sure! For example, you can change the house icon in DayBack's sidebar to a calendar icon. Scroll to the bottom of the CSS text, where you'll find placeholders for the different icons. Change the home icon placeholder,  ".dbk_icon_home {}", to this:

-->.dbk_icon_home::before {
--->content: "\f073";
-->}

->At this %newwin% [[https://spiderqube.com/cheatsheets/FontAwesome_Cheatsheet.pdf | link]], you'll find a list of icons that can be used in DayBack. Once you find an icon you'd like to use, follow the form above with any of the icon placeholders to change the corresponding icon.

->Note: Watch out for smart quotes! Make sure the icon code is wrapped in straight quotes. (Copy/paste these "quotes" if your keyboard just doesn't want to type them in. After pasting, use "Undo" in the edit menu to remove text formatting -- this will not remove the text you've pasted.)
Added lines 74-87:
-->}

'''Can I hide one of the tabs in the sidebar, like "Filters"?'''

-> Yes. I'm not sure you'll want to hide the settings tab as without it there is no way to get to the Account Settings section of the calendar, but if you'd already entered your license--and you remember how to undo what follows--maybe that's ok.

-> Hiding the tabs is easy. Here's the code to hide Filters and Calendars, resizing Settings. Add the following near the bottom of DayBack's CSS file, right above the line "/* !-- Additions Block Do Not Remove - More Classes --> */"


-->.dbk_sidebar .filters, .dbk_sidebar .calendars {
--->display: none;
-->}
-->.tabButtonContainer button.settings {
---> width: 258px;
Changed lines 53-54 from:
--->-moz-transform: rotate(-90deg);
--->-o-transform: rotate(-90deg);
to:
--->-moz-transform: rotate(-70deg);
--->-o-transform: rotate(-70deg);
Changed line 49 from:
%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumslg.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.jpg]]
to:
%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumslg.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.png]]
Changed lines 47-49 from:
-> Yes. This a cool little mod =)
to:
-> Yes. This a cool little mod =) Note that you have to set your abbreviations to be the same as your resource names to get the full effect. Here's a screenshot, CSS follows:

%newwin, width=500% [[https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumslg.png | https://www.seedcode.com/rootimages/stikipad/daybackonline/RotatedColumssm.jpg]]
Changed line 50 from:
--->-webkit-transform: rotate(-90deg);
to:
--->-webkit-transform: rotate(-70deg);
Changed line 57 from:
--->margin-left: -2%;
to:
--->margin-left: -1.2%;
Changed line 65 from:
.fc-view-agendaResourceVert {
to:
-->.fc-view-agendaResourceVert {
Changed lines 45-72 from:
to:
'''Can we rotate the column headers on the Resources / Schedule view?'''

-> Yes. This a cool little mod =)

-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header span {
--->-webkit-transform: rotate(-90deg);
--->-moz-transform: rotate(-90deg);
--->-o-transform: rotate(-90deg);
--->width: 100px;
--->margin-top: -50px;
--->top: 190px;
--->position: fixed;
--->margin-left: -2%;
-->}
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-widget-header {
--->text-align: left;
-->}
-->.fc-view-agendaResourceVert .fc-date-header span {
--->position: fixed;
-->}
.fc-view-agendaResourceVert {
--->top: 90px;
--> }
-->.fc-view-agendaResourceVert .dbk_columnHeader .fc-last span[style^="width"] {
--->margin-left: -1%;
--->position: fixed;
--->width: 100px !important
-->}
July 13, 2015, at 02:44 PM by 142.4.217.187 -
Changed line 5 from:
> > movie coming soon.
to:
(:youtube N1Mm3UMHdq4 width=500:)
July 12, 2015, at 03:30 PM by 142.4.217.187 -
Changed lines 19-25 from:
!! How can I remove the start time from displaying?

If you don
't want to see the event start time until you click on an event, you can edit the CSS as described above and then add this:

-> .fc-event-time {
-->    display: none;
->  }
to:
!! Some common css change requests and how to enact them

'''How can I remove the start time from displaying?'''

-> If you don't want to see
the event start time until you click on an event, add this:

--> .fc-event-time {
--->    display: none;
--> }

'''Can I remove the delete button from the event's popover?'''

-> Yes:

-->.dbk_editEvent .dbk_button_text_danger {
---> display: none;
--> }

'''That little handle for resizing an event makes small events look too crowded; can I get rid of that?'''

-> Yes, this will pull the handle but still let you drag the event:

-->.fc .ui-resizable-handle {
--->  opacity: 0;
--> }

July 12, 2015, at 03:14 PM by 142.4.217.187 -
Changed lines 3-7 from:
The look and feel of DayBack is controlled through CSS which you can edit to alter the calendar's appearance and match the colors used in your own file.

Each CSS file is a unique theme for the calendar
. You'll find tips for editing themes and a nice walkthrough video here: [[Editing Themes]].

''Editing CSS is not yet enabled but will be soon
.''
to:
The look and feel of DayBack is controlled through CSS which you can edit to alter the calendar's appearance and match the colors used in your own file. You'll find examples for some common CSS changes below.

> > movie coming soon.

!! Using 3rd Party Editors

You may find working in a actual code editor easier if you're making a lot of changes to either the css settings in DayBack or the [[translation]] settings
. Copy the text you're editing out of DayBack, paste it into your favorite editor, make your changes and then copy and paste it back.

Editors we like include [[https://panic.com/coda/ | Coda]] (for Mac) which has inline color pickers--always handy...

%center% %width=440% [[https://panic.com/coda/ |https://www.seedcode.com/rootimages/stikipad/dayback/coda.jpg]]

...and [[https://www.sublimetext.com/ | Sublime Text]] (all platforms) which offers great code completion and "multiple cursors" which are an absolute joy (shown with "next-skip" [[https://www.sublimetext.com/blog/articles/sublime-text-2-0-released | here]]).

! CSS Examples
July 03, 2015, at 07:50 PM by 142.4.217.187 -
Changed line 3 from:
The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendar's appearance and match the colors used in your own file.
to:
The look and feel of DayBack is controlled through CSS which you can edit to alter the calendar's appearance and match the colors used in your own file.
June 30, 2015, at 02:43 PM by 142.4.217.188 -
Changed line 7 from:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/css.png
to:
''Editing CSS is not yet enabled but will be soon.''
June 08, 2015, at 05:32 PM by 142.4.217.187 -
Changed lines 13-15 from:
-> .fc-event-time { \\
->
     display: none; \\
-> } \\
to:
-> .fc-event-time {
-->    display: none;
->  }
June 08, 2015, at 05:31 PM by 142.4.217.187 -
Changed lines 7-16 from:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/css.png
to:
%center% https://www.seedcode.com/rootimages/stikipad/dayback/css.png

!! How can I remove the start time from displaying?

If you don't want to see the event start time until you click on an event, you can edit the CSS as described above and then add this:

-> .fc-event-time { \\
->    display: none; \\
-> } \\

January 27, 2015, at 10:22 PM by 142.4.217.187 -
Changed line 3 from:
The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendars appearance and match the colors used in your own file.
to:
The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendar's appearance and match the colors used in your own file.
January 27, 2015, at 10:21 PM by 142.4.217.187 -
Changed line 1 from:
(:title Editing the Calendar's CSS:)
to:
(:title Editing the Calendar's Appearance:)
January 27, 2015, at 10:21 PM by 142.4.217.187 -
Changed line 5 from:
Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: [[Editing Themes]].
to:
Each CSS file is a unique theme for the calendar. You'll find tips for editing themes and a nice walkthrough video here: [[Editing Themes]].
Changed lines 3-5 from:
The look and feel of DayBack is controlled through a CSS file which you can edit to give the calendar your own skin. Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: [[Editing Themes]].
to:
The look and feel of DayBack is controlled through a CSS file which you can edit to alter the calendars appearance and match the colors used in your own file.

Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: [[Editing Themes]].
Changed line 1 from:
(:title Editing the Calendar's CSS;)
to:
(:title Editing the Calendar's CSS:)
Added lines 1-5:
(:title Editing the Calendar's CSS;)

The look and feel of DayBack is controlled through a CSS file which you can edit to give the calendar your own skin. Each CSS file is a unique theme for the calendar. You'll find tips for editing themes here: [[Editing Themes]].

%center% https://www.seedcode.com/rootimages/stikipad/dayback/css.png
(855) SEEDCODE
[email protected]
Follow us: