Spider Flash Calendar

Step by step guide


Step 4: Creating Themes

4.1 On the left menu select Spider FC > Spider FC Themes > Add a Theme. Note that you can fill out all the parameters from scratch (‘Custom’ in the ‘Inherit from theme’ drop-down menu) or modify the parameters of one of the existing themes (choose the theme from the ‘Inherit from theme’ drop-down menu).
4.2 You can also use one of the existing themes, with the possibility to modify them. You can find the list of the themes under Spider FC Themes. To apply the theme, set it as ‘Default’. To view or edit the parameters of the theme, simply click on the theme title or “Edit”. If you want to reset the parameters to their original values, there is a blue “Reset Theme” button on the bottom of the ‘Header Parameters’ section.

General Parameters
4.3 Title. Add a title.
4.4 Start week with Monday. Choose whether to start the week from Monday or from Sunday.
4.5 Date format. Define the format of the date (m=Month, d=Day, y=Year, and t=Time).
4.6 Date format short. Define the short format of the date.
4.7 Time 12 Hours. Choose whether to use 12-hour time format or not.
4.8 Width in the large mode. It is possible to switch between the “large” and the “small” modes of the calendar in front end. This field allows defining the width of the calendar in the large mode.
4.9 Height in the large mode. Define the height in the large mode.
4.10 Width in the small mode. Define the width in the small mode.
4.11 Height in the small mode. Define the height in the small mode.
4.12 Size mode at start. Choose which size mode the calendar starts with.
4.13 View mode at start. Choose which view mode the calendar starts with: days, months, years.
4.14 Main background color (gradient). Choose the main background color of the calendar by specifying the two extreme points of the linear color gradient.
4.15 Main border radius. This option is for making the corners of the calendar border round. Its value signifies the radius of the circle that fits in the corner of the border box. If you do not want to round the corners at all, you need to type in ‘0’.
4.16 Main border color. Choose the color of the main border of the calendar.

Header Parameters
4.17 Header Height. Define the height of the calendar header.
4.18 Header Padding. Define the padding of the header, which is the size of the top and bottom margins of the header.
4.19 Header Background Color (gradient). Choose the background color for the header by specifying the two extreme points of the linear color gradient.
4.20 Header border color. Choose the color of the header border.
4.21 Header content color. Choose the color of the header content (month, year, arrows, etc.).
4.22 Header content stroke color. You can choose a separate stroke color for the header content if you want to stroke the edges of the letters with distinct color.
4.23 Header content font size. Define the font size of the header content.

Body Parameters
4.24 Weekdays text color. Choose a color for the names of the days of the week.
4.25 Weekdays text font size. Define the font size of the names of the days of the week.
4.26 Days Background Color (gradient). Choose a background color for the section with calendar days by specifying the two extreme points of the linear color gradient.
4.27 Background Color of a Cell With Event With No Priority. Choose a background color for a cell with an event with no priority.
4.28 Background Color of a Cell With Event With Low Priority. Choose a background color for a cell with an event with low priority.
4.29 Background Color of a Cell With Event With Medium Priority. Choose a background color for a cell with an event with medium priority.
4.30 Background Color of a Cell With Event With High Priority. Choose a background color for a cell with an event with high priority.
4.31 Cell content font size. Define the font size of the cell content.
4.32 Cell content color. Choose ? color for the cell content.
4.33 Current day cell border color. Choose the border color for the current day cell.
4.34 Show number of events. Choose whether to show the number of events at the bottom of each cell with one or more events or not.
4.35 Number of events font size. Define the font size of the event number indicator.
4.36 Number of events color. Choose a color for the event number indicator.
4.37 Events List Header Height. When you click on a particular day with one or more events, you see the list of events for that day (event information can be accessed by clicking on the event header in the list). Define the height of the list header.
4.38 Events List Header Background Color (gradient). Choose a background color for the list header by specifying the two extreme points of the linear color gradient.
4.39 Events List Header Content Color. Choose the color of the content (indicating the number of events in the list) for the list header.
4.40 Events List Header Content Font Size. Define the font size of the header content.
4.41 Event Header Height. Define the height of the event header.
4.42 Event Header content Font Size. Define the font size of the header content.
4.43 Event Header content Color. Choose the color of the header content.
4.44 Event Content Background Color (gradient). Choose a background color for the event content by specifying the two extreme points of the linear color gradient.
4.45 Event Content Dates Font Size. Define the font size of the event dates.
4.46 Event Content Dates Color. Choose a font color for the event dates.
4.47 Event Content Description Font Size. Define the font size of the event description.
4.48 Event Content Description Color. Choose a font color for the event description.
4.59 Footer Height. Define the height of the calendar footer.
4.50 Footer content Color. Choose a color for the footer content.

Media Parameters
4.51 Media Autoplay at start. Choose whether the media attached to the event automatically starts the playback or not.
4.52 Media Scale Type. Choose the scale type for the media (how it fits into the event media area): inside (fits to the media area), outside (centers the media on the media area), stretch (stretches the media to fit the media area).
4.53 Media change Duration. Define the media change duration in seconds (e.g. proceed to the next image every 4 seconds).
4.54 Video Default Volume. Define the default volume position of the video.
4.55 Video Autoplay in Media Slider. Choose whether the video automatically starts the playback on page opening or not.
4.56 Media Background Color. Choose a background color for the media area.
4.57 Media Control Buttons Background Color. Choose a background color for the control buttons of the media.
4.58 Media Control Buttons Background Transparency. Define the background transparency level of the media control buttons.
4.59 Media Control Buttons Color. Choose a color for the media control buttons.
4.60 Media Control Buttons Transparency. Define the transparency level of the media control buttons.


Previous Step Next Step

Never miss important news and exclusive offers!

Join Our Community