Changes: OasisRevived

Revision as of 08:35, 15 October 2021

This script/stylesheet is for PERSONAL use only!

You are free to install this script/stylesheet for yourself, but it is not allowed to be used wiki-wide (e.g., in MediaWiki:ImportJS, MediaWiki:Common.js, MediaWiki:Common.css, MediaWiki:Fandomdesktop.js or MediaWiki:Fandomdesktop.css), as it would violate Fandom's Terms of Use.
(See the customization policy)

OasisRevived is a stylesheet that modifies the appearance of UCX to look like the Oasis skin.

Note for admins: When designing your wiki, it's best to disable this stylesheet when doing so, as most other users will not be seeing the same layout as you do. You can design your wiki for the unmodified skin and make the changes you want to see with this stylesheet in your personal css.

Show demo

Install

Step 1: CSS

(The CSS has to be imported separately to avoid a flash of unstyled content.)

Step 2: JS

When installed, it removes the search icon in the global navigation and replaces it with a search bar. It also adds the class oasis-is-revived to the page body.

Recreated Features

Global Navigation
Page body
Customizable page transparency
Full Wiki background
Wikia Bar
TOC
Achievements on User Page

Customization

When importing this stylesheet, you can include any of these variables to customize its look. Currently, you can modify the following:

Page background's opacity
Community header color
Wiki background position

Copy the following into your personal CSS and replace the values you need. Refer the following table for more details.

Keep in mind, if you customize the code below and paste it into your global.css, it will apply for all wikis you visit. If you want different styles for each wiki, paste it in your common.css of the respective wiki.

:root {
	--theme-page-background-color--opacity: 1;
	--theme-header-background-color: var(--theme-sticky-nav-background-color);
	--background-img-position: center center;
	--background-img-size: cover;
	--background-img-repeat: no-repeat;
	--background-img-attachment: fixed;
}

Name	Default	Description
--theme-page-background-color--opacity	1	Opacity of the main page. Ranges from 0 to 1, including decimals.
--theme-header-background-color	var(--theme-sticky-nav-background-color)	Color of the community header. Defaults to the sticky nav's background color. Replace default with a color hex code.
--background-img-position	center center	Position of the background image. The first word is the x position, while the second is the y position. You can replace the first center with either left or right. The second center can be replaced with top or bottom.
--background-img-size	cover	Size of the background image. The default resizes the image to cover the entire background. Replace with auto to keep the image's original size (might have empty space filled by a color) or contain (might have empty space).
--background-img-repeat	no-repeat	Whether the background repeats after it ends. Default prevents repeating. Replace with repeat to enable repeating.
--background-img-attachment	fixed	Whether the background moves with your scrolling. Default doesn't make the background move. Replace with scroll to enable movement.

@@ Line 1: / Line 1: @@
-<noinclude>{{LangSelect}}</noinclude><includeonly>
 {{Languages}}
 {{Personal}}
-{{UCX only}}
 {{Infobox CSS
 |Image file = OasisRevived.png
 |Description = Styles UCX to look like Oasis
+|Author =
-|Author = [[User:ThunderDragon2|ThunderDragon2]]
+* [[User:ThunderDragon2|ThunderDragon2]]
-|Status = Experimental
+* [[User:Joritochip|Joritochip]]
+|Status = Beta
 |Scope = p
+| Updated =
-|Code = [[MediaWiki:OasisRevived.css|OasisRevived.css]]
+* {{Updated|MediaWiki:OasisRevived.css}} (css)
-|Type = theme
+* {{Updated|MediaWiki:OasisRevived.js}} (js)
+|Code =
+* [[MediaWiki:OasisRevived.css|OasisRevived.css]] (css)
+* [[MediaWiki:OasisRevived.js|OasisRevived.js]] (js)
+|Type = theme, customization, retro
 }}
-'''OasisRevived''' is a stylesheet that modifies the appearance of UCX to look like the Oasis skin. Note: Oasis has not been retired yet. It will be removed early this summer when FandomDesktop becomes the default skin.
+'''OasisRevived''' is a stylesheet that modifies the appearance of UCX to look like the Oasis skin.
+'''Note for admins''': When designing your wiki, it's best to disable this stylesheet when doing so, as most other users will not be seeing the same layout as you do. You can design your wiki for the unmodified skin and make the changes you want to see with this stylesheet in your personal css.
-==Install==
+<div class="center">[{{fullurl:{{FULLPAGENAME}}|demo=1}} <span class="wds-button"> Show demo]</span></div>
+== Install ==
+=== Step 1: CSS ===
 {{CSS Install|Use = GP}}
+<span style="font-size:small;">(The CSS has to be imported separately to avoid a [[wikipedia:Flash of unstyled content|flash of unstyled content]].)</span>
+=== Step 2: JS ===
+When installed, it removes the search icon in the global navigation and replaces it with a search bar. It also adds the class <code>oasis-is-revived</code> to the page body.
+{{Script Install|Use = GP}}
-==Recreated Features==
+== Recreated Features ==
-*Global Navigation
+* Global Navigation
-*Page body
+* Page body
-*Customizable page transparency
+* Customizable page transparency
-*Full Wiki background
+* Full Wiki background
-*Wikia Bar
+* Wikia Bar
-*TOC
+* TOC
-*Achievements on User Page
+* Achievements on User Page
-==Customization==
+== Customization ==
 When importing this stylesheet, you can include any of these variables to customize its look. Currently, you can modify the following:
 *Page background's opacity
@@ Line 39: / Line 54: @@
 	--theme-page-background-color--opacity: 1;
 	--theme-header-background-color: var(--theme-sticky-nav-background-color);
-	--background-img-styles: no-repeat fixed;
+	--background-img-position: center center;
+	--background-img-size: cover;
+	--background-img-repeat: no-repeat;
+	--background-img-attachment: fixed;
 }
 </pre>
@@ Line 56: / Line 74: @@
 | Color of the community header. Defaults to the sticky nav's background color. Replace default with a color hex code.
 |-
-|'''--background-img-styles'''
+|'''--background-img-position'''
-| style="text-align:center;"|no-repeat fixed
+| style="text-align:center;"|center center
-| Style of the background image. The default doesn't make the background move with your scrolling and prevents it from repeating. To enable both scrolling and repeating, replace the default with '''repeat scroll''' (enabling them separately gives the same result as either the default or '''repeat scroll''').
+| Position of the background image. The first word is the x position, while the second is the y position. You can replace the first '''center''' with either '''left''' or '''right'''. The second '''center''' can be replaced with '''top''' or '''bottom'''.
+|-
+| '''--background-img-size'''
+| style="text-align:center;"|cover
+| Size of the background image. The default resizes the image to cover the entire background. Replace with '''auto''' to keep the image's original size (might have empty space filled by a color) or '''contain''' (might have empty space).
+|-
+| '''--background-img-repeat'''
+| style="text-align:center;"|no-repeat
+| Whether the background repeats after it ends. Default prevents repeating. Replace with '''repeat''' to enable repeating.
+|-
+| '''--background-img-attachment'''
+| style="text-align:center;"|fixed
+| Whether the background moves with your scrolling. Default doesn't make the background move. Replace with '''scroll''' to enable movement.
 |}
-==Limitations==
+== See also ==
+* [[HydraRevived]]
-*Wiki backgrounds that have a low height (like the recommended background size) will end abruptly, revealing the background color.
-==Planned recreations==
-*Special:NewFiles (work in progress)
-==Changelog==
-;June 6, 2021
-:Initial release.
-</includeonly>