Guideline:Graphic Chart

From Prince Vault
Jump to: navigation, search

Guideline:Graphic Chart

New color chart

PVnewcolorchart.png

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".

div id="p-navigation"

  • 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:

Navigation

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
    1. 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. Bulletdarkorange.gif   Main Page
Bulletdarkorange.gif   Biographies
Bulletdarkorange.gif   Discography
Bulletdarkorange.gif   A-Z Song list
Bulletdarkorange.gif   Live performances
Bulletdarkorange.gif   Films And Videos
Bulletdarkorange.gif   Bibliography
Bulletdarkorange.gif   Websites
Bulletdarkorange.gif   Recent changes
Bulletdarkorange.gif   FAQ

Bulletorange.gif   Main Page
Bulletorange.gif   Biographies
Bulletorange.gif   Discography
Bulletorange.gif   A-Z Song list
Bulletorange.gif   Live performances
Bulletorange.gif   Films And Videos
Bulletorange.gif   Bibliography
Bulletorange.gif   Websites
Bulletorange.gif   Recent changes
Bulletorange.gif   FAQ

Bulletdarkpurple.gif   Main Page
Bulletdarkpurple.gif   Biographies
Bulletdarkpurple.gif   Discography
Bulletdarkpurple.gif   A-Z Song list
Bulletdarkpurple.gif   Live performances
Bulletdarkpurple.gif   Films And Videos
Bulletdarkpurple.gif   Bibliography
Bulletdarkpurple.gif   Websites
Bulletdarkpurple.gif   Recent changes
Bulletdarkpurple.gif   FAQ

Bulletpurple.gif   Main Page
Bulletpurple.gif   Biographies
Bulletpurple.gif   Discography
Bulletpurple.gif   A-Z Song list
Bulletpurple.gif   Live performances
Bulletpurple.gif   Films And Videos
Bulletpurple.gif   Bibliography
Bulletpurple.gif   Websites
Bulletpurple.gif   Recent changes
Bulletpurple.gif   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; }

now: general link
new: general link

a:visited { color: #5a3696; }

now: visited link
new: visited link

a:active { color: #faa700; }

now: active link
new: active link

a:hover { text-decoration: underline; }

now: hover link
unchanged

a.stub { color: #772233; }

now: stub link
unchanged

a.new, #p-personal a.new { color: #ba0000; }

now: new link
new: new link

a.new:visited, #p-personal a.new:visited { color: #a55858; }

now: new visited link
unchanged

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: " ---- "