Site Map Mara Editing Advanced Step by step
print

The Theme - Step by Step

Some css fine tuning

What we have so far will work perfectly well. However, there are one or two adjustments we can make which will enhance the display of our pages under certain conditions. We're not going to go too deeply into this because the idea here is to develop a straightforward but functional theme.

Very wide screens

On the larger displays, the lines of text can be so long that they are hard to read. Of course the user always has the option to adjust the browser window size, however you might want to set an upper limit to the textual content width. We achieve this by setting css for the html zone, which could be thought of as an outer container, larger than the body. We then set a max-width on the body.  Like so in theme.css:

html {
  background:#555;
  color:white;
  box-sizing: border-box;
}

body {
  /* other settings... */
  max-width:1000px;
}

Spaced-out Headings

The default styling of <H1> etc headings creates a lot of space both above and below each heading. I feel this looks old-fashioned, like a 1990''s academic paper. Which is, incidentally, where the Web defaults came from. Plus you can always add space where needed, whilst removing unwanted space is more difficult. Thus I tend to set reduced margins on headings:

h1, h2, h3, h4, h5, h6 {margin-top:10px; margin-bottom:0px; }

This joins the heading to its section text, which I feel looks much better than it being orphaned from it.

Oversize items

We've mentioned that responsiveness is not a single concept, and that a page can only be responsive if all elements in that page are responsive. Which of course includes both the theme content and the page content. If a page contains a monster of an oversize photo, for example, then no matter how careful our theme design, the page will not be responsive. We can however set some conditions in our theme which will go a long way towards mitigating such situations. This is useful because CMS pages will often be edited by inexperienced people, people who don't understand that -for example- dropping an unprocessed 25-megapixel photo into a page will cause a major problem for phone users.

The two most common culprits here are photos and fixed-width <pre> text. If we add these two css rules:

img, pre {
  max-width:100% !important;
  overflow:hidden; text-overflow:ellipsis;
}
pre:hover {
   overflow:auto;
}

Then oversize items will be brought under control. Also, overly long text will display a scrollbar when the mouse is hovered over it. This is infinitely preferable to it 'punching out' through the side of the container.

Floated images

Floating of images illustrating text (text wrap-around) is a handy arrangement on desktop displays. However, as the screen gets smaller you end-up with a very narrow column of text alongside the image. This is both hard to read, and looks dreadful.  So, we disallow floating below a given screen width, and give the image a block display property.  The image will then be displayed in its own vertical space. While we're at it, we reduce any margin or padding an editor may have put on the image, since while on a desktop it may look prettier, on a small screen it just wastes valuable space. 

@media screen and (max-width: 700px) {
 #cms_content {
  padding:2px;
  max-width:100%;
 }
 #cms_content img.center, #cms_content img.left, #cms_content img.right, #cms_content img.float-left, #cms_content img.float-right  {
   margin:5px auto; !important;
   padding: 0px !important;
   display:block !important;
   max-width:90vw !important;
   height:auto !important;
   float:none !important;
 }
#cms_content span.center, #cms_content span.left, #cms_content span.right, #cms_content span.float-left, #cms_content span.float-right  {
   margin:5px auto; !important;
   padding: 0px !important;
   display:block !important;
   max-width:90vw !important;
   height:auto !important;
   float:none !important;
 }
 #cms_content blockquote {
  margin:2px;
  padding:0px;
 }
}

The two versions are needed to cope with captioned and standard images.  We also reduce blockquotes (indents) so as to conserve space.

None of these are necessary, but they add flair and professionalism to the presentation.