Sun Dial Menu
Menu Documentation


The new page layout uses the W3.css framework to format pages with respect to quoted text.

Te website is now a mixture of old and newly formatted pages. There are too many pages for me to convert to the new format. This being the case I am only updating the pages that I am currently working on and ones that I see are being found by Internet users making searches. The pages relating to local history will also be updated in good time.

Up until I started to use the W3.css Framework I worked out how to do some things from scratch. Having used a template taken for the Parish Council website I have decided that I like what I see.


Formerly I used a specific way of doing this. Using the Framework I have far more scope of doing this:

" Quoted text "

I have a template for this formatting in my _google.txt file. I can easily change the panel colour and text colour. These colours will depend on the background that they are used, the "quote" designation is that it had a bar on the left of the panel.

When documenting code there are additional steps.

External hyperlinks

I have been adding rel=nofollow parameters to my outbound links. Google have added a User Generated rel= - I need to look at this again.


The adding of the subnav code to pages is to aid the navigation within the page.

The documentation of code snippets

Below is an example taken from my page on documenting the Javascript for the accordian:

The HTML for using w3-code (for documenting Javascript code)

<div class="w3-code jsHigh notranslate">
...... code to be documented and highlighteed goes here ......

Similar code is used for documenting HTML and CSS - htmlHigh and cssHigh are the parameters, the notranslate is to prevent Google or other service changing the code into a local language.

The JavaScript for the Sub-Menu

function myAccFunc() {
var x = document.getElementById("demoAcc");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-green";
} else {
x.className = x.className.replace(" w3-show", "");
x.previousElementSibling.className =
x..className.replace(" w3-green", "");
} }

To get the code to be highlighted the following scripts need to be added:

<script src=""></script>

Actually, the placement of the scripts is key here - look at this in greater depth.

The colour highlighting will not occur if you are not connected to the Internet. See my page on the Overlay menu for more "real-world" usage of this highlighting scheme.

Site design by Tempusfugit Web Design -