Before we start editing the templates for our database, we're going to create custom CSS and JS files that will allow us to customize the style and functionality beyond what Pages does by default.
Custom CSS & JS files apply to the page rather than the database, so you could use them even if you're doing something that doesn't make use of the Databases feature. Of course, in this tutorial we are using databases, so our styles will mostly be geared to styling them.
Custom CSS/JS files are created in the AdminCP, so head over to Pages -> Page Management -> Templates to access the template editor. In the left-hand panel you'll see tabs for CSS and JS - although these are empty now, it's where our new custom files will live once created, and it's where you'll edit them later.
Click the New button, then choose Add CSS File. Enter a name, such as releasenotes (Pages automatically adds the .css suffix for you). Since we're only going to have one CSS file here, choose to insert it into the existing 'CSS' group (if you have much more complex pages, you could create your own grouping structure). Save the form to create it.
If you now click the CSS tab and expand the groups, you'll see the new (empty) releasenotes.css file:
Creating the files
Repeat the same process to create the javascript file, choosing New javascript file from the New menu, and naming it releasenotes.js.
We've created our custom files, but right now our page doesn't know it should use them. To do so, edit the page that was created for our database by going to Pages -> Page Management -> Pages and clicking the edit icon next to release-notes (remember we created this page automatically as part of the database creation process).
On the Page Includes tab, select the JS and CSS files you just created, then save the form. (This will only show up if you have already added a css/js file)
Assigning to a page
That's it! Our page now includes these two files when it displays, so we're ready to customize.
Ordinarily, you would likely be editing the CSS itself bit-by-bit as you edit the templates. For the purposes of this tutorial however, you can simply add the CSS contents now. Here's the styles we're using:
.cRelease {
display: block;
padding: 15px 0 15px 15px;
border-top: 2px solid rgba( 0,0,0,0.075);
color: inherit;
}
.cRelease:not( .cRelease_active ):hover {
background: rgba(255,255,255,0.4);
}
.cRelease:hover {
color: inherit;
}
.cRelease .ipsType_sectionHead {
font-size: 20px;
line-height: 1;
margin-bottom: 5px;
font-weight: 500;
}
.cRelease .cRelease_security {
margin-top: 12px;
margin-right: 10px;
}
.cRelease_active {
background: #fff;
border-color: transparent;
}
li:first-child > .cRelease,
.cRelease_active + .cRelease {
border-color: transparent;
}
.cReleaseColumn {
padding-right: 0;
}
.cReleaseColumn [data-role="tablePagination"] {
background: #fff;
padding: 5px;
margin-top: 10px;
margin-right: 7px;
text-align: center;
}
.cReleaseColumn .ipsPagination_pageJump {
display: none;
}
Report Guide