Common Custom CSS applied for Soapbox elements

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.

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.

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