The Page::getPageWrapperClass() that you attach to the DIV immediately inside the body tag is mandatory in order for many UI elements like side and detail panels to work. This method also produces some helpful optional information that you theme developers can use to write specific CSS. Let's take a look at the output of $c->getPageWrapperClass() on the built-in blog landing page in the Elemental sample content:
<div class="ccm-page page-type-blog page-template-full">
...
</div>
These three classes are automatically generated by the code. The first class, ccm-page, is what's needed to panels to work. The second two classes correspond to the page type and page template of the page, respectively. Since the blog landing page is of the page type Blog (with the handle "blog") it automatically gets page-type-blog as a CSS class. Since it uses the Full template, it will automatically get the page-template-full class.
Obviously, on a different page, you'll get a different dynamic class. On the Portfolio Project page, for example, this is the generated class
<div class="ccm-page page-type-portfolio-project page-template-left-sidebar">
Note: Any handles that use underscores like portfolio_project and left_sidebar will have those underscores converted to dashes, to correspond with Concrete CMS's CSS standards.
This can be very helpful for advanced theming. For example, this CSS in the Elemental stylesheet pushes the sidebar content down, but only on the blog page:
div.ccm-page.page-type-blog-entry {
div.col-sidebar {
padding-top: 40px;
}
}