The problem

Most of the custom pageparts just look terrible when you get the preview in the Kunstmaan Bundles CMS. This is because the preview uses the HTML-template of the pagepart, but it doesn’t have any styling because the CSS of the front-end is nowhere included in the Kunstmaan Bundles CMS.

Example pagepart 1:

Example pagepart 2:

The solution

A few months ago, in version v3.5 of the Kunstmaan Bundles CMS, we launched a new feature which allows you to get styled previews of your pageparts in the Kunstmaan Bundles CMS. This looks a lot cleaner, especially when some advanced custom pageparts are created.


Example pagepart 1:

Example pagepart 2:

How is this implemented?

We don’t overwrite the styling of our CMS system, we created a new scss file located at .../Resources/ui/scss/admin-style.scss where we can nest the css code in some classes. This way we prevent these unwanted styling changes in the CMS and only the preview of the pageparts will use these css code.

.page-template__region .admin-region,
.pp__view .pp__view__block:first-child {
   // Add here your frontend styling for the previews
}

Because this file is inside our UI folder, our gulp will take care of the compiling. Note that this file only compiles on “gulp build” because we do not want it to slow down our normal development.


Example of admin-style.scss:

/* ==========================================================================
  Extra Stylesheet for admin
  ========================================================================== */

/* Config (necessary only)
  ========================================================================== */
@import "config/general/colors",
        "config/general/typography/fonts",
        "config/general/typography/bodycopy",
        "config/general/typography/headings",
        "config/general/sizes",
        "config/general/paths",
        "config/general/z-index";

/* Vendors - only vars!
  ========================================================================== */
@import "config/vendors/bootstrap-vars",
        "config/vendors/cargobay-vars";

/* General
  ========================================================================== */
@import "general/typography/iconfont";

/* Helpers
  ========================================================================== */
@import "helpers/helpers";


/* Use these styling only in the pagepart previews
  ========================================================================== */
.page-template__region .admin-region,
.pp__view .pp__view__block:first-child {

   /* General
      ========================================================================== */
   @import "general/typography/bodycopy",
           "general/typography/headings";

   /* Blocks
      ========================================================================== */
   @import "components/blocks/boxes",
           "components/blocks/buttons",
           "components/blocks/hr",
           "components/blocks/img",
           "components/blocks/links",
           "components/blocks/lists",
           "components/blocks/tables";

   /* Structures
      ========================================================================== */
   @import "components/structures/usp-list";

   /* Pageparts
      ========================================================================== */
   @import "components/pageparts/button-pp",
           "components/pageparts/testimonials-pp",
           "components/pageparts/text-pp";

}
Can this new feature be turned off?

Yes. As mentioned before, we have added an extra scss file to our UI folder (Resources/ui/scss/admin-style.scss). If you want to turn off this feature and use the non-styled version of the pageparts like before, just delete this file. We check if this file exists before we include it.

{% block extracss %}
   {% set cssPath = 'frontend/css/admin-style.min.css' %}
   {% if file_exists(cssPath) %}
       <link rel="stylesheet" href="{{ asset('/' ~ cssPath) }}">
   {% endif %}
{% endblock %}
Written by

Dries Beerten

Frontend developer

Follow @dbeerten