Guideline:Graphic Chart
Guideline:Graphic Chart
New color chart
HEX codes for each:
- Dark purple:#330066
- Purple:#795290
- Light purple:#EBEAF1
- Dark orange:#AB3E00
- Orange:#DE8300
Other HEX codes for colors:
- Other Purple: #dedbf1
- Other Orange: #ffcc99
General CSS rules
The website is displayed in a div id="GlobalWraper".
It contains a div id="column-content" that contains a div id="content".
This last div IS the main page frame in the site.
It contains another div id="bodyContent" with is the container in the main page.
form id="edit form" is the page inside which the wiki code is written.
Top Menu Line
- css
"#p-cactions li { display: inline; border: 1px solid #aaa; border-bottom: none; padding: 0 0 .1em 0; margin: 0 .3em 0 0; overflow: visible; background: white; }"
Left Menu Boxes
div id="column-one" defines the header and left bar navi boxes.
div id="p-captions" defines the top navi bar (in which are the 8 buttons of our top menu bar.
div id="p-personal" defines the personal bar (login / logout)
div id="p-logo" defines the space in which the PV logo is set.
div id="p-navigation" defines the navigation menu.
div id="p-search" defines the search menu box.
div id="p-tb" defines the tool box.
All these div id contain the class "portlet".
- Content
class: generated-sidebar portlet
h5 header
class="pBody"
ul / li
div id="p-search"
- Content
class: portlet
h5 header
div id="searchBody"
class="pBody"
form id="searchform"
div id="p-tb"
- Content
class: portlet
h5 header
class="pBody"
ul / li
css
The Navigation block position is set as follow:
"#column-one { padding-top:160px }"
The following tags are defined in the document main.css
Headers
- We will use = = for page header.
- We will use == == for page section
- We will use === === for subsections
- We will use "h4" in charts titles, but we will avoid to use it as subsection.
- We will NOT use h5 and h6 as they are smaller than text subsections.
h1 (= =)
Page title, one of the most used in our pages. Rule: only one h1 per page. As of today color black, size not as big as our titles. Example:
For You
css code
h1 { color: black; }
h1 { font-size: 188%; }
h1 .editsection { font-size: 53%; }
Changes to come:
font-size:2.5em
font-weight: bold;
color:#795290
Result:
| For You |
h2 (== ==)
Subsection, the most used in all our pages.
As of today = black, not as big as in our pages.
So far we've used h1 instead (very BAD) because its size were more appealing.
Example:
7 february 2011
css code
h2 { color: black; }
h2 { font-size: 150%; }
h2 .editsection { font-size: 67%; }
Changes to come:
font-size:2em
font-weight: bold;
color:#DE8300
Result:
| 7 february 2011 |
h3 (=== ===)
Sub-Subsection, which will replace the use of == == in all our pages.
As of today = black, it was white in previous css, reason why we couldn't use it (ALAS!).
Example:
LP, CD, Cassettes and Other versions
css code
h3, h4, h5, h6 {
color: black;
background: none;
font-weight: normal;
margin: 0;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
will become
h3, h4 {
color: AB3E00;
background: none;
font-weight: normal;
margin: 0;
padding-top: .5em;
padding-bottom: .17em;
border-bottom: 1px solid #aaa;
}
h3, h4, h5, h6 {
border-bottom: none;
font-weight: bold;
}
h3 { font-size: 132%; }
h3 .editsection { font-size: 76%; font-weight: normal; }
Changes to come: Will become 1.5em Color change to color:#AB3E00 Will be normal by default, user will have to make it bold if necessary. Result:
| LP, CD, Cassettes and Other versions |
h4 (==== ====)
Sub-sub-Subsection, which will be used for chart titles in all our pages.
As of today = black, it was white in previous css, reason why we couldn't use it (ALAS!).
Example:
Remarks / Personnel
css code
h4 { font-size: 116%; }
h4 .editsection { font-size: 86%; font-weight: normal; }
Changes to come: Will become 100% Will change color to #AB3E00 Will be normal by default, so that 2 levels of titles are available. Result: Nota: in charts use the prefix ! instead of | to make the title bold.
| Remarks / Personnel |
|---|
| Remarks / Personnel |
h5 (===== ======)
As of today = use as title of our navigation block (check above menu on the left), it was white in previous css, I turned it to black temporarily. Example:
css code
h5 { font-size: 100%; }
h5 .editsection { font-weight: normal; }
Changes to come: will remain 100% Color change: Color:#EBEAF1 or white tests to come Font-weight:normal Result:
| Navigation |
|---|
| Navigation |
| Navigation |
| Navigation |
h6 (====== ======)
As of today = I have no idea where this is used. It was white in previous css, I turned it to black temporarily to be able to locate it. Example:
PrinceVault
css code
h6 { font-size: 80%; }
h6 .editsection { font-size: 125%; font-weight: normal; }
Changes to come: Will be turned back to white. Result:
| PrinceVault |
Markups for body and pages content
body {
font: x-small sans-serif;
background: #20013F url(princevaultbackground4_reverse.PNG) 0 0;
background-repeat: repeat-x;
color: black;
margin: 0;
padding: 0;
}
^^ this sets the background image and the replacement color in the site
'#content {
background: white;
color: black;
border: 1px solid #aaa;
border-right: none;
line-height: 1.5em;
}
^^ this sets the background color in pages and the font color default as black
'#bodyContent h1, #bodyContent h2 {
margin-bottom: .6em;
}
^^ this sets the margins between headers markups and text before and after
'#bodyContent h3, #bodyContent h4, #bodyContent h5 {
margin-bottom: .3em;
}
^^ this sets the margins between headers markups and text before and after
Paragraphs
p {
margin: .4em 0 .5em 0;
line-height: 1.5em;
}
example:
Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
Nota: All text is by default into "p" tags, it is not necessary to include the tag in itself. The use of div align="justify" is prohibited. example:
Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset.
Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
is equivalent to: Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset.
Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
Markups for lists
The return visual for * in our pages is currently a small blue square.
This can be changed if necessary: color, size, whatever.
Why: the color of the bullet.gif is not one of our defined colors.
Example in xhtml:
- Purple Rain
- Let's Go Crazy
- Take Me With U
- Computer Blue
Example in wiki:
- Purple Rain
- Let's Go Crazy
- Take Me With U
- Computer Blue
css code
ul {
line-height: 1.5em;
list-style-type: square;
margin: .3em 0 0 1.5em;
padding: 0;
list-style-image: url(bullet.gif);
}
^^ this is equivalent to " * " in the wiki
ol {
line-height: 1.5em;
margin: .3em 0 0 3.2em;
padding: 0;
list-style-image: none;
}
^^ this is equivalent to " :: " in the wiki
li {
margin-bottom: .1em;
}
^^ this is equivalent to the space from " * " and text in the wiki
Changes to come
Turn the bullet color into one of our colors.
Maybe: change the bullet form from square to round?
Attention: bullets are also used in our left navigation menu.
Result: the position of the bullet is incorrect, when it's implemented in our site, it will position itself the right way.
Main Page
Biographies
Discography
A-Z Song list
Live performances
Films And Videos
Bibliography
Websites
Recent changes
FAQ
Main Page
Biographies
Discography
A-Z Song list
Live performances
Films And Videos
Bibliography
Websites
Recent changes
FAQ
Main Page
Biographies
Discography
A-Z Song list
Live performances
Films And Videos
Bibliography
Websites
Recent changes
FAQ
Main Page
Biographies
Discography
A-Z Song list
Live performances
Films And Videos
Bibliography
Websites
Recent changes
FAQ
Definition list
dl {
margin-top: .2em;
margin-bottom: .5em;
}
dt {
font-weight: bold;
margin-bottom: .1em;
}
dd {
line-height: 1.5em;
margin-left: 2em;
margin-bottom: .1em;
}
example: in wiki the end tags are not read (!?)
dt = title, will be in bold, use the wiki mark up " ; "
dd = description, automatically indented, , use the wiki mark up " :: ".
in xHTML:
- Purple Rain
- Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
in wiki:
- Purple Rain
- Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.
Links
a {
text-decoration: none;
color: #002bb8;
background: none;
}
a:visited {
color: #5a3696;
}
a:active {
color: #faa700;
}
a:hover {
text-decoration: underline;
}
a.stub {
color: #772233;
}
a.new, #p-personal a.new {
color: #ba0000;
}
a.new:visited, #p-personal a.new:visited {
color: #a55858;
}
xHTML tags
- <br /> Defines a single line break
Differences Between HTML and XHTML In HTML the <br> tag has no end tag. In XHTML the <br> tag must be properly closed, like this: <br />. In wiki: an empty line will be considered as line break, so beware if you mix a br with an empty line this will count as 2 br.
- The <hr /> tag creates a horizontal line in an HTML page
Differences Between HTML and XHTML
In HTML, the <hr> tag has no end tag.
In XHTML, the <hr> tag must be properly closed, like this: <hr />.
In wiki: " ---- "
