User:Compooper/cologneblue.css

/*     _                                       _                                   _        _    _| | _ __  _   _  _ _      _ _ (_)  ___  | ,_) /'_` |( '__) ( '_`\  /'_` )| |/' _ `\| |  ( (_| || |   | (_) || (_) )( (_| || ||  || |_ `\__,_)(_)   `\__, || ,__/'`\__,_)(_)(_) (_)`\__)             _| || |                                       `\___/'(_)                                                    A custom Cologne Blue skin mod that takes the AVID time machine back to the good old days of the Internet

IMPORTANT NOTE: We do not use the CLG name and branding in any of these styles, this is to maintain consistency between pages of the wiki.

Instructions 1. Copy and paste everything below the base theme into your personal CSS (located at User:USERNAME/cologneblue.css) 2. Starting from one of the long dotted bars and ending at the next, select the year theme you want to display in your CSS 3. At the end of the document, paste the copied CSS below the "PASTE SELECTION BELOW" notice 4. If you do not pick a theme the CSS will display the 2018 style

A list of styles available as of April 1, 2023 1. 2008 2. Late 2008 3. 2011 4. 2014 5. 2018 (also default)

Credit to PajamaFrix for developing the original theme modification All additional styles and modifications done by Compooper

/*-- */ /* BASE THEME (needed to faciliate design of skin) */ body, #toplinks, #article, #article td, #article th, #article p, #quickbar {font-family: Arial, Verdana, Helvetica, sans-serif;}

body.ns-0, body {background: #252525;}

.image img, p img { max-width: 500px; height: auto; }


 * 1) topbar {background: transparent;}

background: #252525; margin:0; padding:0; height: 200px; margin-bottom: 40px; text-transform: capitalize; min-height:100px; line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }
 * 1) sitetitle {

display: inline-block; background: transparent url("https://i.imgur.com/X7pxhsw.png") no-repeat center; background-size:contain; width: 768px; height: 200px; padding:0 0 0 10px; margin:0; margin-left:8px; font-size:0; vertical-align: bottom; }
 * 1) sitetitle a, #sitetitle a:hover {

top: 200px; background: #666; height: 40px; right: 0; text-transform: capitalize; }
 * 1) toplinks {

font-size: 14px; }   text-decoration: underline; }
 * 1) toplinks a {
 * 1) toplinks a:hover {

.cb-piped-list > li:not(:first-child)::before { content: '⸽'; display: inline-block; margin-right: 10px; } .cb-piped-list > li { float: left; white-space: nowrap; position: relative; display: block; font-weight: bold; line-height: 40px; padding: 0 5px; margin-bottom: 0; }

margin-bottom:40px; }
 * 1) sitetitle, #sitesub, #toplinks {

margin-bottom:10px; }
 * 1) linkcollection {

h1 {font-size: 175%;}

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: black; font-family: Arial, Verdana, Helvetica, sans-serif; }

border: 1px solid #CDCDCD; background: #fff; margin-left: 220px; padding: 10px; margin-right: 10px; }	width: 170px; top:315px; background: #fff; font-weight:normal; border: 1px solid #000; font-size: 80%; color: #666; padding: 2.5px 10px 5px 10px; left: 14px; height: 200px; overflow: auto; box-shadow: 0 0 0 1px #666; }
 * 1) article {
 * 1) quickbar {


 * 1) p-search {display:none;}

list-style-type: square; margin: 0.3em 0 0 0.5em; }
 * 1) quickbar .portlet ul, #quickbar .portlet li {


 * 1) quickbar li {list-style: none !important;}

content: "\2022"; color: #c2e1ff; display: inline-block; position: absolute; width: 1em; margin-left: -1em; margin-top: 0.15em; }	line-height: 1.25em; display: block; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; position: relative; color: #497FB1; text-decoration: none; }
 * 1) quickbar li:before {
 * 1) quickbar li a {

font-weight:normal; font-family: 'AVID Sans'; color: #497FB1; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; }
 * 1) quickbar h3 {

background-color: #E3EEF9; color: #DE590A; } a:link, a:visited, .oo-ui-tabOptionWidget:not(.oo-ui-optionWidget-selected).oo-ui-widget-enabled .oo-ui-labelElement-label{ color: #497FB1; text-decoration:none; }
 * 1) quickbar li a:hover, #quickbar h3:hover {

a:hover {color:#FF7F00;text-decoration:underline;}
 * 1) linkcollection, #sitesub {visibility: hidden;}
 * 2) ca-cb-mainpage {margin-left:5px;}

font-family: Arial, Verdana, Helvetica, sans-serif; text-align: left; position: relative; height: 80px; margin: 20px 0 10px 0; padding: 0px; font-size: 75%; color: #DDDDDD; }
 * 1) footer {
 * 1) footer li {line-height: 30px;}
 * 2) footer li a {color: #C5DBED;}
 * 3) footer li a:hover {color: #DDDDDD;}

text-indent: -100px; background: #fff; background-image: none; color: #497FB1; text-decoration: none; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {

text-indent: -100px; background: #E3EEF9; background-image: none; color: #DE590A; text-decoration: underline; }
 * 1) pt-notifications-alert .mw-echo-notifications-badge li a:hover, #pt-notifications-notice .mw-echo-notifications-badge li a:hover{

display: list-item; margin: 0.75em 0.5em 0.75em 6.5px; }
 * 1) p-personal li#pt-notifications-alert, #p-personal li#pt-notifications-notice {


 * 1) pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::before, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read::before, #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {filter:none;}
 * 2) pt-notifications-alert .mw-echo-notifications-badge, #pt-notifications-notice .mw-echo-notifications-badge {filter:none;}
 * 3) pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {opacity: 1;}
 * 4) pt-uls {display:none;}


 * 1) article p.subtitle, #article p.subpages, #article p.tagline {display:none;}
 * 2) firstHeading {padding-bottom: 5px;margin-bottom: 5px;}
 * 3) siteNotice {visibility: visible;border:none;}

.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { background: #A9CEEE url(https://i.imgur.com/feC4z6s.png) repeat-x top left; border: solid 1px #979797; color: #333; padding: .3em 1em .3em 1em; margin: 0; cursor: pointer; font-weight: bold; font-size: 90%; overflow: visible; width: auto; } .oo-ui-buttonElement > .oo-ui-buttonElement-button {min-height: 20px;}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { border-color: #a2a9b1; background-color: #CCC; color: #333; font-weight: normal; }

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover{ color: #000; background-color: #A9CEEE; border-color: #a2a9b1; font-weight: bold; }

width:166px; border:1px solid #cdcdcd; margin:0 3px; padding:.1em 0 .1em .2em; vertical-align:bottom; line-height:1.4em; height:1.7em; color:#666; text-align:left; font-family: Arial !important; }	vertical-align:top; background:transparent url(https://i.imgur.com/1IFH14g.png) no-repeat top; border:none; height:17px; width:17px; margin:.2em 0 0 0; padding:0; color:transparent; cursor:pointer }   font-family: Arial; }   font-weight: normal; font-family: 'Arial'; color: #497FB1; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { color: #000; background-color: #A9CEEE; border-color: #a2a9b1; font-weight: bold; font-family: Tahoma; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { border-color: #a2a9b1; background-color: #CCC; color: #333; font-family: Tahoma; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { color: #d33; font-family: Tahoma; } .editOptions { background-color: #eaecf0; color: #202122; border: 1px solid #c8ccd1; border-top: 0; padding: 1em 1em 1.5em 1em; margin-bottom: 2em; font-family: Arial; } h1, #firstHeading, .firstHeading, h2, h3, h4, h5, h6 { font-family: 'Arial'; font-weight: 500; } .mw-message-box { font-family: 'Arial'; } .mw-body-content { font-family: 'Arial' !important; letter-spacing: 0.7px; }
 * 1) p-search #searchInput {
 * 1) p-search input.mw-fallbackSearchButton {
 * 1) mw-navigation a {
 * 1) quickbar h3 {

/*-- */ /* THE ABOVE WAS THE BASE THEME THAT IS ESSENTIAL FOR PROPER FORMATTING. */ /*	THE BELOW IS ALL THE CODE FOR THE DIFFERENT ERA SELECTIONS */ /*-- */

/*-- */ /* 2008 */ body.ns-0, body {background: #021F3B;} background: #021F3B; margin:0; padding:0; height: 44px; margin-bottom: 40px; text-transform: capitalize; /* margin:-10px 0 0; */ min-height:100px; /* padding: 5px; */ line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }
 * 1) sitetitle {

/* Header image */ display: inline-block; background: transparent url("https://i.imgur.com/4JQak80.png") no-repeat center; background-size:contain; width: 550px; height: 79px; padding:0 0 0 10px; margin:0; margin-bottom: -45px; font-size:0; vertical-align: bottom; }   top: 200px; background: #4A83BC; height: 40px; right: 0; text-transform: capitalize; }   font-family: Arial; background: #666; margin-bottom: 5px; }   font-weight: normal; font-family: 'Arial'; color: white; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; background: #4A83BC; }   font-size: 17px; } div#toplinks { top: 122px; font-weight: normal; }   width: 170px; top: 214px; } div#linkcollection { margin-bottom: 7px; }
 * 1) sitetitle a, #sitetitle a:hover {
 * 1) toplinks {
 * 1) syslinks li {
 * 1) quickbar h3 {
 * 1) toplinks a {
 * 1) quickbar {

/*-- */ /* Late 2008 */ body.ns-0, body {background: #021F3B;} background: #021F3B; margin:0; padding:0; height: 44px; margin-bottom: 40px; text-transform: capitalize; /* margin:-10px 0 0; */ min-height:100px; /* padding: 5px; */ line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }
 * 1) sitetitle {

/* Header image */ display: inline-block; background: transparent url(https://i.imgur.com/vNCdWmL.png) no-repeat center; background-size: contain; width: 622px; height: 126px; padding: 0 0 0 10px; margin: 0; margin-bottom: -45px; font-size: 0; vertical-align: bottom; }   top: 200px; background: #4A83BC; height: 40px; right: 0; text-transform: capitalize; }   font-size: 14px; } li { display:list-item; }   font-weight: normal; font-family: 'Arial'; color: white; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; background: #4A83BC; }   font-size: 14px; } div#toplinks { top: 153px; font-weight: normal; }   width: 170px; top: 239px; } div#p-search { padding: 5px; display: inline-block!important; margin-top: 30px; } div#linkcollection { margin-bottom: 10px; }
 * 1) sitetitle a, #sitetitle a:hover {
 * 1) toplinks {
 * 1) toplinks a {
 * 1) quickbar h3 {
 * 1) toplinks a {
 * 1) quickbar {

/* -- */ /* 2011 */ body.ns-0, body {background: #5293CA;} background: #5293CA; margin:0; padding:0; height: 200px; margin-bottom: 40px; text-transform: capitalize; /* margin:-10px 0 0; */ min-height:100px; /* padding: 5px; */ line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }
 * 1) sitetitle {

/* Header image */ display: inline-block; background: transparent url("https://i.imgur.com/82hJjbS.png") no-repeat center; background-size:contain; width: 514px; height: 200px; padding:0 0 0 10px; margin:0; margin-bottom: -157px; font-size:0; vertical-align: bottom; }   top: 200px; bottom: 0px; background: #122152; height: 40px; right: 0; text-transform: capitalize; } div#toplinks { top: 230px; font-weight: normal; }   font-family: Arial; background: transparent; margin-bottom: 0px; }   font-size: 14px; }   width: 170px; top: 317px; }   font-weight: normal; font-family: 'Arial'; color: #497FB1; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; background: transparent; } div#p-search { padding: 5px; display: inline-block!important; margin-top: 7px; }
 * 1) sitetitle a, #sitetitle a:hover {
 * 1) toplinks {
 * 1) syslinks li {
 * 1) toplinks a {
 * 1) quickbar {
 * 1) quickbar h3 {

/* -- */ /* 2014 */ body.ns-0, body {background: #000000;} background: #D01C22; margin:0; padding:0; height: 200px; margin-bottom: 40px; text-transform: capitalize; /* margin:-10px 0 0; */ min-height:100px; /* padding: 5px; */ line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }
 * 1) sitetitle {

/* Header image */ display: inline-block; background: transparent url("https://i.imgur.com/CP5dfj7.png") no-repeat center; background-size:contain; width: 590px; height: 200px; padding:0 0 0 10px; margin:0; margin-bottom: -157px; font-size:0; vertical-align: bottom; }   top: 200px; bottom: 0px; background: #460000; height: 40px; right: 0; text-transform: capitalize; } div#toplinks { top: 230px; font-weight: normal; }   font-family: Arial; background: transparent; margin-bottom: 0px; }   font-size: 14px; }   width: 170px; top: 317px; }   font-weight: normal; font-family: 'Arial'; color: #497FB1; font-size: 13px; margin: 0 -10px 0 -100px; padding: 0.2em 0 0.2em 100px; cursor: default; background: transparent; } div#p-search { padding: 5px; display: inline-block!important; margin-top: 7px; } /*-- */ /* 2018 (Default skin) */ body.ns-0, body {background: #252525;} background: #252525; margin:0; padding:0; height: 200px; margin-bottom: 40px; text-transform: capitalize; /* margin:-10px 0 0; */ min-height:100px; /* padding: 5px; */ line-height:1em; font-size:2.7em; font-family: "Times New Roman", Times, Georgia, serif; position:relative; }	display: inline-block; background: transparent url("https://i.imgur.com/X7pxhsw.png") no-repeat center; background-size:contain; width: 768px; height: 200px; padding:0 0 0 10px; margin:0; margin-left:8px; font-size:0; vertical-align: bottom; }	top: 200px; /* needs to be manually adjusted */ background: #666; height: 40px; right: 0; text-transform: capitalize; }   font-size: 14px; } /* -- ___   _____  ___    _____  ___                           (  _`\ (  _  )(  _`\ (_   _)(  _`\                         (_)    (_) (_)`\____)  (_)  (____/'                         ___    ___    _      ___    ___    _____  _  _____  _   _ (  _`\ (  _`\     (  _`\ (  _`\ (_   _)(_)(  _  ) `\__ \ |  _)_ | |  _ |  _)_ | |  _   | |  | || | | ||, ` | _) || (_| |_| (_| (_  | |  | || (_) || |`\ | `\____)(____/'(____/'(____/'(____/'  (_)  (_)(_____)(_) (_) ___    ___    _      _____  _       _                     (  _`\ (  _`\     (  _  )  _                      (____/'(____/'(____/'(_____)`\___x___/'                            If there is no selection it will default to the 2018 design
 * 1) sitetitle a, #sitetitle a:hover {
 * 1) toplinks {
 * 1) syslinks li {
 * 1) toplinks a {
 * 1) quickbar {
 * 1) quickbar h3 {
 * 1) topbar {background: transparent;}
 * 2) sitetitle {
 * 1) sitetitle a, #sitetitle a:hover {
 * 1) toplinks {
 * 1) toplinks a {
 * |_) )| (_) || (_(_) | |  | (_(_)
 * ,__/'| _  |`\__ \   | |  |  _)_
 * |   | | | |_) |  | |  | (_
 * (_(_)| (_(_)| |   | (_(_)| ( (_)  | |  | ||  || `\| |
 * (_) )| (_(_)| |   |  || |  | |
 * _ <'| _)_ | |  _ | | | || | | | | |
 * (_) )| (_| |_| (_) || (_/ \_) |