Common CSS design customisations

Copy and paste these in the Design > Custom Styling section of the Community Box dashboard.

Add a card background to profiles

Change the # colour code and spacing values as needed.

/* Add a card background to profiles */
[box] .box-entry-overview-container {
background: #ffffff !important;
padding: 0 20px 30px 20px !important;
box-sizing: border-box !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

/* Add spacing around profiles */
[box] .cbeb-content-container {
gap: 20px !important;
margin-top: 20px !important;
}

Round the corners of profile cards

Change the border-radius values to increase or decrease the rounding as needed.

/* Round profile card corners */
[box] .box-entry-overview-container {
border-radius: 30px !important;
}

Add a solid border around profiles

Change the # colour code and border width value as needed.

/* Add solid border around profiles */
[box] .box-entry-overview-container {
border: solid 1px #000000 !important;
}

Change the aspect ratio of the profile image

Change the aspect ratio as needed, for example 16:9 would be 16  / 9.

/* Set profile image aspect ratio */
[box] .cb-photo-uploaded {
height: auto !important;
aspect-ratio: 3 / 4 !important;
}

Add space below profile title

Change the margin value as needed.

/* Add space below profile title */
[box] .cb-beo-overview-title {
margin-bottom: 20px !important;
}

Increase or decrease the profile title font size

Change the font size value as needed.

/* Change font size on profile title */
[box] .cb-beo-overview-title {
font-size: 24px !important;
}

Increase or decrease the profile sub-title font size

Change the font size value as needed.

/* Change font size on sub-title */
[box] .cb-beo-overview-businessname {
font-size: 18px !important;
}