Common Custom CSS applied for Soapbox elements – Soapbox Support Center

The following are a list of commonly used Custom CSS adjustments for Soapbox elements. This CSS can be applied to the Custom CSS of a standard template.

Some of the following examples use only CSS. Some apply CSS in concert with changes to other elements in Soapbox.

1. Adjust the placement of the Edit button on all Directories List Display views across the site

This CSS moves the Edit button from the bottom of the List Display view of in the Directories app to the top right of the page. This code applies this change to all Directories on a site.

This code is only appropriate for views that are guaranteed to have one and only one record on the List Display view. This can include a My Contact or My Account view that filters records by the Contact Id or Account Id of a logged in user.

div.jsfSearch-srchLayBlog div.item-actions.clearfix {
  position: absolute;
  top: 0;
  right: 0;
}

2. Adjust the placement of the Edit button on specific Directories List Display views

This CSS moves the Edit button from the bottom of the List Display view of in the Directories app to the top right of the page. This code only applies this change to Directories with a menu item with 'editBtnTopRight' applied as the Page Class Suffix.

body.editBtnTopRight div.jsfSearch-srchLayBlog div.item-actions.clearfix {
  position: absolute;
  top: 0;
  right: 0;
}

3. Hide the Enrolling and Enroll buttons on the Classes detail view

This CSS hides the Enrolling and Enrolling buttons at the top of the Classes detail view.

.btnStatus {
  display: none;
}

.btnEnroll {
  display: none;
}

4. Hide the Classes Detail section on the Classes detail view

This CSS hides the Classes detail section on the Classes detail view. This is helpful if you are not using Courses as part of the Classes app.

#sectClassDetails-title {
  display: none;
}

5. Hide the Semester section on the Classes detail view

This CSS hides the Semester section on the Classes detail view. This is helpful if you are not using Semesters as part of the Classes app.

#sectHostedBy-semester-content {
  display: none;
}

6. Hide the "# weeks" element on the Classes detail view

This CSS hides the "# weeks" element on the Classes detail view.

span.time.weeks {
  display: none;
}

7. Display Days of the Week checkboxes horizontally on search form on the Search Classes view

This CSS changes the Days of the Week checkboxes on the search form of the Search Classes view from being vertically aligned to horizontally aligned.

#sform-vertical label {
  display: inline-block;
}

.controls-dow label {
width: auto !important;
}

8. Hide the header section of the template

This CSS hides the entire header section of the template which includes the logo.

div#header {
  display: none;
}

9. Hide the page title for a Forms or Directories page

This CSS hides the page title for a Forms or Directories page.

h1.componentheading {
  display: none;
}

10. Update styling of credit card fields on payments forms that use the Stripe payment processor

This CSS modifies the styling of the credit card fields on payment forms using Stripe. You can modify the individual values to ensure that they are consistent with other fields on your site.

If you wish to modify the text within the text fields, please submit a support ticket.

#card-element {
  background: #fff;
  border: 1px solid #ccc;
  color: #000;
  font-family: inherit;
  font-size: 16px;
  height: auto;
  line-height: 1;
  margin-bottom: 20px;
  padding: 6px;
}

11. Hide the right, left, and bottom border of div element that contains the Edit button on Forms app views

This CSS hides right, left, and bottom border of div element that contains the Edit button at the top of the page on Forms app views. This code applies this change to all Forms in edit view on a site.

div#appsNavBar-wrap {
	border: none!important;
}

12. Display Instructor image as a circle and constrain size on the Classes detail view

This CSS constrains the Instructor image to a specific size and renders it as a circle, regardless of file dimension.

img.instructor-image {
  width: 80px;
  height: 80px !important;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 10px;
}

13. Remove unordered list bullet image from Instructor section on the Classes detail view

This CSS constrains the Instructor image to a specific size and renders it as a circle, regardless of file dimension.

li.sectInstructors-content {
  background: none !important;
  padding: 0.3em 0 0.5em 0!important;
}

14. Format State pick list to match the box size and border of other fields in Contact Information section

When state pick list is enabled under the Contact Information, this CSS will make sure the bounding box matches the rest of the fields.

#rsvp_mailing_state {
    background:#fff;
    box-sizing:border-box;
    color:#313131!important;
    font-family:inherit;
    font-size:1em;
    height:55px!important;
    line-height:55px;
    padding:4px!important !important;
    border:1px solid #88B051!important;
    max-width:100%
}