 |
VWcms | Style-Sheet |
![[PREV]](/_vdub/arrow_left.png "open previous page"){kind=icon}
![[back]](/_vdub/arrow_down.png "go back to previously viewed page"){kind=icon}
![[NEXT]](/_vdub/arrow_right.png "open next page"){kind=icon}
![[PRINT]](/_vdub/print_all.png "print entire site")
![[LOGIN]](/_vdub/key.png "login to manage site")
The style-sheets contain the required Cascading Style Sheet (CSS) markup for the site. There are two used to style the site. The first contains all that is used to define VWcms for the current release. The second is used by the site to define it's own styles and to provide any required customisation of existing VWcms styles. Some knowlege of CSS is required to customise these!
It is recommended to modify only those in the site CSS!
This is the VWcms style-sheet containing all of the VWcms-specific markup; this is loaded first:
/*************************/
/* VWcms required styles */
/*************************/
/* of course, these can be overridden in the _SITE.CSS */
/* navigation menu */
.vwcms_toc_img { margin:0.1em; margin-right:0.1em; }
.vwcms_toc_num { margin:0.2em; margin-right:0.2em; }
.vwcms_toc_1 { margin-top:0.1em; margin-bottom:0.1em; padding-left:0em; }
.vwcms_toc_2 { margin-top:0.1em; margin-bottom:0.1em; padding-left:1em; }
.vwcms_toc_3 { margin-top:0.1em; margin-bottom:0.1em; padding-left:2em; }
.vwcms_toc_4 { margin-top:0.1em; margin-bottom:0.1em; padding-left:3em; }
.vwcms_toc_5 { margin-top:0.1em; margin-bottom:0.1em; padding-left:4em; }
.vwcms_toc_cur { background-color:inherit; }
/* navigation drop-down selector */
.vwcms_toc_sel { margin:0.1em; margin-right:0.5em; }
.vwcms_toc_opt { margin:0.1em; margin-right:0.5em; }
/* navigation print TOC */
.vwcms_toc_print { margin:1em; margin-left:3em; }
/* site map */
.vwcms_map_1 { text-align:left; white-space:nowrap;
vertical-align:top; padding-left:1em;
padding-top:0.3em; padding-bottom:0.2em;
font-weight:bold; }
.vwcms_map_2 { text-align:left; vertical-align:top;
white-space:nowrap; padding-left:3em; }
.vwcms_map_3 { text-align:left; vertical-align:top;
white-space:nowrap; padding-left:4em; }
.vwcms_map_4 { text-align:left; vertical-align:top;
white-space:nowrap; padding-left:5em; }
.vwcms_map_5 { text-align:left; vertical-align:top;
white-space:nowrap; padding-left:6em; }
.vwcms_map_teaser { font-style:italic; padding-left:1em; white-space:normal; }
.vwcms_map_section { padding-left:1em; padding-right:1em; }
/* message categories */
.vwcms_error {
padding:1px 10px 1px 10px;
font-size:130%; font-weight:bold;
background-color:red; color:black;
}
.vwcms_warn {
padding:1px 10px 1px 10px;
font-size:130%; font-weight:bold;
background-color:yellow; color:black;
}
.vwcms_inform {
padding:1px 10px 1px 10px;
font-size:110%; font-weight:bold;
background-color:LimeGreen; color:black;
}
.vwcms_no_content {
display:block; padding:0.2em 1.0em 0.2em 1.0em;
font-weight:bold; text-align:center;
background-color:LimeGreen; color:black;
}
.vwcms_include {
background-color:white;
}
.vwcms_include_error {
display:block; padding:0.5em; margin-top:0.5em;
font-weight:bold;
background-color:red; color:black;
}
.vwcms_btn {
font-size:80%;
white-space:nowrap;
border-style:solid;
border-width:1px;
border-color:LightGray DarkSlateGray DarkSlateGray LightGray;
border-color:#d3d3d3 #2f4f4f #2f4f4f #d3d3d3;
background-color:LightSteelBlue;
background-color:#b0c4de;
padding-top:1px;
}
/* navigation <<PREV, NEXT>> etc. */
.vwcms_nav { font-weight:bold; }
/* the navigation item is an image */
.vwcms_nav_img { }
/* adjust opacity to indicate item is inactive */
.vwcms_nav_img_off {
opacity:0.5; /* CSS-3 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* MSIE */
filter:alpha(opacity=50); /* MSIE */
-moz-opacity:0.5; /* Mozilla v1.6 and earlier */
-khtml-opacity:0.5 /* Safari */
}
/* the print item */
.vwcms_print { }
/* the print item is an image */
.vwcms_print_img { }
/* adjust opacity to indicate item is inactive */
.vwcms_print_img_off {
filter:alpha(opacity=50); /* MSIE */
opacity:0.5; /* CSS-3 */
-moz-opacity:0.5; /* Mozilla v1.6 and earlier */
-khtml-opacity:0.5 /* Safari */
}
.vwcms_timestamp {
font-weight:bold; text-decoration:underline;
}
.vwcms_login { }
.vwcms_logout,
.vwcms_logout_img
{
border:1px; border-color:DarkGray; border-style:solid;
padding:0 0.5em 0 0.5em; font-weight:bold;
}
.vwcms_login_remote,
.vwcms_login_remote_img
{
border:1px; border-color:DarkGray; border-style:solid;
padding:0 0.5em 0 0.5em; font-weight:bold;
}
.vwcms_manage,
.vwcms_manage_img
{
border:1px; border-color:DarkGray; border-style:solid;
padding:0 0.5em 0 0.5em; font-weight:bold;
}
/* show lang */
.vwcms_show_lang {
border:1px; border-color:DarkGray; border-style:dotted;
background-color:white; padding:1em;
}
/**********/
/* search */
/**********/
/* the search item */
.vwcms_search input {
font-size:80%;
border:1px; border-color:DarkGray; border-style:solid;
white-space:nowrap;
}
/* results from a search */
.vwcms_result { margin-bottom:0.2em; font-weight:bold; }
.vwcms_result_quote { margin-bottom:0.2em; margin-top:0.1em; }
.vwcms_result_count { margin-right:0.5em; font-weight:bold; }
.vwcms_result_goto { font-weight:bold; }
/***********/
/* comment */
/***********/
.vwcms_comment_list { padding:1em; width:90%; border-collapse:collapse; }
.vwcms_comment_item {
border-width:1px; border-style:dotted; border-color:gray;
padding:10px;
}
.vwcms_comment_who {
display:inline;
font-family:sans-serif,serif; font-weight: bold;
text-decoration:underline;
}
.vwcms_comment_time {
display:inline;
font-family:sans-serif,serif;
padding-left:15px;
}
.vwcms_comment_text {
display:block; white-space:pre; font-size:90%;
padding:5px; max-height:15em; overflow:auto;
}
.vwcms_comment_unmoderated {
display:block; text-align:center;
font-family:sans-serif,serif; font-style: italic;
}
.vwcms_qanda_challenge {
display:inline; padding:0.5em; margin:0.5em; white-space:nowrap;
border-width:1px; border-style:solid; border-color:gray;
}
/************/
/* synopsis */
/************/
.vwcms_synopsis_list {
}
.vwcms_synopsis_entry {
padding:0.2em; padding-bottom:0.5em;
}
.vwcms_synopsis_title {
font-weight:bold; text-decoration:underline;
}
.vwcms_synopsis_datetime {
padding-left:2em;
}
.vwcms_synopsis_datetime_narrow {
display:block;
}
.vwcms_synopsis_extract {
display:block; padding:0.2em; padding-top:0.5em;
}
.vwcms_synopsis_extract_narrow {
display:block;
}
.vwcms_synopsis_read {
padding-left: 0.5em; font-weight:bold;
}
.vwcms_synopsis_read_narrow {
font-weight:bold;
}
.vwcms_synopsis_text {
display:block; margin:2em; padding:1em;
border-width:1px; border-style:dotted; border-color:gray;
font-style:italic;
}
/********/
/* blog */
/********/
.vwcms_blog_datetime {
font-weight:bold; text-decoration:underline;
}
.vwcms_blog_list {
}
.vwcms_blog_list_entry {
padding-bottom:0.5em;
}
.vwcms_blog_list_title {
font-weight:bold; text-decoration:underline;
}
.vwcms_blog_list_datetime {
padding-left:2em;
}
.vwcms_blog_list_datetime_narrow {
display:block;
}
.vwcms_blog_list_extract {
display:block; padding-top:0.5em;
}
.vwcms_blog_list_extract_narrow {
display:block;
}
.vwcms_blog_list_read {
padding-left:1em; font-weight:bold;
}
.vwcms_blog_list_read_narrow {
display:block; font-weight:bold;
}
/*******/
/* tag */
/*******/
.vwcms_tag_cloud_list {
}
.vwcms_tag_cloud_simple {
padding:2px 1em 5px 1em;
}
.vwcms_tag_cloud_simple a {
margin: 0 2px 0 2px;
}
/********************/
/* CSS vertical TOC */
/********************/
div#vwcms_toc_css_pop
{
margin:0 0 2em 0; padding:0;
z-index:100;
}
div#vwcms_toc_css_pop ul
{
width:10em;
margin:0; padding:0;
}
/* each list entry */
div#vwcms_toc_css_pop li
{
position:relative;
list-style-type:none;
display:block;
margin:0;
padding:0 0 0 0.5em;
border-width:1px;
border-style:solid;
/* MSIE(6?) does not like a series of color names here! */
border-color:LightGray DarkSlateGray DarkSlateGray LightGray;
border-color:#d3d3d3 #2f4f4f #2f4f4f #d3d3d3;
background-color:LightSteelBlue;
background-color:#b0c4de;
color:Black;
white-space:nowrap;
}
/* occlude all but the top level list */
div#vwcms_toc_css_pop ul ul,
div#vwcms_toc_css_pop ul ul ul,
div#vwcms_toc_css_pop ul ul ul ul,
div#vwcms_toc_css_pop ul ul ul ul ul,
div#vwcms_toc_css_pop ul ul ul ul ul ul,
div#vwcms_toc_css_pop li:hover ul ul,
div#vwcms_toc_css_pop ul li:hover ul ul,
div#vwcms_toc_css_pop ul ul li:hover ul ul,
div#vwcms_toc_css_pop ul ul ul li:hover ul ul
{
display:none;
position:absolute;
top:0.3em;
left:95%;
/* push it above the rest */
z-index:200;
}
/* reveal hovered subordinate */
div#vwcms_toc_css_pop ul li:hover ul,
div#vwcms_toc_css_pop ul ul li:hover ul,
div#vwcms_toc_css_pop ul ul ul li:hover ul,
div#vwcms_toc_css_pop ul ul ul ul li:hover ul
{
display: block;
}
/* links in the list entries */
div#vwcms_toc_css_pop li a
{
display: block;
width: 100%;
color: Black;
font-variant:normal; font-size:100%; line-height:200%;
text-decoration:none;
}
/* list items with subordinates have the little dofer image */
div#vwcms_toc_css_pop li a.more
{
background:LightSteelBlue url(./more.gif) no-repeat bottom right;
}
div#vwcms_toc_css_pop li a.open
{
font-weight:bold;
}
div#vwcms_toc_css_pop li a.open_more
{
font-weight:bold;
background:LightSteelBlue url(./more.gif) no-repeat bottom right;
}
/* highlight a list item when hovered */
div#vwcms_toc_css_pop li a:hover
{
color:Blue;
font-weight:bold;
}
/**********************/
/* CSS horizontal TOC */
/**********************/
div#vwcms_toc_css_drop
{
margin:0; padding:0;
z-index:100;
}
div#vwcms_toc_css_drop ul
{
list-style:none;
/*** width:8em; ***/
left:5%;
margin:0; padding:0;
float:left;
text-align:center;
}
div#vwcms_toc_css_drop ul ul
{
text-align:left;
}
/* each list entry */
div#vwcms_toc_css_drop li
{
position:relative;
list-style-type:none;
display:block;
margin:0; padding:0;
border-width:1px;
border-style:solid;
/* MSIE(6?) does not like a series of color names here! */
border-color:LightGray DarkSlateGray DarkSlateGray LightGray;
border-color:#d3d3d3 #2f4f4f #2f4f4f #d3d3d3;
background-color:LightSteelBlue;
color:Black;
white-space:nowrap;
}
div#vwcms_toc_css_drop li li,
div#vwcms_toc_css_drop li li li,
div#vwcms_toc_css_drop li li li li,
div#vwcms_toc_css_drop li li li li li
{
padding:0 0 0 0.5em;
}
/* occlude all but the top level list */
div#vwcms_toc_css_drop ul ul
{
display:none;
position:absolute;
top:85%;
left:5%;
/* push it above the rest */
z-index:200;
}
div#vwcms_toc_css_drop ul ul ul,
div#vwcms_toc_css_drop ul ul ul ul,
div#vwcms_toc_css_drop ul ul ul ul ul,
div#vwcms_toc_css_drop ul ul ul ul ul ul,
div#vwcms_toc_css_drop li:hover ul ul,
div#vwcms_toc_css_drop ul li:hover ul ul,
div#vwcms_toc_css_drop ul ul li:hover ul ul,
div#vwcms_toc_css_drop ul ul ul li:hover ul ul
{
display:none;
position:absolute;
left:90%;
top:0.5em;
/* push it above the rest */
z-index:200;
}
/* reveal hovered subordinate */
div#vwcms_toc_css_drop ul li:hover ul,
div#vwcms_toc_css_drop ul ul li:hover ul,
div#vwcms_toc_css_drop ul ul ul li:hover ul,
div#vwcms_toc_css_drop ul ul ul ul li:hover ul
{
display: block;
}
/* links in the list entries */
div#vwcms_toc_css_drop li a
{
display: block;
width: 100%;
color: Black;
font-variant:normal; font-size:100%; line-height:200%;
text-decoration:none;
}
/* list items with subordinates have the little dofer image */
div#vwcms_toc_css_drop li a.more
{
background:LightSteelBlue url(./more.gif) no-repeat bottom right;
}
div#vwcms_toc_css_drop li a.open
{
font-weight:bold;
}
div#vwcms_toc_css_drop li a.open_more
{
font-weight:bold;
background:LightSteelBlue url(./more.gif) no-repeat bottom right;
}
/* highlight a list item when hovered */
div#vwcms_toc_css_drop li a:hover
{
color:Blue;
font-weight:bold;
}
/*************************/
/* VWcms Site Management */
/*************************/
/* manage interface */
.manage_interface {
z-index: 1;
opacity: 1;
filter:alpha(opacity=100);
}
/* manage interface */
.manage_interface_drag {
background-color: gray;
font-size: 60%;
}
/* manage workspace */
.manage_workspace {
border-style: solid;
border-color: DarkSlateGray;
border-width: 4px;
background-color: white;
padding:2em;
}
/* manage <textarea> */
.manage_textarea {
border-style: solid;
border-color: #444444;
border-width: 1px;
}
/* manage button */
.manage_btn {
font-size:80%;
white-space:nowrap;
border-style:solid;
border-width:1px;
border-color:LightGray DarkSlateGray DarkSlateGray LightGray;
border-color:#d3d3d3 #2f4f4f #2f4f4f #d3d3d3;
background-color:LightSteelBlue;
background-color:#b0c4de;
padding-top:1px;
}
/* manage <select> */
.manage_sel {
font-size:80%;
border-style:outset;
border-color: #444444;
border-width:1px;
}
/* manage <input type="text"> */
.manage_txt {
font-size:80%;
border-style:inset;
border-color: #444444;
border-width:1px;
}
/* manage [remove] ... "Section Title" [x] */
.manage_ellipsis {
font-size:90%;
}
/* manage resource item */
.manage_res_table td { padding:0.1em; padding-right:1em; }
.manage_res_name { margin-top:0.2em; font-weight:bold; }
/* attention! this is a draft */
.manage_draft { font-size:120%; font-weight:bold; color:coral; }
/********/
/* form */
/********/
.vwcms_form_attention {
padding: 0.5em; background-color: yellow;
border-style: dotted; border-width: 1px; border-color: black;
}
.vwcms_form_test {
padding: 1em; background-color: lavender;
border-style: dashed; border-width: 1px; border-color: black;
}
/*******/
/* end */
/*******/
Here is the style-sheet used by the Vdub (this) site, this is loaded second:
/************************/
/* site-specific styles */
/************************/
/* of course, these can also be used to override those in _VWCMS.CSS */
body {
color: black;
font-family:arial,helvetica,sans-serif; font-size:10pt;
}
@media all {
/* constrain to A3 size (even on the screen) */
* { max-width:297mm; }
}
@media print {
* { max-width:180mm; }
body {
/* constrain to A4 */
min-width:200mm; max-width:200mm; width:200mm;
padding:0; margin:0;
background-image:none;
background-color:white;
}
}
a:link { color:MediumBlue; text-decoration:none; }
a:visited { color:MediumBlue; text-decoration:none; }
a:active { color:black; text-decoration:none; }
a:hover { color:black; text-decoration:underline; }
h1 {
font-size:160%; font-weight:bold;
margin-top:1.5em; margin-bottom:1.0em;
}
@media print { h1 { page-break-before:auto; } }
h2 {
font-size:140%; font-weight:bold;
margin-top:1.2em; margin-bottom:0.7em;
}
h3 {
font-size:120%; font-weight:bold;
margin-top:1.0em; margin-bottom:0.5em;
}
h4 {
font-size:110%; font-weight:bold;
margin-top:0.5em; margin-bottom:0.5em;
}
h5 {
font-size:110%; font-weight:bold;
margin-top:0.1em; margin-bottom:0;
}
h6 {
font-size:110%; font-weight:bold;
margin-top:0.1em; margin-bottom:0; text-align:center;
}
th, td { vertical-align:top; }
img { border-style: none; }
.vdub_site { vertical-align:bottom; }
.vdub_main {
width:100%;
padding-bottom:1em;
}
.vdub_left {
vertical-align:top;
padding:1em;
width:10%;
white-space:nowrap;
}
.vdub_middle {
vertical-align:top;
padding:1em;
max-width:85%; min-width:85%;
}
.vdub_right {
vertical-align:top;
padding:1em;
white-space:nowrap;
width:5%;
}
.vdub_content {
border-style:solid; border-width:1px; border-color:DarkGray;
padding: 1em 1em 1em 1em;
background-color:WhiteSmoke;
}
.vdub_footer {
width:100%;
vertical-align:top;
font-size:80%;
padding:1em;
}
.vdub_logged_in {
background-color:gold; padding:0 5px 0 5px;
border-width:1px; border-color:blue; border-style:inset;
}
The same styles defined in the site sheet override those in the VWcms sheet.
![[PRINT]](/_vdub/print.png "print this page")
![[PRINT]](/_vdub/print_plus.png "print this and sub-pages")
|
![[TOP]](/_vdub/arrow_up.png "go to top of page"){kind=icon} |
|
| As at: Thursday, 23 May 2013 07:48 Updated: Sunday, 24 July 2011 22:40 (nearly 2 years ago) | ||