Follow

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;
}

0 Comments

Please sign in to leave a comment.