Changing the widget width

When using widgets to display information from your Wild Apricot database on another site, you may want to change the default size of the iframe containing the widget.

To adjust the width of all widgets, hover over the Website menu and select the CSS option. On the screen that appears, enter the appropriate code for your theme (see below), then click Save to preview your customization within the preview area on the right. When you are finished making your changes, click Cancel to close the screen.

For Treehouse, Clean Lines, White Space, and Dark Impact themes

.widgetMode .s1_grid_12,
.widgetMode .container_12
   /* change 400px to any desired value */
   width: 400px !important;;
   margin-left: 0 !important;

For all other themes

.widgetMode .cnPrimaryContentContainer,
.widgetMode .cnPrimaryContentBlock1ContentHolder,
.widgetMode .cnPrimaryContentBlock1Content,
.widgetMode .cnContentContainer,
.widgetMode .cnClipMainContainer,
.widgetMode .cnMainContainer .d9MainContainer,
.widgetMode .cnMainContainer .cnContentContainer .cnPrimaryContentContainer
   /* change 400px to any desired value */
width: 400px !important;
.widgetMode .cnMainContainer, .widgetMode .cnMainContainerTopCorners.cornersContainer, .widgetMode .cnMainContainerBottomCorners.cornersContainer
   /* change 424px to any desired value. It should be more then 400px to set some space for margins/paddings */
width: 424px !important;
.widgetMode .cnPrimaryContentContainer
float: left;


Please sign in to leave a comment.


About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Wild Apricot Inc. 
144 Front Street West 
Suite 725 
Toronto, Ontario M5J 2L7