Styling the editor
SimplyEdit loads itself into your design. This means that you can influence the way SimplyEdit looks. But there is one gotcha.
The SimplyEdit CSS is loaded as the last stylesheet. It will override any styles you define yourself, unless you make the selector more specific.
One way of doing this is to add a class on the <body> of your design and use that to prefix all your styling overrides.
Change the dotted borders
By default SimplyEdit uses a grey dotted border to indicate editable regions. With a slightly darker background this may become less visible. So change it to this:
.my-design *[data-simply-field] {
outline: 2px dashed rgba(255,255,255,0.3);
}
And change the hover color as well:
.my-design *[data-simply-field]:hover {
outline: 2px dash rgba(200, 255, 255, 0.3);
}
Change the active field background
Change the background for an active editable region:
.my-design *[data-simply-field]:focus {
outline: 2px dash rgba(200, 255, 255, 0.3);
background-color: rgba(64,64,64,0.2);
}
Change the empty list indicator
Whenever a list is empty, SimplyEdit makes sure it is clearly visible in the editor. To change how it looks, override it like this:
.my-design .simply-empty[data-simply-list]:before {
content: "\f1b3"; /* triple block icon */
text-align: center;
font-family: FontAwesome;
font-size: 20px;
color: #888;
width: 100%;
line-height: 24px;
vertical-align: middle;
padding-top: 5px;
}
And change the text:
.my-design .simply-empty[data-simply-list]:after {
content: "(Empty list)";
text-align: center;
font-family: arial;
font-size: 12px;
color: #888;
width: 100%;
line-height: 24px;
vertical-align: middle;
padding-bottom: 5px;
}
Change the list handles
.my-design *[data-simply-list-item]:before {
content: "\f1b2";
margin-left: 40px;
}
.my-design *[data-simply-list]:not(.simply-empty):before,
.my-design *[data-simply-list-item]:before {
border: 1px solid #ccc;
border-top: 2px solid #ea5922;
background-color: white;
color: #666;
/* etc. */
}
Fixing position fixed
When you use position: fixed in your design, the main toolbar may overlap some elements.
SimplyEdit pushes the top of the <body> down by 66 pixels to make room for the main toolbar. It does so with the following rule:
html:before {
display: block;
width: 100%;
height: 66px;
content: '';
}
Unfortunately an element with a fixed position and top won't be pushed down by this. There is no generic fix. But you can design around it. If this is your current style:
.fixed-nav {
position: fixed;
top: 0;
}
Just add this:
body[data-simply-edit] .fixed-nav {
top: 66px;
}