Rounded corners on spuds

To better match the design of your site or just because you prefer it, you can customize event and object detail popups and some control and promotion spuds by rounding the border corners.

What are event and object detail popups?

I need a refresher on the difference between control and promotion spuds.

Topic links

• Which spuds have rounded corner support
• How to round spud corners
• Spud-specific tips for rounding corners

Which spuds have rounded corner support

• Detail popup spuds
  • Event detail popup
  • Object detail popup
• Control spuds
  • Calendar List
  • Go to Date
  • Filter
  • Location Search
  • Search
• Promotion spuds
  • Day Summary
  • Photo Upcoming
  • Upcoming Date Table
  • Upcoming Events
  • Upcoming Grouped

For tips on rounding specific spud's corners, in the Tips table, find the spud you want to customize.

How to round spud corners

When you round corners for detail popup, control, and promotion spuds, you're rounding corners on the spud borders. If you set a spud's border size to 0px (zero pixels), the rounded border setting won't have any effect.

If you expect to typically use rounded corners on spuds that support them, you can set a base base border corner rounding amount. This corner rounding setting will then be applied automatically to each spud with rounded corner support that you subsequently add.

Tip The base corner rounding setting is also automatically applied to spuds you added in the past unless you already set a custom corner rounding amount.

Even with the base setting in place, you can always change the rounded corner setting on a spud-by-spud basis.

How do I set base styles?

Click a link for detailed instructions to set rounded corners on:

• Control and promotion spuds.
• Event and object detail popups.

How to round corners on control and promotion spuds

The following instructions assume that you already published the calendar for which you're rounding corners.

Bad assumption. I need help publishing a calendar.

To set rounded corners for individual spuds

1. In the editing environment, make a published calendar active. Click Publish Settings.
2. In the Publishing Control Panel, click the Control Spuds or Promotion Spuds tab.

   If you don't know how to add and customize spuds, take a look at this overview topic before you continue.

3. If you haven't yet added the spud you want to customize, add it now, and then go on to the next step.

   If you already added the spud, find the spud in the list, and then click Edit Settings & Styles.

4. On the Edit Settings... page, click the Styles tab. Scroll to the bottom of the tab to the Border Rounded Corners section.

   

5. Set corner rounding to the pixel amount you want.

   Tips

   • Rounded corner settings work in connection with other spud settings. For tips about rounded corners and specific spuds, see the Tips table.
   • If you set border corner rounding on a base level, that setting will be reflected here. Learn more about base settings.
6. At the bottom of the form, click Preview to preview the spud's rounded corners.

   Tip If you don't see a border around the spud, the spud's general border size setting must be 0px (zero pixels). In the General or Body section of the Styles tab, set the border size to one or more pixels.

7. When you're satisfied with the settings, at the bottom of the form, click OK.

How to round corners on detail popups

The following instructions assume that you already published the calendar for which you're rounding corners.

Bad assumption. I need help publishing a calendar.

To set rounded corners for detail popups

1. In the editing environment, make a published calendar active. Click Publish Settings.
2. In the Publishing Control Panel:
   • If you're customizing an event detail popup, click the Calendar Spuds tab. Scroll down to the Popup Event Detail Spud section.
   • If you're customizing an object detail popup, from the Objects drop-down list, select the appropriate object.

     

     Scroll down to the Popup [Object name] Detail Spud section.

3. Click Edit Settings & Styles.
4. On the Edit Settings... page, click the Styles tab. Scroll to the bottom of the tab to the Border Rounded Corners section.

   

5. Set corner rounding to the pixel amount you want.

   Tips

   • Rounded corner settings work in connection with other settings. For tips about rounded corners and specific spuds, see the Tips table.
   • If you set border corner rounding on a base level, that setting will be reflected here. Learn more about base settings.
6. At the bottom of the form, click Preview to preview the popup's rounded corners.

   Tip If you don't see a border around the popup, the spud's general border size setting must be 0px (zero pixels). In the General section of the Styles tab, set the border size to one or more pixels.

7. When you're satisfied with the settings, at the bottom of the form, click OK.

Spud-specific tips for rounding corners

For all spuds, you set the corner rounding amount in the Border Rounded Corners section at the bottom of the Styles tab.

If you aren't sure what the Styles tab is, read these step-by-step instructions.

Spuds	Settings and tips	Examples
Event Detail Popup Object Detail Popup	To see rounded corners, in the General section, set Border size to at least 1px.	Event detail popup 3px corner rounding 1px border Object detail popup 5px corner rounding 2px border
Calendar List	To see rounded corners, in the General section, set Border size to at least 1px. You set the header and calendar list area border colors separately. To eliminate the line between the header and search box, in the Header section, set Border bottom to 0px. The footer has no border. Tip Calendar colors in the Calendar List spud reflect your custom event color settings. Learn more.	Calendar List spud 3px corner rounding 2px border with 0px header bottom border
Filter	To see rounded corners, in the General section, set Border size to at least 1px. The border color you set in the Header section applies to the border around the whole spud. To eliminate the line between the header and search box, in the Header section, set Border bottom to 0px. The footer has no border. In the single-value version, you can't control the border color or rounding for the drop-down options list.	Multiple values Filter spud 4px corner rounding 2px border with 2px header bottom border Single value Filter spud 5px corner rounding 1px border with 2px header bottom border
Go To Date Search	To see rounded corners, in the General section, set Border size to at least 1px. The border color you set in the Header section applies to the border around the whole spud. To eliminate the line between the header and search box, in the Header section, set Border bottom to 0px. You can hide the built-in header by deleting Label text on the Settings tab. Tip To surround the search box and button with a border, set the Border bottom setting in the Header section to at least 1px.	Go To Date spud (built-in header) 5px corner rounding 1px border 1px header bottom border Search spud Hidden built-in header (custom header added to the webpage) Background color set in the Search Text Box section on the Styles tab 5px corner rounding 1px border
Location Search	Border and rounded corner settings apply only when you select the Multiple Lines layout setting on the Settings tab. To see rounded corners, in the General section, set Border size to at least 1px. The border color you set in the Header (Multi Line Only) section applies to the border around the whole spud. To eliminate the line between the header and search box, in the Header (Multi Line Only) section, set Border bottom to 0px. Tell me more about Location Search spuds.	Multi-line Location Search spud 3px corner rounding 0px header bottom border
Day Summary	To see rounded corners, in the General section, set Border size to at least 1px. Tip If you turn on popup details for the Date Finder, the Day Summary spud serves as the popup. Be sure to preview Day Summary rounded corner settings by hovering over a Date Finder date. You can also use a Day Summary spud independently of the Date Finder. Learn more about Date Finder and Day Summary spuds.	Day Summary spud 6px corner rounding 1px border
Photo Upcoming Upcoming Date Table Upcoming Grouped	To see rounded corners, in the General section, set Border size to at least 1px. The border color you set in the General section applies to the border around the whole spud, including the footer. To eliminate the line above the footer, in the Footer section, set Border top size to 0px.	Photo Upcoming spud 4px corner rounding 2px border 0px top border on footer Upcoming Date Table spud 3px corner rounding 2px border 1px top border on footer
Upcoming Events	To see rounded corners, in the Body section, set Border size settings to at least 1px. You can set header, body, and footer border sizes and colors separately. You can set top, right, bottom, and left border sizes individually. To eliminate the line above the footer, in the Footer section, set Border size top setting to 0px and in the Body section, set Border size bottom setting to 0px.	Upcoming Events spud 4px corner rounding 1px border settings except for a 2px border between the body and footer (2px bottom border setting in the Body section, 0px top border setting in the Footer section)