Styling your blocks #

New markup needs CSS. On the Fit & Healthy theme it goes into a stylesheet of your extension, listed in design.ini like on any other design.

Contents #

1. Where the theme lists its stylesheets
2. Add your stylesheet
3. Check it
4. Rules for the CSS

Where the theme lists its stylesheets #

The media design loads its own CSS in pagelayout/head/style.tpl, in the order it needs:

{def $media_css_own = array( 'inter.css',
                             'explayouts_standard/grid.css',
                             'index.css',
                             ...
                             'exp-mobile-layout.css' )}

After those it loads every entry of [StylesheetSettings] CSSFileList[] and FrontendCSSFileList[] in design.ini that extensions add, in that order and each file once, and hands the whole list to one ezcss_load call. ezcss_load (ezjscore) packs the files into one file under var/<site>/cache/public/stylesheets/ and links it. Paths are resolved through the design fallback, so mysite.css is found in extension/mysite/design/media/stylesheets/mysite.css.

The entries the media design replaces are never loaded: the simple theme's base styles (main.css, main.res.css, Font Awesome, magnific-popup.css, websitetoolbar.css) and the theme's retired files. They are named in MediaReplacedCSSFileList[] in the theme's design.ini.append.php.

Before sevenx_themes_media 1.5.74 the page layout did not read CSSFileList[] or FrontendCSSFileList[] at all, and the only way in was a copy of style.tpl. That copy still works, but it stops following the theme's own list when the theme changes it.

Add your stylesheet #

1. Write extension/mysite/design/media/stylesheets/mysite.css, for example:

   .latest-fitness ul { list-style: none; padding: 0; }
   .latest-fitness li { padding: 0.5rem 0; border-bottom: 1px solid #e5e5e5; }
   .list-compact { list-style: none; padding: 0; }
   .notice { padding: 1rem 1.25rem; border-left: 4px solid #2563eb; background: #eff6ff; }
   .notice-warning { border-left-color: #b45309; background: #fffbeb; }

2. Add it to extension/mysite/settings/design.ini.append.php:

   [StylesheetSettings]
   FrontendCSSFileList[]=mysite.css

   It goes into the same packed file, after the theme's files.

3. Clear the INI and Template & content caches (./console exp:cache clear --tag=ini,template,content): that also clears the packed files (ezjscore-packer).

Check it #

The packed file's name changes, and it contains your rules:

$ grep -o "latest-fitness[^}]*}" var/site/cache/public/stylesheets/<hash>_all.css
latest-fitness ul { list-style:none;padding:0}
latest-fitness li { padding:0.5rem 0;border-bottom:1px solid #e5e5e5}

Before and after, the Latest in Fitness template block:

A browser that still shows the old styles has the old file cached: reload without the cache.

Rules for the CSS #

• Last in the list wins on equal specificity: your file after the theme's lets you adjust the theme without !important.
• Use the classes the block wrapper gives you: ngl-block, ngl-<block type>, ngl-vt-<view type> and the CSS class an editor sets on the Design tab.
• Keep markup free of style=""; the styles belong in the stylesheet so they are packed and cached.

Related pages #

• Add a block type
• Add a view type
• Your own design extension
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.