Layouts

The Branding Tool allows you to customize the colors for the background and text of each of the visual elements on your Site. You have two options to choose a color: selecting from the given drop down menu of color choices, or use the dropper tool to match a color to an existing site. This tool can be useful if you want the Event Manager Calendar Site to reflect the look of your organization's website. *Note: If you would like to have the Branding Tool feature turned on in your account, please contact the Client Service Center at 1-877-655-DUDE (3833).

 

Visual elements and fonts

• To use the given color choices in Event Manager, click on a color block from the drop down color grid.
• To match a color to one on an existing site, click on the dropper icon (). This opens the color picker window, where you type the URL of the site you want to match, and hit Enter on your keyboard.

 

 

• Once the site opens, use your mouse to click on the color you want to match. A bar at the bottom of the window will show the color you selected. Once you select the correct color, click OK.
• Once a color is selected, the corresponding image to the right of that element will show an example of what that will look like. There is a different color selection option for the background color and the font color in each example.

Background

The Background section allows you to change the background settings of your Event Manager calendar site. There are three options for the background of the site:

• Use default background: This option uses the default white background on the site.
• Use custom color: This option lets you choose from a drop down menu of available colors.

• Use custom image: This option lets you upload an image of your choice from either your computer or your Media Library. Once you have selected the image, you can choose the position of the image, how the image should repeat on the background, and whether background scrolling should be enabled.

 

Preview

The Preview section allows you to view the style and color choices you have selected before you save them.

1. To view a preview including any updates you have made so far, click the Generate button.
2. Click Reset to Default to remove your style and color choices.
3. Once you select the Branding Tool options of your choosing, click Save at the bottom of the screen.

 

The Navigation Menu allows you to add various links, or drop down menus of multiple links, to your Event Manager site. This can be useful if you would like your Event Manager calendar site to offer the same navigation options as your organization's website. *Note: If you would like to have the Navigation Menu feature turned on in your account, please contact the Client Service Center at 1-877-655-DUDE (3833).

1. Click Add Navigation Item.
2. Enter a name for the navigation item in Item Name.
3. Select Yes or No next to "Is this a dropdown menu?"
   1. If you select No, you will simply enter the single destination URL for this navigation item.
      

   
   

   2. If you select Yes, you will have the opportunity to enter up to 15 menu items, entered as URLs, for the drop down menu.
      

   
   

   3. If needed, use the arrow icons to move the item, or the X icon to delete an item.

4. Click OK to save this navigation item.
5. Up to 13 navigation items can be added. Use the arrows to rearrange the order of the navigation items, or click on the caret icon to open the list of additional fields associated with that navigation item.
6. Once you select the Navigation Menu options of your choosing, click Save at the bottom of the screen.

 

 

The Configure Layout section gives you various options to further customize your Site. The options vary depending on which layout type you selected in the Manage Layouts section. Click the question mark icon () to learn more about each option.

• Calendar Logo - This logo will be displayed in the upper left most corner of your layout. You can either upload an image or use a hosted image on a website. Supported file formats include GIF, JPEG and PNG.

  • Upload Logo - Click the Upload or Browse Media Library link to add an image file from your computer or the Media Library as your site logo.

  • URL or Path - Enter the URL or path to your hosted image to display as the calendar logo, such as http://wwww.mydomain.com/logo.png.

• Calendar Logo - Target URL - Enter the web address (URL) that you would like a visitor to be taken to when they click on the site logo.
• Tag Line - Enter a headline describing your calendar to appear at the top of your calendar. This text will replace the default "Event Community" displayed on the right corner of the layout.
• Enable Comment Feed via Disqus - Disqus, a third-party engagement tool, allows for creating a comment board for each event on your calendar. You will need to have created a Disqus account before you can enable comments on your events.

• Customize Your CSS Code - Here you can provide modifications to the layout's Cascading Style Sheet (CSS). Use this to change colors, fonts, and more. Click the Expand link at the bottom right corner of the field to view the current CSS. **Note: JavaScript and CSS code is not supported by Dude Solutions. This is an optional tool provided for those clients who choose to use it. Dude Solutions will not be able to create an update custom JavaScript or CSS code created by a client or a third party.

• JavaScript - Add additional code to your layout using JavaScript. Click the Expand link at the bottom right corner of the field to view the current JavaScript Code. *Note: JavaScript and CSS code is not supported by Dude Solutions. This is an optional tool provided for those clients who choose to use it. Dude Solutions will not be able to create or update custom JavaScript or CSS code created by a client or a third party.

• Featured Events - Customize the Featured Events section of the calendar using JavaScript Code in this field. Click the Expand link at the bottom right corner of the field to view the current JavaScript Code. *Note: JavaScript and CSS code is not supported by Dude Solutions. This is an optional tool provided for those clients who choose to use it. Dude Solutions will not be able to create an update custom JavaScript or CSS code created by a client or a third party.

• Calendar Display Options - Select which views your site visitors will be able to choose from to view events; Summary View, Grid View, and List View.

  • Summary View displays your events in ascending order while prominently featuring the event summary and primary image uploaded for that event. This view also displays the event location and links to email, print, remind, and download the event.

  • Grid View is a traditional calendar grid with rows and columns representing days of the month.

  • List View displays your events in ascending order and only displays the event title, event date(s), and event time(s). This view also displays links to share the event via Facebook, Twitter, or Email, as well as a link to download the event.

• Default Calendar Display - Select which of the three display options you would like to be the default when someone visits your calendar site.
• Grid View Show All - Choose how events will show on the grid view of the public calendar. If you enable this option, all events will show, expanding the size of that day on the calendar. If you do not enable this option, only ten lines of text will show, and a link at the bottom will allow a user to view the remaining events.

 

Grid View Show All Enabled	Grid View Show All Disabled

 

• Events Per Page - When using the Event Manager Default layout, the event List View and Summary View utilize a paging feature. This will show a number of events per page that match the search range, rather than showing a list of 1000 events. Choose the number of events that will be displayed per page when visitors navigate to your site. The default number of events that will be displayed per page is 125. *Note: The minimum number of events to be displayed per page is 10, and the maximum allowable number of events per page is 1,000.

• Once you select the Configuration options of your choosing, click Save at the bottom of the screen.

 

The Navigation Menu allows you to add various links, or drop down menus of multiple links, to your Event Manager site. This can be useful if you would like your Event Manager calendar site to offer the same navigation options as your organization's website. *Note: If you would like to have the Navigation Menu feature turned on in your account, please contact the Client Service Center at 1-877-655-DUDE (3833).

1. Click Add Navigation Item.
2. Enter a name for the navigation item in Item Name.
3. Select Yes or No next to "Is this a dropdown menu?"
   1. If you select No, you will simply enter the single destination URL for this navigation item.

   

   2. If you select Yes, you will have the opportunity to enter up to 15 menu items, entered as URLs, for the drop down menu.

   

   3. If needed, use the arrow icons to move the item, or the X icon to delete an item.
4. Click OK to save this navigation item.
5. Up to 13 navigation items can be added. Use the arrows to rearrange the order of the navigation items, or click on the caret icon to open the list of additional fields associated with that navigation item.
6. Once you select the Navigation Menu options of your choosing, click Save at the bottom of the screen.

 

• Calendar Logo - This logo will be displayed in the upper left most corner of your layout. You can either upload an image or use a hosted image on a website. Supported file formats include GIF, JPEG and PNG.
  • Upload Logo - Click the Upload or Browse Media Library link to add an image file from your computer or the Media Library as your site logo.
  • URL or Path - Enter the URL or path to your hosted image to display as the calendar logo, such as http://wwww.mydomain.com/logo.png.
• Default Image - This image will be displayed as the background for events that were created without an image. Enter the full path (www.yourwebsite.com/yourdefaultimage.png) to your default image file. Supported file formats include GIF, JPEG and PNG.
• Mode - The mode is how the calendar determines how to check for new events.  There are two options:
  • Standard - The calendar will loop through all events occurring within the default search range. The calendar will only check for new events when the page is refreshed.
  • Digital Signage - The calendar will loop through all of the events and check for new updates only after reaching the number of cycles specified in the Refresh after field.
• Refresh after (# of cycles) - Enter the number of times the calendar should loop through events prior to checking for new updates.
• CSS - Here you can provide modifications to the layout's Cascading Style Sheet (CSS). Use this to change colors, fonts, and more. Click the Expand link at the bottom right corner of the field to enter or paste new CSS code.
• JavaScript - Add additional code to your layout using JavaScript. Click the Expand link at the bottom right corner of the field to enter or paste new JavaScript Code.
• Default Calendar Display - Choose the view that will be displayed to your site visitors when they navigate to your site. There are two available options:
  • Carousel View will display your events one at a time and automatically advance to the next event. Once all events have been displayed, it will restart and loop through the events again. This is similar to a PowerPoint presentation set to repeat.
  • List View will display multiple events for a given period of time. This is an interactive view that allows visitors to search for events.
• Once you select the Configuration options of your choosing, click Save at the bottom of the screen.