Board Thread:News and Announcements/@comment-5645428-20171019063248

Hey guys, it's been a while. Today I'd like to share with you a powerful tool you can use that our wiki in particular can take full advantage of thanks to CSS variables.

Tired of blue? Now's the time you can finally change it to... whatever you want! Fandom gives everyone their own CSS page on Community Central that can be used to modify their viewing experience on all the wikis they participate on. For example, if you would like to view page content across the whole content space without the sidebar getting in the way, you could include the following: .WikiaMainContent {width: 100% !important;} .WikiaRail {display: none !important;} While that might be cool, trying to change colours or get rid of ugly whites across many different elements is usually too difficult to achieve on a widespread level. Until the Geometry Dash Wiki came along and made this unimaginably simple! The following is the October 2017 colour scheme:
 * root {

--text-primary: #3A3A3A; --text-secondary: #FFF; --link-page: #00A; --link-contrast: #FFF; --link-contrasthover: #0AF; --link-buttonprimary: #FFF; --link-buttonsecondary: #3A3A3A; --link-module: #0F0; --link-administrator: #0FF; --link-moderator: #0F0; --border-general: #CCC; --border-contrast: #AAA; --border-module: #FFF; --border-menubuttondivide: rgba(204, 204, 204, 0.5); --background-main: url(http://vignette3.wikia.nocookie.net/geometry-dash/images/5/50/Wiki-background), linear-gradient(to bottom, #006, #6AC), #359; --background-page: rgba(136, 204, 255, 0.4); --background-content: rgba(217, 217, 237, 0.6); --background-contenthover: rgba(255, 255, 255, 0.6); --background-contentheavy: #D9D9ED; --background-popovercontent: rgba(217, 217, 237, 0.9); --background-popovercontenthover: rgba(255, 255, 255, 0.9); --background-contrast: #00A; --background-contrastalternate: #08F; --background-module: linear-gradient(to bottom, #000, transparent); --background-buttonprimary: #00A; --background-buttonprimaryhover: #00B; --background-buttonsecondary: #EEE; --background-buttonsecondaryhover: #F7F7F7; --background-overlay: rgba(0, 0, 0, 0.2); --background-overlaydark: rgba(0, 0, 0, 0.6); --background-overlaygradient: linear-gradient(to bottom, transparent, #000); --background-footertoolbar: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 170, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%); --background-notification: rgba(0, 0, 170, 0.9); --background-tableheader: rgba(58, 58, 58, 0.8); --background-tablecell: rgba(0, 0, 0, 0.8); --colour-red: #C00; --colour-green: #0C0; --colour-lightblue: #08F; --colour-darkblue: #00A; --colour-purple: #60F; --colour-redtransparent: rgba(255, 0, 0, 0.6); --colour-greentransparent: rgba(0, 255, 0, 0.6); --colour-lightbluetransparent: rgba(0, 170, 255, 0.6); --colour-darkbluetransparent: rgba(0, 0, 204, 0.6); --colour-purpletransparent: rgba(102, 0, 255, 0.6); } You will need to paste that on your CSS page, and from there you can adjust the values to create a colour scheme as wild or sophisticated as you like. For this to load properly on the Geometry Dash Wiki, you should hard refresh the cache using 'Ctrl + Shift + R' or 'Ctrl + F5'. This can be tedious, however. To see your customisations show up in real time, you can use the PortableCSSPad script. Include the following on your similar JS page: importArticles({   type: 'script',    articles: [        'u:dev:PortableCSSPad/code.js'    ] }); This will add a link to the footer toolbar which will bring up a text area where you can paste the colour codes for testing.

If you need any help, feel free to ask! If you design a colour scheme that you are particularly proud of, drop us a link and show us what you've come up with! 