shellCMS now has external CSS file

September 01, 2021 — BarryK

My site bkhome.org 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:

https://bkhome.org/news/tag_shellcms.html

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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... */
a { text-decoration:none !important; font-weight:bold; }
/* following causes text to flow out of right side: */
pre { background-color:#f0f0f0; overflow: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:fixed; width:620px; margin-left:auto; margin-right:auto; }
  p { font-size:110% }
 }
 @media only screen and (min-resolution: 133dpi) {
  table.maintable { table-layout:fixed; width:100%; }
 }
/* support for syntax-highlighted code exported by Geany */
.style_2 { color:#d00000; }
.style_3 { color:#007f00; }
.style_4 { color:#00007f; font-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; }

...it 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:

https://bkhome.org/files/shellcms.tar.gz

Tags: shellcms