MediaWiki:Cologneblue.js

// 'Wetpaint' modification for 'Cologne Blue' MediaWiki theme v1.1 // intended for use on the Audiovisual Identity Database // --	// copy and paste all of this into your custom javascript for the 'cologne blue' theme, available under 'user preferences > theme'. // make sure you also have the custom CSS set or else it might not look right. // these three lines add extra CSS into the header // general link formatting $('head').append(' #linkcollection{margin-bottom:10px}#p-search{padding:5px;display:inline-block!important;margin-top:5px}#linkcollection,#p-search{visibility:visible}#p-search br,#p-search h3,#searchButton{display:none}#footer form{display:none}#ca-cb-edit{font-size:inherit;padding:0;margin:0;height:1.5em}#ca-cb-edit a{background:#a9ceee url(https://i.imgur.com/feC4z6s.png) repeat-x top left;background-color:#a9ceee;border:solid 1px #979797;color:#333;padding:.3em 1em .3em 1em;margin:0 0 0 .5em;cursor:pointer;font-weight:700;font-size:12px;overflow:visible;width:auto;text-decoration:none;font-family:Tahoma} '); // the style below formats the links above the page title (see line 35) and the search bar $('head').append(' #linkcollection {margin-bottom:10px }#p-search {padding:5px;display:inline-block!important;margin-top:5px }#linkcollection, #p-search {visibility:visible }#p-search br, #p-search h3, #searchButton {display:none }#footer form {display:none }#ca-cb-edit {font-size:inherit;padding:0;margin:0;height:1.5em }#ca-cb-edit a {background:#a9ceee url(https://i.imgur.com/feC4z6s.png) repeat-x top left;background-color:#a9ceee;border:solid 1px #979797;color:#333;padding:.3em 1em .3em 1em;margin:0 0 0 .5em;cursor:pointer;font-weight:700;font-size: 10.8px;overflow:visible;width:auto;text-decoration:none;font-family:Tahoma }#firstHeading .mw-list-item {font-size: 12px;margin: 15px 15px 0 0;display: inline-block;list-style: none;}#toplinks ul:last-child{width: auto;list-style-type: none;}#toplinks #variantlinks {bottom: 0px;}li#pt-notifications-alert a, li#pt-notifications-notice a {display: inline-block !important;overflow: hidden;vertical-align: middle;} '); // the style below formats the very top of the page (see line 17) $('head').append(' .very-top-bar {display: block;position: relative;z-index: 4;line-height: 1.4em;background: #E6E6E6 url("https://i.imgur.com/iOr60gf.png") repeat-x 0px -386px;font-size: 80%;color: #555;top: 0px;border-bottom: 1px solid #CCC;height: 2em;}.very-top-bar ul {font-size: 80%;list-style: none;color: #469B26;display: inline-block;float: right;margin: 0.3em 1.6em 0 0;}.very-top-bar ul li {display: inline-block;}#toplinks {top: 230px;font-weight: normal;}.very-top-bar ul .mw-list-item a {color: #469B26;margin: 0 5px;} '); // okay now for the actual code // creates a new div, populates it with formatting (see above), then prepends it above the site header if (document.contains(document.getElementById('topbar'))) { const newLinkBar = document.createElement('div'); const topBar = document.getElementById('topbar'); newLinkBar.setAttribute('class', 'very-top-bar'); // moving the top bar topBar.appendChild(newLinkBar); document.body.prepend(newLinkBar, topBar); // adding links to the top bar newLinkBar.appendChild(document.getElementById("p-personal").lastElementChild); document.getElementById('topbar').appendChild(document.getElementById("pt-mytalk")); }	// moves the categories into the article container document.getElementById('article').appendChild(       document.getElementById('catlinks')    ); // makes a new 'ul' element, checks for 'Edit source' on a page, if it finds it, then it moves it and a few other links into the newly created element. if (document.contains(document.getElementById('ca-cb-edit'))) { const editLinks = document.createElement('ul'); document.getElementById('firstHeading').appendChild(editLinks); document.getElementById('firstHeading').prepend(editLinks); // prepends in reverse order; last to first so to say if (document.contains(document.getElementById('ca-talk'))) { document.getElementById('firstHeading').prepend(document.getElementById('ca-talk')); document.getElementById('ca-talk').getElementsByTagName('a')[0].innerHTML = 'Talk'; }       if (document.contains(document.getElementById('ca-history'))) { document.getElementById('firstHeading').prepend(document.getElementById('ca-history')); document.getElementById('ca-history').getElementsByTagName('a')[0].innerHTML = 'History'; }       if (document.contains(document.getElementById('ca-tamovelk'))) { document.getElementById('firstHeading').prepend(document.getElementById('ca-move')); }       if (document.contains(document.getElementById('ca-watch'))) { document.getElementById('firstHeading').prepend(document.getElementById('ca-watch')); }       document.getElementById('firstHeading').prepend(document.getElementById('ca-cb-edit')); }	// moves the search box from the sidebar to above the article container document.getElementById('linkcollection').appendChild(       document.getElementById('p-search')    );

// TBD. document.getElementById('footer-navigation').appendChild(       document.getElementById('titlelinks')    ); // moves 'My Pages' out of quickbar and into the navigation bar (above search bar and below site header) if (document.contains(document.getElementById('p-personal'))) { document.getElementById('variantlinks').appendChild(document.getElementById("pt-userpage")); document.getElementById('variantlinks').appendChild(document.getElementById("pt-mytalk")); document.getElementById('variantlinks').appendChild(document.getElementById("pt-notifications-alert")); document.getElementById('variantlinks').appendChild(document.getElementById("pt-notifications-notice")); document.getElementById('variantlinks').appendChild(document.getElementById("ca-cb-logout")); }