Move the SilverStripe delete buttons away from the save buttons

Posted February 18th, 2011 in SilverStripe

I use the SilverStripe CMS on a number of websites and, while I really like using it, there are a couple of minor annoyances. This post shows how to solve one of them, which is to relocate the "Unpublish" and "Delete from the draft site" buttons away from the "Save" and "Save and Publish" buttons. I don't like them being in such close proximity as it's too easy to hit the wrong button and delete a page by mistake.

CSS changes to the theme only, no core changes required

The solution here just requires a CSS setting in the theme's typography.css file so no changes are required to the core SilverStripe code. For regular pages it relocates the "Unpublish" and "Delete from Draft Site" to the left, and for dataobjects the "Delete" button to the left.

Screenshot - before

The following screenshot illustrates the issue. You can see all the save buttons at the bottom of the screen all together on the right side.

The solution

The buttons are all grouped together in the same <div> but fortunately it's possible to relocate the delete buttons away from the others as they have a css class "delete". 

Either edit or create the file /themes/THEME-NAME/css/typography.css and add the following:

#form_actions_right {
    width: 100%;
}
#form_actions_right .action {
    float: right;
}
#form_actions_right .delete {
    float: left;
    margin-left: 18px;
}
#form_actions_right .delete + .delete {
    margin-left: 0px;
}

The CSS makes the containing <div> the full width and floats all the buttons to the right. The buttons with the class "delete" and then instead floated to the left. A left margin is assigned to the first delete button to move it away from the left side frame.

Screenshot - after

Here's the screenshot after the above CSS has been applied:

The solution isn't perfect, because it switches the order of the "Save" and "Save and Publish" buttons (and the order of "Back" and "Save" for data objects) but it's a simple solution that doesn't require touching core SilverStripe files and keeps those buttons away from each other.