![[ Vannevar Bush ]](bazaarstylestyle/bazaarstylestyle_Vannevar-Bush.jpg)
bazaarstylestyle_Vannevar-Bush.jpg
Under construction. May contain errors!
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
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.
<!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.
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):
"... [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/bazaarstylestyle_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/bazaarstylestyle_Douglas-Engelbart-and-brother.jpg)
"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/bazaarstylestyle_Tim-Berners-Lee.png)
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).What is CSS?
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.
!
"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 */
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/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/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:
![[ Theme Frugal example with welcome text ]](bazaarstylestyle/bazaarstylestyle_site_example_2.png)
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:
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property.
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:
<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!
/* 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
/* 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.
Creating a new header involves a few steps:
Unfortunately -but great for this how-to!- the picture was slightly tilted:
![[ EPS school, tilted picture ]](bazaarstylestyle/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/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.
![[ Image of EPS school 1024 x 768 px ]](bazaarstylestyle/bazaarstylestyle_EPS_1024x876.png)
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/bazaarstylestyle_EPS_1024x200.png)
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.
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>
<t;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.
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/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/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/bazaarstylestyle_BSS_example-3.png)
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/bazaarstylestyle_BSS_example-4.png)
![[ Top of site with example code no header ]](bazaarstylestyle/bazaarstylestyle_BSS_example-5.png)
![[ Top of site with example code no header ]](bazaarstylestyle/bazaarstylestyle_BSS_example-6.png)
The possibilities are endless.
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.
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:
Explanation:
When you have uploaded your own stylesheet, you can set the path in this field, for example with file.php/areas/seniors/mystyles/style.css
NOTE: If no style is permitted at Area level, style can be used node level (sections, pages), see node level below.
<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="lcontent">
<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
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:
![[ EPS Mypage ]](bazaarstylestyle/bazaarstylestyle_EPS_MyPage.png)