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 profile picture size

Change the width and height values as needed.

/* Change profile picture size */
.cb-photo-uploaded {
    width: 300px !important;
    height: 300px !important;
}

Change the category and tag colours

Change the # colours for the text or the background colour as needed.

Categories

You might have multiple sets of tags; for example if you had a directory of restaurants you could have a category for "Cuisine", and a category for "Ordering Options". The CSS below is to change the colours for all tags within a category. To personalise it for your directory, change "Ordering Options" to the name of your category. These are case-sensitive so check if you've used capital letters or not.   

/* Change the colours for categories */
[category="Ordering Options"] {
background-color: #7b1fc7 !important; 
color: #ffffff !important; 
}

Tags

To change each individual tag colour, replace "Delivery" with the name of the tag you want to change, so for example if you had a tag for vegan restaurants it would be [tag="Vegan"]. These are case-sensitive so check if you've used capital letters or not.   

/* Change the colours for individual tags */
[tag="Delivery"] {
background-color: #7b1fc7 !important; 
color: #ffffff !important; 
}

Change the featured banner colours

Change the # colours for the text or the background colour as needed.

/* Change the colours for featured listing banner */
[feature-listing][container] [banner] {
background-color: #7b1fc7 !important; 
color: #ffffff !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;
}

Increase or decrease the profile bio font size

Change the font size value as needed.

/* Change bio font size */
[box] .cbeb-bio-snippet {
font-size: 16px !important;
}

Apply custom fonts to search and filtering boxes

Change the font name to your custom font as needed.

Note: You will need the font name in the format it's used in your website code, and the format can vary. If you're unsure of how to find this format in your code, get in touch and we can help!

/* Add custom font to search and tag pop up boxes */
.cbeb-modal *, [dialogbox] * {
    font-family: 'brandon-grotesque' !important;
}

Style profile "Read more" link as button

Change the values as needed

• background: sets the backround colour
• border: sets the border style, width and colour
• border-radius: sets the corner rounding
• padding: sets the top/bottom and left/right space within the button
• text-decoration: removes the underline from the link
• font-weight: makes the font more bold
• font-size: sets the font size
• color: sets the font colour
• margin: sets the space above and below the button
• opacity: sets the amount of fade on the button when hovered

/* Style profile "Read more" as button */
[box] .cb-beo-readmore {
background: #ffdc88 !important; 
border: solid 2px #000000;
border-radius: 10px !important; 
padding: 10px 15px !important; 
text-decoration: none !important; 
font-weight: 700 !important; 
font-size: 14px !important;
color: #000000 !important;
margin: 10px 0 !important;
}

/* Subtle button fade on hover */
[box] .cb-beo-readmore:hover {
opacity: 0.8;
} 

Left-align profile content on overview

If there's anything that you don't want left-aligned, just remove that section from the code below.

/* Left-align text bio */
[box] .cbeb-bio-snippet {
text-align: left !important;
}

/* Left-align tags */
[box] .cbeb-category-summary-container {
justify-content: flex-start !important;
}

/* Left-align profile image */
[box] .cb-photo-uploaded {
margin-left: 0 !important;
}

/* Left-align other profile content */
[box] .box-entry-overview-container {
align-items: flex-start !important;
}

Left-align profile content on popup

If there's anything that you don't want left-aligned, just remove that section from the code below.

/* Left-align profile image on popup */
[dialogbox] .cbeb-entry-image-input-container {
justify-content: flex-start !important;
}

/* Left-align bio on popup */
[dialogbox] .cbeb-entry-view {
text-align: left !important;
}

/* Left-align social media on popup */
[dialogbox] [socmed-list] {
justify-content: flex-start !important;
}

/* Left-align business information icons on popup */
[dialogbox] .cbeb-detailleft {
justify-content: flex-start !important;
}

/* Left-align connect button on popup */
[dialogbox] .cbeb-extra-button-row {
justify-content: flex-start !important;
}

/* Left align other profile popup content */
[dialogbox] .cbeb-entry-viewfield-container {
align-items: flex-start !important;
}

Increase width of popup on desktop

Change the width value as needed. You can also use a % value.

/* Increase popup width */
@media screen and (min-width: 511px) {
    .cbeb-modal-content {
        width: 750px !important;
    }
}

Align rows evenly on profile overview grid

This will line up rows within profile content to avoid an uneven or 'staircase' effect where longer titles or bios (for example) can mean that icons etc. underneath are staggered. You can also adjust the --profile-min-width value to increase or decrease the minimum profile width.

/* Align rows evenly on profile overview grid */
@media screen and ( min-width: 511px )
{
   [box] 
   {
      --profile-min-width: 210px;

      & .cbeb-content-container
      {
         display: grid !important;
         grid-template-columns: repeat(auto-fill, minmax(var(--profile-min-width), 1fr));
      }

      & .box-entry-overview-container
      {
         display: grid !important;
         grid-template-rows: subgrid;
         grid-row: span 10;
      }

      & .cb-beo-overview-businessname
      {
         word-break: break-all;
      }
   }
}

Increase or decrease the space between the toolbar and profiles

Change the margin value as needed.

/* Adjust space between toolbar and profiles */
[box] .cbeb-content-container {
margin-top: 40px !important;
}

Show two profiles per row on mobile

Change the profile image width and height values as needed.

/* Show two profiles per row on mobile */
@media screen and (max-width: 510px) {
[box] .cbeb-content-container {
flex-direction: row !important;
}
[box] .cb-photo-uploaded {
width: 125px !important;
height: 125px !important;
}
}

Hide marketing opt-in box and message

This hides the check box and text in the sign up box that says Would you like to receive updates about this community?

/* Hide marketing opt-in */
.cbeb-dlg-input-row:has(#cbeb-gdpr-optin-label) {
    display: none !important;
}