DayBackForFileMaker

Event Styles

DayBackForFileMaker.EventStyles History

Hide minor edits - Show changes to output

May 17, 2023, at 11:02 PM by 192.88.134.15 -
Changed lines 65-70 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png | https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png | https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/css1code.png | https://archive.seedcode.com/rootimages/stikipad/dayback/css1code.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/css1css.png | https://archive.seedcode.com/rootimages/stikipad/dayback/css1css.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]
Changed lines 81-84 from:
%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png | https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png | https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png]]
to:
%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/icon1code.png | https://archive.seedcode.com/rootimages/stikipad/dayback/icon1code.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/icon1screen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/icon1screen.png]]
Changed lines 93-94 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png | https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/usenames.png | https://archive.seedcode.com/rootimages/stikipad/dayback/usenames.png]]
Changed lines 103-108 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png | https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png | https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png]]
Changed lines 123-128 from:
%center% %newwin, width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png]]

%center% %newwin, width=445px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png]]

%center% %newwin, width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png]]
to:
%center% %newwin, width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png | https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png]]

%center% %newwin, width=445px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png | https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png]]

%center% %newwin, width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png | https://archive.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png]]
Changed lines 135-139 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png | https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcode.png | https://archive.seedcode.com/rootimages/stikipad/dayback/vacationcode.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png]]
May 17, 2023, at 11:00 PM by 192.88.134.15 -
Changed lines 3-4 from:
%center% %width=440% [[https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png | https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png]]
to:
%center% %width=440% [[https://archive.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png | https://archive.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png]]
Changed lines 29-30 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png | https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png]]
Changed lines 33-34 from:
%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
to:
%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
Changed lines 39-42 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png | https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png | https://archive.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png]]
Changed lines 51-53 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]
to:
%center% %newwin width=500px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/refundcalc.png | https://archive.seedcode.com/rootimages/stikipad/dayback/refundcalc.png]]

%center% %newwin width=455px% [[https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://archive.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]
October 11, 2019, at 10:02 PM by KC Embrey - Added #Unicode
Added lines 110-127:

----
[[#Unicode]]
!! Icon Example: Unicode Emoji Characters

You can also take advantage of Unicode emoji characters in DayBack. This allows you to have more fancy icons in your event summaries. Just keep in mind that these emojis are limited to your browser's support for them. [[https://www.iemoji.com]] is a good resource for finding emojis, verifying they work in your browser, and getting the decimal and hexadecimal values for your code.

*FileMaker supports a limited number of unicode emoji characters. If the icon is evaluated correctly in FileMaker using the "Char" function with the icon's '''decimal''' value as a parameter, you can use that directly in your summary. For example "Char ( 9208)" will show the pause icon.

*If FileMaker doesn't support the character, you can add it to DayBack as a CSS class, using the '''hexadecimal''' value for the character.

Here are some screenshots showing both examples and the results in DayBack:

%center% %newwin, width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalc.png]]

%center% %newwin, width=445px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCSS.png]]

%center% %newwin, width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png | https://www.seedcode.com/rootimages/stikipad/dayback/emojiCalendar.png]]
March 30, 2019, at 02:42 AM by 192.88.134.15 -
Deleted lines 2-7:
!!Important Note on Smart Quotes:

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").

----

Changed lines 123-129 from:
Note that the CSS contains some pretty long descriptions of the gradient background. You can just copy and paste those from any of the online CSS gradient generators. Here's one: %newwin% [[http://www.colorzilla.com/gradient-editor/ |colorzilla]].
to:
Note that the CSS contains some pretty long descriptions of the gradient background. You can just copy and paste those from any of the online CSS gradient generators. Here's one: %newwin% [[http://www.colorzilla.com/gradient-editor/ |colorzilla]].

----
!!Important Note on Smart Quotes:

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").

December 18, 2018, at 03:36 PM by 192.88.134.15 -
December 18, 2018, at 03:36 PM by 192.88.134.15 -
Changed line 97 from:
Note that you don't need to use the unicode name of the icon unless you're using "before" and CSS. You can just add the icon to your  "DBk_EventSummaryCalc" like this (notice how you can use the english name of the icon from the %newwin% [[http://fontawesome.io/cheatsheet/ | Font Awesome cheatsheet]]).
to:
Note that you don't need to use the unicode name of the icon unless you're using "before" and CSS. You can just add the icon to your  "DBk_EventSummaryCalc" like this (notice how you can use the english name of the icon from the %newwin% [[https://fontawesome.com/v4.7.0/icons/ | Font Awesome cheatsheet]]).
December 15, 2018, at 06:07 PM by 192.88.134.15 -
December 15, 2018, at 06:07 PM by 192.88.134.15 -
Changed line 91 from:
Note the content attribute: this is the content you'll add "before" the classed word "refund". While you can add literal text as the content (as well as images), you can also use a Font Awesome icon for the warning triangle. The icon is specified using it's unicode name and you can find a complete list of icons and their names on the %newwin% [[http://fontawesome.io/cheatsheet/ | Font Awesome cheatsheet]].
to:
Note the content attribute: this is the content you'll add "before" the classed word "refund". While you can add literal text as the content (as well as images), you can also use a Font Awesome icon for the warning triangle. The icon is specified using its unicode name and you can find a complete list of icons and their names on the %newwin% [[https://fontawesome.com/v4.7.0/icons/ | Font Awesome cheatsheet]]. (Some newer icons may not work as DayBack only supports through  version 4.6.2.)
Changed line 33 from:
Here's what that looks like in DayBack's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:
to:
Here's what that looks like in your source table's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:
September 04, 2018, at 07:18 PM by KC Embrey - Updated smart quotes note
Changed lines 3-4 from:
'''Important Note on Smart Quotes:'''
to:
!!Important Note on Smart Quotes:
Added lines 6-7:

----
September 04, 2018, at 07:17 PM by KC Embrey - Added note on smart quotes
Added lines 2-5:

'''Important Note on Smart Quotes:'''

Smart quotes (“ ”) are not compatible with CSS strings and will render the values invalid. When editing CSS themes in FileMaker, make sure to disable Smart Quotes (File Options -> Text -> Use smart quotes). Your opening and closing quotes should look identical in the editor (" ").
December 31, 2017, at 06:43 PM by 192.88.134.15 -
December 31, 2017, at 06:43 PM by 192.88.134.15 -
Changed line 115 from:
Here's a example that will style any events where the title contains the word "vacation".
to:
Here's an example that will style any events where the title contains the word "vacation".
December 28, 2017, at 01:46 AM by 192.88.134.15 -
Changed lines 43-44 from:
We hope these examples are helpful, but remember. Just because you ''can'' add lots of styles and colors... doesn't mean you should ;-)
to:
We hope these examples are helpful, but remember, just because you ''can'' add lots of styles and colors... doesn't mean you should ;-)
Changed line 71 from:
See how the calc just names the class but the CSS file gives the class its attributes. We also name spaced the class with "dbk_". This isn't absolutely required but you wouldn't want your class name to be something already in use in DayBack, of you'd end up styling that object instead. Actually, you should probably use a different prefix, like you own company name, so as to be absolutely sure you don't create a class that conflicts with something already in the calendar.
to:
See how the calc just names the class but the CSS file gives the class its attributes. We also namespaced the class with "dbk_". This isn't absolutely required but you wouldn't want your class name to be something already in use in DayBack, or you'd end up styling that object instead. Actually, you should probably use a different prefix, like you own company name, so as to be absolutely sure you don't create a class that conflicts with something already in the calendar.
December 15, 2017, at 06:36 PM by 192.88.134.15 -
Added lines 88-93:

!! Adding an Icon Without CSS

Note that you don't need to use the unicode name of the icon unless you're using "before" and CSS. You can just add the icon to your  "DBk_EventSummaryCalc" like this (notice how you can use the english name of the icon from the %newwin% [[http://fontawesome.io/cheatsheet/ | Font Awesome cheatsheet]]).

%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png | https://www.seedcode.com/rootimages/stikipad/dayback/usenames.png]]
December 12, 2017, at 06:18 PM by 192.88.134.15 -
Changed line 3 from:
%center% %width=440% https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png
to:
%center% %width=440% [[https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png | https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png]]
December 12, 2017, at 06:17 PM by 192.88.134.15 -
Added lines 1-2:
The new styling feature lets you use FileMaker calcs or CSS to style events. You can even combine both to bring CSS classes into effect when the results of a calculation are true.
Deleted lines 3-4:

The new styling feature lets you use FileMaker calcs or CSS to style events. You can even combine both to bring CSS classes into effect when the results of a calculation are true.
December 12, 2017, at 03:55 AM by 192.88.134.15 -
Changed line 73 from:
This looks like a complicated way to style things except that you can do a lot more in CSS than you can in inline styles. Most importantly, you can use the before:: attribute to add icons.
to:
This looks like a complicated way to style things except that you can do a lot more in CSS than you can in inline styles. Most importantly, you can use the "before" attribute to add icons.
December 12, 2017, at 03:53 AM by 192.88.134.15 -
Changed line 43 from:
We hope these examples are helpful, but remember. Just because you _can_ add lots of styles and colors... doesn't mean you should ;-)
to:
We hope these examples are helpful, but remember. Just because you ''can'' add lots of styles and colors... doesn't mean you should ;-)
December 12, 2017, at 03:53 AM by 192.88.134.15 -
Changed line 37 from:
You can have many inline styles, one after another. Here's an example of making the customer name blue as well and then increasing the font size:
to:
You can have many inline styles, one after another. Here's an example of also making the customer name blue and then increasing the font size:
December 12, 2017, at 03:52 AM by 192.88.134.15 -
Changed line 25 from:
The simplest way to style text is to wrap a whole field in an inline style. The tag for this is <dbk-css> and you use it like the span tag in html, adding the %newwin% [[https://www.w3schools.com/tags/tag_span.asp | style attribute]]. So to make some text bold we'd use <dbk-css style="font-weight: strong;">some text</dbk-css>.
to:
The simplest way to style text is to wrap a whole field in an inline style. The tag for this is <dbk-css> and you use it like the span tag in html, adding the %newwin% [[https://www.w3schools.com/tags/tag_span.asp | style attribute]]. So to make some text bold we'd use <dbk-css style="font-weight: bold;">some text</dbk-css>.
December 12, 2017, at 03:51 AM by 192.88.134.15 -
Changed line 5 from:
The examples below show a number of the options available, starting with the simplest: using in line styles. Each example builds on the one before it.
to:
The examples below show a number of the options available, starting with the simplest: using inline styles. Each example builds on the one before it.
December 12, 2017, at 03:50 AM by 192.88.134.15 -
Added lines 6-7:

--> '''Examples:'''
December 12, 2017, at 03:48 AM by 192.88.134.15 -
Deleted lines 0-1:
Coming soon!
December 12, 2017, at 03:48 AM by 192.88.134.15 -
Changed lines 111-113 from:
Code

Screenshot
to:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationcalc.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationcode.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/vacationscreen.png]]
December 12, 2017, at 03:43 AM by 192.88.134.15 -
Changed lines 107-110 from:
!! Adding Inline styles to your calculations

Into

to:
!! Changing the background color of an event

Here's a example that will style any events where the title contains the word "vacation".

Changed line 115 from:
Notes
to:
Note that the CSS contains some pretty long descriptions of the gradient background. You can just copy and paste those from any of the online CSS gradient generators. Here's one: %newwin% [[http://www.colorzilla.com/gradient-editor/ |colorzilla]].
December 12, 2017, at 03:40 AM by 192.88.134.15 -
Added lines 19-20:
--> [[#fill | Changing the background color of an event]]
Changed line 106 from:
to:
[[#fill]]
December 12, 2017, at 03:35 AM by 192.88.134.15 -
Changed lines 95-99 from:
Code

Screenshot

Note
to:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplecode2.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/iconexamplescreen.png]]

Note the substitution in "DBk_EventSummaryCalc": classes can't have spaces in them. You also want to be sure that you assign a class for each resource as DayBack will support multiple resources being assigned to an event. In that case, the resulting tab would look something like <dbk-css class="Truck_1 Jim_Smith"> with each class name separated by a space. That's what the substitution above does.
December 12, 2017, at 03:21 AM by 192.88.134.15 -
Changed lines 55-56 from:
[[#classes]] ----
to:
----
[[#classes]]
Changed lines 89-92 from:
!! Icon Example: colored truck for each of your resources

In this example your resources are trucks and you'd like to see which truck is assigned to a given delivery. The event color is already being used for
the status of the delivery, so you want to color the icon to be the color of the truck assigned.
to:
!! Icon Example: color coding by resources

In this example
your resources are trucks and you'd like to see which truck is assigned to a given delivery. The event color is already being used for the status of the delivery, so you want to color the icon to be the color of the truck assigned. This way you can have two colors: an event color for status and an icon color for the truck.

The key here is to assign a class with the same name as the truck. This way you can style each truck differently. The class is assigned in the "DBk_EventSummaryCalc" field and the styling is done in the %newwin% [[CSS | DayBack's CSS file]]
.
Changed line 99 from:
Notes
to:
Note
December 12, 2017, at 03:08 AM by 192.88.134.15 -
Changed line 55 from:
[[#classes]]----
to:
[[#classes]] ----
December 12, 2017, at 03:08 AM by 192.88.134.15 -
Changed lines 55-56 from:
----
[[#classes]]
to:
[[#classes]]----
December 12, 2017, at 03:07 AM by 192.88.134.15 -
Changed line 15 from:
--> [[#icon | Adding icons with classes]]
to:
--> [[#icons | Adding icons with classes]]
December 12, 2017, at 03:07 AM by 192.88.134.15 -
Changed lines 13-16 from:
to:
--> [[#classes | Assigning a class instead of inline styles]]

--> [[#icon | Adding icons with classes]]

Changed line 56 from:
to:
[[#classes]]
Changed line 74 from:
to:
[[#icons]]
Changed lines 88-89 from:

!! [[#iconexample]] Icon Example: colored truck for each of your resources
to:
[[#iconexample]] 
!!
Icon Example: colored truck for each of your resources
December 12, 2017, at 03:06 AM by 192.88.134.15 -
Changed lines 17-19 from:

!! [[#inline1]]The Basics: Adding Inline styles to your calculations
to:
[[#inline1]]
!!
The Basics: Adding Inline styles to your calculations
Changed lines 41-42 from:

!! [[#inline2]] Use FileMaker’s Substitute() function to style certain words when they appear
to:
[[#inline2]]
!!
Use FileMaker’s Substitute() function to style certain words when they appear
December 12, 2017, at 03:05 AM by 192.88.134.15 -
Added lines 9-13:
--> [[#inline1 | The basics of inline styles]]

--> [[#inline2 | Using the Substitute() function for inline styles]]

Changed lines 16-17 from:
!! The Basics: Adding Inline styles to your calculations
to:
----

!! [[#inline1]]The Basics: Adding Inline styles to your calculations
Changed line 42 from:
!! Use FileMaker’s Substitute() function to style certain words when they appear
to:
!! [[#inline2]] Use FileMaker’s Substitute() function to style certain words when they appear
December 12, 2017, at 03:04 AM by 192.88.134.15 -
Added lines 8-9:

--> [[#iconexample | Icon Example: color-coded trucks]]
December 12, 2017, at 03:03 AM by 192.88.134.15 -
Added lines 74-85:

----

!! [[#iconexample]] Icon Example: colored truck for each of your resources

In this example your resources are trucks and you'd like to see which truck is assigned to a given delivery. The event color is already being used for the status of the delivery, so you want to color the icon to be the color of the truck assigned.

Code

Screenshot

Notes
December 12, 2017, at 02:59 AM by 192.88.134.15 -
Changed lines 65-71 from:
Into

Code

Screenshot

Notes
to:
Using the same "DBk_EventSummaryCalc" as in the example above, you can change the CSS now to add an icon using %newwin% [[https://www.w3schools.com/cssref/sel_before.asp | before]].

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png | https://www.seedcode.com/rootimages/stikipad/dayback/icon1code.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png | https://www.seedcode.com/rootimages/stikipad/dayback/icon1screen.png]]

Note the content attribute: this is the content you'll add "before" the classed word "refund". While you can add literal text as the content (as well as images), you can also use a Font Awesome icon for the warning triangle. The icon is specified using it's unicode name and you can find a complete list of icons and their names on the %newwin% [[http://fontawesome.io/cheatsheet/ | Font Awesome cheatsheet]].

The full name of the icon is &#xf071, but you just need the part starting with the "f".
December 12, 2017, at 02:18 AM by 192.88.134.15 -
Added lines 42-71:

----

!! Adding a class instead of inline styles (then styling in CSS)

You don't have to add all your styles inline and you may find it more intuitive to just assign a class in the "DBk_EventSummaryCalc" field and then do your styling in DayBack's CSS file. (If you haven't worked with CSS in DayBack before, here's a %newwin% [[CSS | quick overview]].)

So here's what our red refund example looks like if it were done in with a class and CSS instead. The first screenshot is your "DBk_EventSummaryCalc" field and the second with the green text is DayBack's %newwin% [[CSS | CSS file]].

%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png | https://www.seedcode.com/rootimages/stikipad/dayback/css1code.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png | https://www.seedcode.com/rootimages/stikipad/dayback/css1css.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]

See how the calc just names the class but the CSS file gives the class its attributes. We also name spaced the class with "dbk_". This isn't absolutely required but you wouldn't want your class name to be something already in use in DayBack, of you'd end up styling that object instead. Actually, you should probably use a different prefix, like you own company name, so as to be absolutely sure you don't create a class that conflicts with something already in the calendar.

This looks like a complicated way to style things except that you can do a lot more in CSS than you can in inline styles. Most importantly, you can use the before:: attribute to add icons.

----

!! Adding icons

Into

Code

Screenshot

Notes
December 12, 2017, at 02:01 AM by 192.88.134.15 -
Changed lines 35-36 from:
A variation on styling a specific field is to apply inline styles to just a work or phrase when it appears:
to:
A variation on styling a specific field is to apply inline styles to just a work or phrase when it appears. Here we'll substitute the word "refund" for the word wrapped in an inline style:
Changed lines 41-43 from:
Notes
to:
Note that we did this further down in the calc so that it would apply to the word refund wherever it appeared, be that in the title or description.

----
December 12, 2017, at 01:59 AM by 192.88.134.15 -
Changed lines 7-8 from:
The examples below show a number of the options available, starting with the simplest: using in line styles.
to:
The examples below show a number of the options available, starting with the simplest: using in line styles. Each example builds on the one before it.
Changed lines 19-20 from:
%center% %newwin width=460px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
to:
%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
Changed lines 33-39 from:
!! Adding Inline styles to your calculations

Into

Code

Screenshot
to:
!! Use FileMaker’s Substitute() function to style certain words when they appear

A variation on styling a specific field is to apply inline styles to just a work or phrase when it appears:

%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundcalc.png]]

%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/refundscreen.png]]
December 12, 2017, at 01:49 AM by 192.88.134.15 -
Changed lines 9-10 from:
!! Adding Inline styles to your calculations
to:
!! The Basics: Adding Inline styles to your calculations
Added lines 30-31:

----
December 12, 2017, at 01:48 AM by 192.88.134.15 -
Changed lines 19-20 from:
%center% %newwin width=440px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
to:
%center% %newwin width=460px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
Changed line 27 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png]]
to:
%center% %newwin width=455px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png]]
December 12, 2017, at 01:47 AM by 192.88.134.15 -
Changed line 19 from:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
to:
%center% %newwin width=440px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
December 12, 2017, at 01:47 AM by 192.88.134.15 -
Changed lines 15-16 from:
Code
to:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc.png]]
Changed lines 19-20 from:
Screenshot
to:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen.png]]
Changed lines 25-28 from:
Code

Screen

to:
%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldcalc2.png]]

%center% %newwin width=500px% [[https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png | https://www.seedcode.com/rootimages/stikipad/dayback/inlineboldscreen2.png]]

Deleted line 30:
Changed line 49 from:
Notes
to:
Notes
December 12, 2017, at 01:41 AM by 192.88.134.15 -
Changed lines 7-14 from:
The examples below show a number of the options available, starting with the simplest: using FileMaker's built in text styling functions.

!! Using FileMaker's own Text Styling Functions

Into

Screenshot

to:
The examples below show a number of the options available, starting with the simplest: using in line styles.

!! Adding Inline styles to your calculations

The simplest way to style text is to wrap a whole field in an inline style. The tag for this is <dbk-css> and you use it like the span tag in html, adding the %newwin% [[https://www.w3schools.com/tags/tag_span.asp | style attribute]]. So to make some text bold we'd use <dbk-css style="font-weight: strong;">some text</dbk-css>.

Here's what that looks like in DayBack's "DBk_EventSummaryCalc" field, which is the calc you'll be editing whenever you want to style text in DayBack:

Changed lines 17-50 from:
Notes
to:
And here's what you'd see on the calendar: all the related contact names are bold.

Screenshot

Note that this could have been done inside the original "cont" variable, but we find it easier to declare the variable once for the content and again for the styling. You'll see that we also wrap the style definition itself in the Quote() function as we find that easier than trying to escape the quotes.

You can have many inline styles, one after another. Here's an example of making the customer name blue as well and then increasing the font size:

Code

Screen

We hope these examples are helpful, but remember. Just because you _can_ add lots of styles and colors... doesn't mean you should ;-)


!! Adding Inline styles to your calculations

Into

Code

Screenshot

Notes

!! Adding Inline styles to your calculations

Into

Code

Screenshot

Notes
December 11, 2017, at 04:11 AM by 192.88.134.15 -
Changed lines 1-17 from:
Coming soon!
to:
Coming soon!

%center% %width=440% https://www.seedcode.com/wp-content/uploads/2017/12/StylingDetail2.png

The new styling feature lets you use FileMaker calcs or CSS to style events. You can even combine both to bring CSS classes into effect when the results of a calculation are true.

The examples below show a number of the options available, starting with the simplest: using FileMaker's built in text styling functions.

!! Using FileMaker's own Text Styling Functions

Into

Screenshot

Code

Notes
December 11, 2017, at 03:35 AM by 192.88.134.15 -
(855) SEEDCODE
[email protected]
Follow us: