Prerequisites

A working custom doctype that can be edited with BXE, let's call it "image".

n.b., all paths are relative to your publication root directory.

Adding CSS to your custom doctype within BXE

Within the usecase-bxeng.xmap file, for me anyway, the default css parameter line (commmented out below) doesn't work. Try changing it to the uncommented one.

<map:parameter name="css" value="resources/misc/bxeng/{page-envelope:document-type}-bxeng.css"/>

Create your image-bxeng.css file in resources/misc/bxeng,

#body {
background-color: blue;
}

#body > span.title {
color: #ffffff; display: block;
}

#body > span.description {
color: #ffffff; display: block;
}

#body > span.attribution {
color: #ffffff; display: block;
}

Enjoy!

You're probably wondering where the span elements come from. Well, if you use e.g., Firefox's DOM inspector, you'll see that that's how BXE seems to build the page.

Also by looking at the DOM inspector, you'll notice that there are actually three .css files included, namely, ../../resources/bxeng/css/editor.css (? is this the correct path), resources/misc/bxeng/image-bxeng.css and /default/authoring/css/page.css (where is this?) in that order, so if you get weird or expected results it's probably a result of clashes between them.

Page tree

HowToEditCustomDoctypesWithBXECSS

Prerequisites

Adding CSS to your custom doctype within BXE