site  contact  subhomenews

shellCMS now has external CSS file

September 01, 2021 — BarryK

My site is powered by shellCMS, a content management system and blog, introduced here:

The last time that I did any work on it was February 2020, see blog posts here:

A limitation is that the static web pages are built with inline CSS, so if I want to change the CSS then have to regenerate all of the pages. Ditto, there is some text at the footer of each page that I would like to separate out to another file, so can change if desired and not have to rebuild all the pages.

The pages now start like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- BK 20210830 changed inline to separate css file... -->
<link rel="stylesheet" href="css0/head.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="Subscribe to this page..." href="feed.rss" />

The external 'head.css' has this:

h3 font-size:140%margin-top:20px; }
/* remove underline from links... */
text-decoration:none !importantfont-weight:bold; }
/* following causes text to flow out of right side: */
pre background-color:#f0f0f0overflow:visible; }
/* simple test to display on a phone screen... */
/* margin-left and margin-right achieves same as align="center" in table tag... */
 @media only screen and (max-resolution: 132dpi) {
  table.maintable table-layout:fixedwidth:620pxmargin-left:automargin-right:auto; }
  font-size:110% }
 @media only screen and (min-resolution: 133dpi) {
  table.maintable table-layout:fixedwidth:100%; }
/* support for syntax-highlighted code exported by Geany */
.style_2 color:#d00000; }
.style_3 color:#007f00; }
.style_4 color:#00007ffont-weight:bold; }
.style_5 color:#ff8000; }
.style_6 color:#ff8000; }
.style_7 color:#301010; }
.style_8 color:#000000; }
.style_9 color:#000000; }
.style_10 color:#000080; }
.style_11 color#008000; } has a simple mechanism for detecting if a PC desktop or a phone screen, using the DPI (Dots Per Inch).

At the bottom of every page, now have an iframe tag:

<!-- separated out the footer text, so can change without rebuilding pages -->
<iframe src="css0/foot.htm" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>

...which inserts the html code from 'foot.htm'.

Getting the blog to display nicely on both desktop and phone is still a work-in-progress!

The latest shellCMS is here:     

Tags: shellcms