YouTube Player

The Themekit video player displays a YouTube video in this example and has the option to use a dark or light skin
The player is set for 16:9 aspect ratio video files by default but this can be changed for other aspect ratios such as the old 4:3 and cinema style HD formats.
There is an option to insert the video title in the same container for better SEO.
Video Hosting
Self hosted video is much better than YouTube video for use on responsive pages. YouTube video requires extra server requests and, in its standard form, cannot offer the option for high and low resolution videos.
YouTube to MP4
Don't force your mobile visitors to download a large file. Convert YouTube to MP4 and offer two versions - SD and HD.
Grab the YouTube URL, open the online downloader in the browser, paste in the URL, convert and download the MP4.
The standard file used in the example is 426 × 240px with a file size of 8MB and the HD file is 854 × 480px with a file size of 23MB.

ThemeKit Icon Links

The toolbar above uses Ionicon icons. The widget has a link to the Ionicon cheatsheet which is hosted on the EverWeb Widgets website. Click the Ionicon (circle with dot) icon to check out the range.
Each link can have a different background color. The icons can be set globally for size, color and hover color.
The icons can be square with a control for border radius or made round by checking a box.
Spam Protected Email Link
The optional email link has separate fields for the email name, domain and domain extension. The @ and the period are inserted using Javascript. This prevents spammers using scrapping software from harvesting the email address.
Phone
The optional phone link can be hidden on computers and tablets if required and only appear on mobile phones. If it is shown on these devices, the phone number can be entered into the title field to show on hover.
NOTE: If a Mac user clicks the phone icon when using a computer or iPad, FaceTime will open and they can contact the site owner that way.

HTML Symbols

There are literaly hundreds of HTML symbols that can be used in web design. These can be entered as HTML code or converted to use in CSS and Javascript.
CSS has a number of list styles including the default disc, square, numbers, letters etc but what if a checkmark, smiley face or a shamrock is required?
Pseudo Elements
A CSS pseudo-element is used to style specified parts of an element. In this case the ::before pseudo-element is used to insert the symbol before the list item text.
Inserting it in a pseudo-element allows it to be positioned and styled.
Synbols ☘
Symbols are available in various guises - unicode, hex code, HTML entity and HTML code. The HTML code version can be converted to CSS or Javascript code..
Note that the hex code, HTML entity and HTML code versions of any synbol can be used inline with text in any widget text box like this …
☻
… using a span with inline styles like this …
<span style="line-height:36px;font-size:30px;color:#FF00FF">&#9787;</span>

ThemeKit Fancy List

Creating a list using HTML symbols & entities …

• Add a list item and select it in the list
• Enter the item text in the box
• Select the item in the list again and it will be editable
• Enter an item number or other identifier
• Click the "Get Synbol" button to open the site with the HTML Symbols
• Browse to the required symbol and double click it to open in a new window
• Copy the CSS code and paste it into the "Symbol Code" box in the widget settings

Cookie Bar

The ThemeKit Cookie Bar is used to comply with the EU data collection regulations. The bar is fixed at the bottom of the browser/device window and has a text block and two link tabs.
The left link is optional and can be used to navigate to a page listing the types of data collected or to a page explaining the regulations.
The bar is full width but the container with text and links is centered with and has a maximum width control. The font can be Google hosted with a web safe fallback and the background color has an opacity slider.
The bar should be inserted as the last item on the page below the footer widget.
Animation
The bar can animate in and up from the bottom by checking a box and setting the animation time and delay in seconds.
Cookie
There is a control to set the number of days before the warning appears again once a visitor has dismissed it. The default is 30 days.
The last control in the widget settings turns on the script that creates the cookie prior to publishing
Testing
When testing the widget in the browser, note that - once it is dismissed - the browser cache will need to be cleared before it will reappear.