Website@School Users' Guide
Prev  

Bazaar Style Style

UNDER CONSTRUCTION!! May contain errors!

Contents

1. Introduction
    1.1 Assumptions
    1.2 A bit of history
        1.2.1 Summary
    1.3 The basics basics
        1.3.1 A quick and practical example
    1.4 Where to put style?

2. Replace the Website@School logo

3. A new header for the school
    3.1 The picture
    3.2 Resize the picture
    3.3 Crop the picture
    3.4 Upload the picture
    3.5 Use BSS to get the picture in the header

4. Where to put your style in Website@School?
    4.1 At Area level
    4.2 At Section and Page level

5. More CSS

1. Introduction

In this chapter we show some simple, practical examples on how to use Bazaar Style Style (BSS) in Website@School. When you have done this chapter, you can change the appearance of your Areas, Sections and Pages, and you have basic knowledge of how to use Cascading Style Sheets (CSS) in BSS.

However, the main purpose of this chapter is to seduce you to continue learning CSS, Seduce you to follow the excellent free interactive online W3Schools course, do the online exam, get the diploma and become a pro!

We also shortly describe the history of the 'HT' and 'ML' in HTML and CSS. Interesting, because of its democratic, even anarchistic character of the latter.

1.1 Assumptions

To be able to do this chapter we assume you have basic knowledge about the 'Hyper Text Markup Language' (HTML). This means you understand what is written here: 

<!DOCTYPE html>
<html>
<head> 
   <title>Some title</title>
</head> 
<body> 
  <h1>Some header</h1>
  <hr>
  <p>Some text,  
  <strong>some more text,</strong><br> 
  <tt>more text,</tt> 
  <code>even more text,</code>
  <pre>etc,</pre> 
  <em>etc.</em></p>
</body> 
</html>

If this looks like garbage, please read these excellent intros from W3Schools: HTML Elements and HTML introduction.

1.2 A bit of history

The history of HTML and CSS is quite interesting because it reveals long standing thoughts and wishes of authors and readers of texts. 'Texts' as defined in literacy theory: any object that can be "read", i.e. also images, drawings, sounds, etc.
It's not necessary to read this paragraph. However, the 1.2.1 Summary, by W3Schools is obligatory.

Hypertext has a long history, written by many authors, so here we describe it with quotations from them.

The HT (Hyper Text) in HTML we owe to the ideas and influence of engineer Vannevar Bush (1890-1974):

[ Vannevar Bush ]
bazaarstylestyle_Vannevar-Bush.jpg
"... [He] wrote "As We May Think" in 1945, describing his conception of the Memex, a machine that could implement what we now call hypertext. His aim was to help humanity achieve a collective memory with such a machine and avoid the use of scientific discoveries for destruction and war."
Source: Wikipedia: Hypertext
[ the Memex ]
bazaarstylestyle_vannevar_bush_memex.jpg

In '"As We May Think" Vannevar Bush wrote:

"...wholly new forms of encyclopedias will appear, ready made with a mesh of associative trails running through them, ready to be dropped into the memex and there amplified".
Source: Wikipedia: Vannevar Bush

So, the concept of hypertext was there. Vannevar Bush created the stage for:

[ Douglas Engelbart and kid brother ]
bazaarstylestyle_Douglas-Engelbart-and-brother.jpg
Douglas (left) and his kid brother. Source: CollectiveIQ
"Engineer Douglas Engelbart (1925-2013), also focused on making the world a better place, especially through the use of computers [...] resulting in the invention of the computer mouse and the development of hypertext."
Source: Wikipedia: Douglas Engelbart

Hypertext had its definition:

"Hypertext is text displayed on a computer display or other electronic devices with references (hyperlinks) to other text which the reader can immediately access"
Source: Wikipedia: Hypertext

And now reality enters the stage. Timothy Berners-Lee (1955- ):

[ Tim Berners Lee at Sheen Mount Primary School ]
bazaarstylestyle_Tim-Berners-Lee.png
Source: Photo by courtesy of the Richmond & Twickenham Times

Now Sir Tim Berners Lee, as a young scientist, wrote:

"In 1980, I wrote a program [...] called Enquire, it allowed one to store snippets of information, and to link related pieces together in any way. To find information, one progressed via the links from one sheet to another, rather like in the old computer game "adventure".
Source: Information Management: A Proposal, Tim Berners Lee CERN, May 1990.

In March 1989 Tim Berners-Lee wrote a memo proposing an Internet-based hypertext system. He wrote the specification for HTML and wrote the browser and server software in late 1990.

The ML of HTML was born. And markup languages are as old as manu-scripts (nand-writings):

"A (document) markup language is a modern system for annotating a document in a way that is syntactically (the construction of the sentence) distinguishable from the text. The idea and terminology evolved from the "marking up" of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. In digital media this "blue pencil instruction text" was replaced by tags, that is, instructions are expressed directly by tags or "instruction text encapsulated by tags".
Source: Wikipedia: Markup language

Now that we had HTML, ...

"...and the Web is starting to be used as a platform for electronic publishing. One crucial part of a publishing platform is missing, however: there is no way to style documents. For example, there is no way to describe a newspaper-like layout in a Web page."
Source: Cascading Style Sheets, Chapter 20, The CSS saga.

At that time, around 1993, there were a couple of solutions to influence style, but ...

"... CSS had one feature that distinguished it from all the others: it took into account that on the Web the style of a document couldn't be designed by either the author or the reader on their own, but that their wishes had to be combined, or "cascaded," in some way; and, in fact, not just the reader's and the author's wishes, but also the capabilities of the display device and the browser." "As planned, the initial CSS proposal was presented at the Web conference in Chicago in November 1994. The presentation at Developer's Day caused a lot of discussion. First, the concept of a balance between author and user preferences (my emphasis, DS) was novel. A fictitious screen shot showed a slider with the label "user" on one side and "author" on the other. By adjusting the slider, the user could change the mix of his own preferences and those of the author. Second, CSS was perceived by some as being too simple for the task it was designed for. They argued that in order to style documents, the power of a full programming language was needed. CSS went in the exact opposite direction by making a point out of being a simple, declarative format." (my emphasis, DS).
Source: see above

A declarative language has the form of: "I declare this to do that".

'Sstyle' has so many meanings that you can create your own. Mine is: a popular practice, a prevailing mode of expression.

Now we have HTML and CSS. We use HTML to create content and divide it in readable chunks like titles, paragraphs, emphasize text and so on. We use CSS to style the created content, for example, choose the right font for a particular text part, use colors, make overlays, etc.

In the next section W3Schools summarizes why CSS is so usable (or not).

1.2.1 Summary

What is CSS?

Styles Solved a Big Problem

HTML was never intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like font and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Copied and slightly edited from W3Schools: CSS Introduction

The last sentence in this W3Schools introduction exactly points at the pros and cons of CSS. These are further elaborated in appendix Viewpoints, paragraph 4.1 Cascading Style Sheets. Our reasons to develop BSS are described in paragraph 4.2 Bazaar Style Style. Below we only explain the basics of CSS and provide some practical examples of its usage in Website@School.

1.3 The basics basics

A simple HTML tag can be used to style what's between the opening tag and the closing tag. You use the content of the opening tag to add style to the content. Simply said, the declarative format of CSS is:
!
"I declare this | to do | that  | stop doing."
------------------------------------- 
   tag-content  |   {   | style |    }

Below is the proper naming, for example with the header <h1> tag:


selector   declarator 
--------------------------  
  h1    { color: purple; } 
--------------------------
       property: value

Explanation:

IMPORTANT:
What's between the curly braces '{' and '}' can become quite complicated with many declaratins.
Please, please force yourself to write readable CSS and add comments. After a week you are forgotten what and where you wonderful piece of CSS code was useful for.
Comments start with a forward slash and asterisk '/*' and end with an asterisk and a forward slash '*/'. Here is an example of commenting and well formatting CSS:


/* Test for the Seniors area header */
#header h1 {
  color: purple;  
  font-size: 4em;   
}

/* This descripton spans 
more than
one line, or many lines */

1.3.1 A quick and practical example

And now for some reality testing! Proceed as follows: Navigate to: Configuration Manager > Areas > pencil (public) Senior Pupils (4,40) > Theme configuration > Extra style at area level. You see:
[ Configure Theme Frugal BSS start ]
bazaarstylestyle_area_frugal_open.png

NOTE: Please ensure that are checked: 'Static stylesheet usage' and 'Extra style usage (area)' and the path to 'Static stylesheet' is program/styles/base.css (no leading slash!).

Copy and paste the code below to the top of the 'Extra style at area level' field, before the other code:

  
 /* Test for the Seniors area header */
#header h1 {
  color: purple;  
  font-size: 4em;   
}
Where you put the code is not important, but in this way the code follows the page lay-out, which simplifies finding bugs. It looks like: 
 /* Test for the Seniors area header */
#header h1 {
  color: purple;  
  font-size: 4em;   
}

/* Demo of Bazaar Style Style sheets */
#content h1 {
  background-color: #FF33FF;
}

Not all colors can be entered by their name. To make use of all colors, you must enter their hexadecimal value with leading hash '#" character. More on colors can be found on W3Schools color names

Click [Save] to stay in the page. Open another browser window and go to the area of the Seniors to view the results of your code:

[ Theme Frugal example ]
bazaarstylestyle_site_example.png

The Senior Pupils header looks alright, but nothing can be seen from the second part of your code. Reason: the Welcome page was created, but no text with the 'h1' tag was added.

Please go to the Page Manager, select the Senior Pupils Area, click the Welcome page and add the following text in the Welcome page with one of the editors:

Save your work and observe the page on the site:
[ Theme Frugal example with welcome text ]
bazaarstylestyle_site_example_2.png

1.4 Where to put style?

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

  1. Inline - using the style attribute in HTML elements. An inline style can be used if a unique style is to be applied to one single occurrence of an element.

    To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property.

  2. Internal - using the <style> element in the <head> section. An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag.
  3. External - using an external CSS file. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section.
Examples of the three locations:
  1. Inline example: This <h3 style="background-color:yellow;">My yellow h3 headert</h3>
    yields:

    My yellow h3 text

    This will only affect this 'h3' header in this page. All other 'h3' headers on the page will have the default color chosen by the browser, like in this page:

  2. Internal example:
    <head>
   
<style>
.mystyle { color: red; font-size: 1,3em; }
</style>   
   
</head>

    This will style this text in red. Look in the code of this page to see the <span class="mystyle">this text in red</span>

    BSS makes use of this feature by adding your style to the style of an Area, Section or Page, or overruling those styles. What a power!

  3. External example:
    As example a few snippets of our Website@School style1.css file:
    /* FOR ALL CHAPTERS */
body {
  background-color: #FFFFFF;
  font-size: 1em;
  color: #000000;
}

/* Grayed and preformatted text blocks.
'pre' tag used for 'no style' browsing */
.grayed { 
  background-color: #B6B6B6; 
  float: left;
  font-family: monospace;
  font-size: 1.3em;  
  white-space: pre-wrap;  
}
/* A part of grayed block, terminates
left float of text block */
.clear_left { clear: left; }

    The page color white, normal black colored font. If you prefer black pages with white text, please go ahead.

    An external style sheet, for example mystyle.css styles all pages that contain a header with: <link rel="stylesheet" type="text/css" href="/path/to/mystyle.css">

    In Website@School the theme style sheet is the external style sheet.

Adapted from W3Schools: HTML styles - CSS

(top)

2. Replace the Website@School logo

For the very impatient pupils, below is the example to replace the Website@School logo with the one of your class. You can copy and paste the code. Do not forget to afdjust the path and file name of the picture. In the example, Catherine Hayes has permissions on the Configuration Manager and Guru permissions on the 'Senior Pupils' area. She has chosen the 'Frugal' theme.
/* Do not display the Website@School logo */
#logo {
display: none;
}

/* Set the RIGHT! path and file name! 
 do not repeat the image 
 and position it 40 pixels from left and 20 px
 from the top */ 
#header {
background-image: url('http://exemplum.eu/file.php/areas/seniors/pupils_heads.png'); 
background-repeat: no-repeat;
background-position: 40px 20px;
}

NOTE: Don't forget to adapt the URL!

NOTE: Experiment with the image size. The Website@School logo is a 284 x 71 pixels .png image, name logo-284x71.png.

(top)

3. A new header for the school

In this paragraph we assume you have done the previous one.

Creating a new header involves a few steps:

3.1 The picture

Take a picture. The one we took measured 3072 x 2304 pixels and has a size of 2,95 MB. Downloading such a big sized image takes very long time on the Internet so we have some work to do.

Unfortunately -but great for this how-to!- the picture was slightly tilted:

[ EPS school, tilted picture ]
bazaarstylestyle_EPS_256x192.png

Photos by courtesy of the pupils and teachers of the public primary Dalton school 'De Schutsluis' in Oldenzijl, the Netherlands.

This can be corrected with a paint program, for example the free and open source Linux and Windows program by Mark Tyler: mtPaint. We used the origianl image. To set the picture horizontally, in mtPaint go: Menu > Image > Skew: set Angle/Vertical to -5.00 degrees and click [OK] Save the picture:

[ EPS school, horizontal picture ]
bazaarstylestyle_EPS_256x219_horizontal.png

We only need a part of the picture for the header section, so we resize the picture to the width of the Frugal theme header: 1024 pixels.

3.2 Resize the picture

Resize the picture, for example with multi-language freeware Irfanview or any other image resize program. Resize the image to 1024 x 768 pixels and save as .png file. It's now 1141 KB:
[ Image of EPS school 1024 x 768 px ]
bazaarstylestyle_EPS_1024x876.png

3.3 Crop the picture

Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio. Source: Wikipdedia.

With a screen capture program, for example multi language freeware MWSnap or any other screen capture program, crop the picture to a height of 200 pixels and keep the width. It's now 431 Kb. Save the picture as EPS_1024x200.png:

[ EPS school 1024 x 200 pixels ]
bazaarstylestyle_EPS_1024x200.png

3.4 Upload the picture

In the exemplum folder, create a folder named header and upload the file to areas/exemplum/header.

NOTE:
Do NOT forget to , in the File Manager, uncheck 'Resize images (800 x 800)', Your picture has a width of 1024 pixels and must NOT be resized.

3.5 Use BSS to get the picture in the header.

First we have to find the code. Please open a browser as a normal visitor of your schools website with the Frugal theme. In the browsers menu bar and its sub-menus, look for the option 'View Source' or 'Page Source'. Use that option to study the code of the page. After the end of the <head> section, the <body> section starts. Text between '[' and ']' square brackets is our comment:

<body>
  <div id="top">
  </div>
  <div id="page">
    <div id="header">
      <div id="logo">
[ In your browser the line below is very long ... ] 
<a href="/in... 71"></a> 
[ ... so we split it in two lines: ]
        <a href="/index.php/area/1/Exemplum_Primary_School.html">
        <img src="/program/graphics/waslogo-284x71.png" 
        title="Exemplum Primary School" 
        alt="image of logo" 
    width="284" 
    height="71"></a>      
      </div>
      <div id="quicktop">
        <a href="/index.php/18/About_our_school.html" title="About our school"<about</a>
        <a href="/index.php/19/How_to_contact_us.html" title="How to contact us"<contact</a>
      </div>
      &ltt;h1>Exemplum Primary School</h1>
    </div>
[ Here the breadcrumb trail code starts ]

This is the upper part of theme Frugal, i.e. the 'header' section. Look for <div id="header"> and for <div id="logo">. We are working in the 'header' section. First we want to get rid of the Webiste@School logo and insert the picture.
If you don't understand what exextly is going on, read on, you will in due course.

In the next piece of code the Website@School logo is not displayed and the image is put in the header. The height of the image is 200 pixels. And we creade a border around the header to make it visible Cut and paste the code below under the other code about an awful color.

NOTICE:
'Do not forget to change the file path. Your school is not the Exemplum Primary school...

  
/* No display of Website@School logo */
#logo { 
  display: none;
}

/* Image of EPS in header */
#header {
  background-image: url('http://exemplum.eu/file.php/areas/exemplum/header/EPS_1024x200.png');
  background-repeat: no-repeat;
  border: 1px #0000FF dashed;
  height: 200px;
}

Now we have:

[ Top of site with example code ]
bazaarstylestyle_BSS_example.png

We have put a dotted border around the area that is covered by the '#header'. The white space is used for the 'quicktop' links. That's not exactly what we want. That space must also be used for the image.

We have to study the stylesheet to see how the whitespace is created. The Frugal theme uses the stylesheet base.css, which is located at program/styles/base.css. This can be observed in the 'Static style sheet' field in the Theme configuration, and also in the head section of the page with 'View page source'.
Point your browser at http://yourschool.org/program/styles/base.css to see the CSS code in the stylesheet. Look for this part:

#quicktop {
  height: 20px;
  background-color: #FFF;
  text-align: right;
  font-size: 0.95em;
  padding-left: 210px;
  padding-right: 210px;
}

We have to get rid of those 20 pixels to make room for the image and make the toplinks larger. And since we are here, the let's change the font color of the school name:


/* More space for larger quicktop font and
transparent background */
#quicktop {
height: 40px;
background-color: transparent;
}

/* Yellow school name */
#header h1 {
  color: #FFFF00;
}

This results in:

[ Top of site with example code ]
bazaarstylestyle_BSS_example-2.png

Hm, not bad, transparency is ok, but maybe not in the toplinks because the air is as white as the backgound color of the toplinks.

After some fiddling, i.e. positioning the name of the school and studying the piece of code below, located in program/styles/base.css:


#header h1,
#header h2 {
  text-align: center;
  margin-top: 0px;
  margin-left: 210px;
  margin-bottom: 0px;
  margin-right: 210px;
}

[...]

#quicktop a:link,
#quicktop a:visited {
  text-decoration: none;
  color: #000;
  background-color: #FFF;
}

cleaning up a bit, removing the dotted line and bringing some order, we now have:


/* No Website@SChool logo */
#logo { 
  display: none;
}

/* Image of EPS in header */
#header {
  background-image: url('http://exemplum.eu/file.php/areas/exemplum/EPS_1024x200.png');
  background-repeat: no-repeat;
  height: 2000px;
}

/* More space for larger quicktop font and
transparent background */
#quicktop {
  height: 40px;
  background-color: transparent;
}

/* Yellow school name and position */
#header h1 {
  color: #FFFF00;
  text-align: left;
  margin-top: 100px;
  margin-left: 20px;
  margin-bottom: 0px;
}

/* Blue color and transparent 
background for picture */
#quicktop a:link,
#quicktop a:visited {
  text-decoration: none;
  color: #0000FF;
  font-size: 2em;
  background-color: transparent;  
}

With this result:

[ Top of site with example code ]
bazaarstylestyle_BSS_example-3.png
You may not like the font sizes and colors, but you have the CSS to experiment.

And now for some other ideas to inspire you. We took the original 1024 x 200 pixels picture. With mtPaint we removed the orange waste paper basket, made the green hedge a bit longer to fill the gap and used our own 'font' for the school names.
We used this piece of CSSS to make the school name invisible:


/* No Area title in header */
#header h1 {
  display: none;
}
[ Top of site with example code no header ]
bazaarstylestyle_BSS_example-4.png
[ Top of site with example code no header ]
bazaarstylestyle_BSS_example-5.png
[ Top of site with example code no header ]
bazaarstylestyle_BSS_example-6.png

The possibilities are endless.

(top)

4. Where to put your style in Website@School?

NOTE:
To add style you must have sufficient access permissions.

BSS uses external style sheets and internal style sheets. The external style sheet is part of the Website@School themes. Every theme has its own external style sheet. This style sheet can be overruled by the internal style sheet which you control. Overruling can be done on three levels: Area, Section and Page. In this way a diversity in styles can be created. Depending on your CSS skills, you can completely change the style of an Area, a Section, sub-sections and the pages under it, or even a single page. The possibilities are endless.

4.1 At Area level

Go: Configuration Manager > Areas > Pencil icon <area name> > Configure theme 'themename' for area n > Extra style at area level. Enter your style.

NOTE: Do not forget to check the opton: Extra style usage (area) [ ] Use extra style at area level.

NOTE: Checking the option Extra style usage (node) [ ] Allow node level style information ('Bazaar Style Style') enables BSS at Section and Page level.

When using the Frugal theme, you find:

[ Configure Theme 'Theme Name' for area n, bottom part ]
bazaarstylestyle_area_frugal_open.png

Explanation:

The extra style you add and save can easily be seen by viewing the code in your browser. In the menu bar of your browser, look for 'View Source' or 'Page Source'.
Try this with the Frugal theme. In the code below we only show what is useful for the explanation. We use '...' to show where we left out code and used the usual '[' and ']' square brackets for explanation: 
  
<html>
<head>
...
[ Below is the location  of the Frugal  stylesheet [*] ]

<link rel="stylesheet" type="text/css" href="/program/styles/base.css">
...
[ Below is the code entered in the Extra style
at area level. Note the comment  /*BSSS:area=4*/. This ia a feature, 
showing the location where this style is in use ]

<style><!--
    /*BSSS:area=4*/
    /* Test for the Seniors area header */
    h1 {
      color: purple;  
      font-size: 4em;   
    }
    
    /* Demo of Bazaar Style Style sheets */
    #content h1 {
      background-color: #FF33FF;
    }
  -->
</style>
</head>
<body>
...
    <div id="header">
...      
      <h1>Senior Pupils</h1>
    </div>
...
    <div id="content">

      <h1>
  An awful color!</h1>

    </div>
...

We have the 'h1' tag in the header and in the content. By writing:

#header h1 {
  color: purple;
  font-size: 4em;
}

/* Demo of Bazaar Style Style sheets */
#content h1 {
  background-color: #FF33FF;
}
We make a difference in the two 'h1' tags.

Summary: by studying the style sheet you can find out where to change the style. [*] Theme Frugal's stylesheet is located at program/styles/base.css. For all other themes the styleheets are in program/thems/<themename>/style.css

4.2 At Section and Page level

Each Section and Page has its own Bazaar Style Style feature.

At Section and Page level: Go Page Manager > Visible/Invisible icon > Advanced > Edit advanced properties of page n : Extra style at page/section level. Enter your code.

Whether style information from pages or sections is passed to the browser or not is depending on the checked/unchecked box at 'Extra style usage (node).

Example:

All pages under the section 'News' have the modified header.

5. More CSS

How to learn more about CSS?

(top)

Prev Home
Viewpoints Home
Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2015-02-16, version 1.14