Creating Custom Look & Feel
CSS Framework
singlepage-js
uses Bootstrap framework for styling portal presentation. There are a few important changes are worth noting. We
have removed lg
and xl
media breakpoints and only use sm
and md
breakpoints and corresponding classes in our
presentation. Also, we do not use bootstrap's Javascript code or jquery. We have replaced some of the essential functionality
by writing our own code or using vue plug-ins or libraries.
The src/css
directory in your application folder contains
four CSS files:
- bootstrap-reboot.css - Style resets for browser consistency and styling of basic html elements
- bootstrap-grid.css - Grid and spacing classes
- bootstrap.css - Themable classes defining major colors and component styles
- sp.css -
singlepage-js
system classes needed for system components and certain layout preferences
We recommend that you do not change reboot and grid classes unless you know what you are doing. bootstrap.css
contains all themable
classes and should be the main focus for look & feel customization. You can modify sp.css classes to change overall page display (sticky
footer), system components styling (e.g. sidebar menu on smaller displays).
Images
singlepage-js
uses three images located in assets
and assets/images
directories that can be replaced by your own: favicon.ico,
avatar.png, and app_logo.png. app_logo.png
is the main logo image that is used on the splash screen, Web site logo displayed at top
left once the application is loaded, login and logout screens, and the service_tester utility. Simplest change would be to replace
this with your own. In order to display a different image for different screens, you will have to change the corresponding Vue components
(App.vue, Login.vue, Logout.vue) or HTML files (index.html, service_tester.html).
Portal Window Styling
The appearance of components on the portal can be controlled by setting component wrapper, header, and body CSS classes. singlepage-js
comes with built-in templates. The built-in template definitions are shown below.
{
"card-default": { componentClass: "card sp-card", headerClass: "card-header bg-light h5", bodyClass: "card-body" },
"card-flush": { componentClass: "card sp-card", headerClass: "card-header bg-light h5", bodyClass: "" },
"note-default": { componentClass: "card sp-card", headerClass: "card-header border-0 bg-white h5", bodyClass: "card-body" },
"note-flush": { componentClass: "card sp-card", headerClass: "card-header border-0 bg-white h5", bodyClass: "" },
"blank": { componentClass: "flex-grow-1 position-relative", headerClass: "", bodyClass: "" },
"jumbotron": { componentClass: "jumbotron position-relative", headerClass: "display-4", bodyClass: "" },
"borderless": { componentClass: "card border-0", headerClass: "bg-white h4 pt-2 pb-2 border-bottom", bodyClass: "" },
"flush": { componentClass: "card sp-card", headerClass: "card-header", bodyClass: "" },
"card-warning": { componentClass: "card alert-warning", headerClass: "card-header h5", bodyClass: "card-body bg-white" },
"note-warning": { componentClass: "card-body alert-warning position-relative", headerClass: "h5", bodyClass: "" },
"card-info": { componentClass: "card alert-info", headerClass: "card-header h5", bodyClass: "card-body bg-white" },
"note-info": { componentClass: "card-body alert-info position-relative", headerClass: "h5", bodyClass: "" },
"card-dark": { componentClass: "card alert-dark", headerClass: "card-header h5", bodyClass: "card-body" },
"note-dark": { componentClass: "card-body alert-dark position-relative", headerClass: "h5", bodyClass: "" },
"card-light": { componentClass: "card alert-light", headerClass: "card-header h5", bodyClass: "card-body" },
"note-light": { componentClass: "card-body alert-light position-relative", headerClass: "h5", bodyClass: "" },
"card-success": { componentClass: "card alert-success", headerClass: "card-header h5", bodyClass: "card-body bg-white" },
"note-success": { componentClass: "card-body alert-success position-relative", headerClass: "h5", bodyClass: "" },
"card-danger": { componentClass: "card alert-danger", headerClass: "card-header h5", bodyClass: "card-body bg-white" },
"note-danger": { componentClass: "card-body alert-danger position-relative", headerClass: "h5", bodyClass: "" }
}
You can add to these or overwrite existing template definitions by creating component_templates.json
file in <app-root>/src/templates
directory. A sample JSON file is shown below. The file shown will overwrite styling of card-default
template and add a new template
named note-padded-centered
.
{
"card-default": {
"componentClass": "card sp-card flex-grow-1",
"headerClass": "card-header bg-secondary h5",
"bodyClass": "card-body"
},
"note-padded-centered": {
"componentClass": "card sp-card flex-grow-1",
"headerClass": "card-header border-0 bg-white h5",
"bodyClass": "p-5 d-flex align-items-center justify-content-center"
}
}
Page Layouts
When you create a new page in singlepage-js
, you can select the page layout: 2-columns, 3-columns, etc. singlepage-js
defines a set of
default page layouts. The layout definition files are located in <singlepage-js-install-dir>/dev/resources/page_templates
directory.
Contents of page_narrow_wide.xml
file are listed below.
<div class="container mt-3">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
</div>
</div>
As you can see, a page layout definition file is an XML file that provides the skeleton for the layout. You can use any bootstrap spacing or grid-related
classes to get the desired result. You can create your own layouts by creating similar files that start with page_
in <app-root-dir>/src/templates
directory and they will appear in the page layout dropdown on page create/edit screens. You can also overwrite existing page layout definitions by placing
a file with the same name as the original file name.