Difference between revisions of "Sysadmin:Jefreshed Skin: A Customization of Refreshed"
Greg.Fuller (talk | contribs) (→The problem) |
Greg.Fuller (talk | contribs) |
||
| (26 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | == Jefreshed Skin == | |
| − | + | {{jfa-note}} | |
| + | ''Timeless'' has replaced the ''Jefreshed'' Skin, which is no longer being used used. The custom CSS and JS for ''Timeless'' is in /extensions/JfaCustom/Mod000. [[User:Greg.Fuller|—Greg Fuller]] ([[User talk:Greg.Fuller|talk]]) 22:51, 19 April 2019 (PDT) | ||
| + | {{jfa-note-end}} | ||
| − | This page describes the Jefreshed skin that we are using, the reasons for creating it, | + | This page describes the ''Jefreshed'' skin that we are using, the reasons for creating it, some implications of using it, and information on how to use it. |
| − | == The | + | == The Problem == |
| − | + | Using the special page ''MediaWiki:Common.css'' presents a very inefficient workflow, especially when making changes in dev and moving those changes to production. And using an external CSS file does not solve the problem of flashing described below. | |
| − | + | Making changes to the skin using ''MediaWiki:Common.css'' and ''/jfa/code/jfa.css'' was having side effects because of protected user pages flashing blue, the original dominant color of ''Refreshed''. After moving the CSS from ''Common.css'' to ''/jfa/code/jfa.css'', it still had to be in ''Common.css'' to avoid flashing blue because of the timing of browser rendering. It was either that or set ''$wgAllowSiteCSSOnRestrictedPages'' to true, compromising security. Even then, there was still some flashing. The flashing is caused by the skin CSS being used to render the page before the overriding CSS kicked in. | |
Also, having our mods are fully incorporated into the skin rather than overwriting parts of the skin will provide new opportunities for customization and more efficient rendering in the browser. | Also, having our mods are fully incorporated into the skin rather than overwriting parts of the skin will provide new opportunities for customization and more efficient rendering in the browser. | ||
| Line 15: | Line 17: | ||
== The Solution == | == The Solution == | ||
| − | A new skin named Jefreshed was created from Refreshed | + | A new skin named ''Jefreshed'' was created from the ''Refreshed'' skin. |
| − | *The | + | *The ''Refreshed'' skin was copied and global changes were made to identifiers and files were renamed as appropriate. |
| − | * "Refreshed" | + | ** "Refreshed" became "Jefreshed." |
| − | * "refreshed" | + | ** "refreshed" became "jefreshed." |
== Implications for Updates == | == Implications for Updates == | ||
| − | If Refreshed is changed in the future to be compatible with a new release of MediaWiki, we will need to do a diff comparing the old version of Refreshed with the new version of Refreshed, and incorporate any required or desired changes | + | If ''Refreshed'' is changed in the future to be compatible with a new release of MediaWiki, we will need to do a diff comparing the old version of ''Refreshed'' with the new version of Refreshed, and incorporate any required or desired changes into ''Jefreshed''. The ''Refreshed'' skin directory was renamed ''Refreshed-origina''l so that if a new version is released and uploaded, it won't overwrite the original, making the diff mentioned above difficult or maybe impossible if no versions of the original can be found. |
== Implications for the Logo == | == Implications for the Logo == | ||
| − | + | ''Jefreshed'' does not use the ''$wgLogo'' setting in ''LocalSettings.php'', as a carryover from ''Refreshed''. | |
Use the following special pages | Use the following special pages | ||
| − | * '''MediaWiki:Jefreshed-this-wiki-wordmark''': Normal logo, the content is the image logo URL. | + | * '''[[MediaWiki:Jefreshed-this-wiki-wordmark]]''': Normal logo, the content is the image logo URL. |
| − | * '''MediaWiki:Jefreshed-this-wiki-mobile-logo''': The logo displayed on the mobile, the content is the image logo URL. | + | * '''[[MediaWiki:Jefreshed-this-wiki-mobile-logo]]''': The logo displayed on the mobile, the content is the image logo URL. |
| + | |||
| + | For optimal display on ''Refreshed's'' mobile skin, you should consider either using downscaled images or SVG images so that the logo does not display as blurry on "retina" (high PPI) mobile device screens. See ''https://www.mediawiki.org/wiki/Skin:Refreshed#Logo/Wordmark'' | ||
| + | |||
| + | == How CSS from ''Common.js'' was incorporated == | ||
| + | |||
| + | The file ''jfacustom.css'' was created within the ''Jefreshed'' skin where the other CSS files reside: | ||
| + | skins/Jefreshed/jefreshed/styles/screen/jfacustom.css | ||
| + | |||
| + | Custom CSS was moved from the front-end page ''MediaWiki:Common.cs''s into this file. The goal is to eventually integrate the CSS in ''jfacustom.css'' into the original skin files. | ||
| + | |||
| + | To get this file to load, it was included in ''skins.json'' to be loaded by the MediaWiki resource loader: | ||
| + | |||
| + | "jefreshed/styles/screen/jfacustom.css": | ||
| + | "media": "(max-width: 3001px)" | ||
| + | |||
| + | The ''max-width'' media query was specified so that ''jfacustom.css'' CSS would be loaded after all the other CSS files. That's just the way the loader works—no need to fight it. The ''max-width'' value is such the CSS will apply to all non-ridiculous screen sizes. | ||
| − | + | == Changing Skins == | |
| − | + | Any decision to change the skin used by jfa.wiki should not be taken lightly as negative side effects will almost certainly occur. For example, the plain-text parsing routines rely on CSS classes from the skin. | |
Latest revision as of 21:51, 19 April 2019
Contents
Jefreshed Skin
Timeless has replaced the Jefreshed Skin, which is no longer being used used. The custom CSS and JS for Timeless is in /extensions/JfaCustom/Mod000. —Greg Fuller (talk) 22:51, 19 April 2019 (PDT)
This page describes the Jefreshed skin that we are using, the reasons for creating it, some implications of using it, and information on how to use it.
The Problem
Using the special page MediaWiki:Common.css presents a very inefficient workflow, especially when making changes in dev and moving those changes to production. And using an external CSS file does not solve the problem of flashing described below.
Making changes to the skin using MediaWiki:Common.css and /jfa/code/jfa.css was having side effects because of protected user pages flashing blue, the original dominant color of Refreshed. After moving the CSS from Common.css to /jfa/code/jfa.css, it still had to be in Common.css to avoid flashing blue because of the timing of browser rendering. It was either that or set $wgAllowSiteCSSOnRestrictedPages to true, compromising security. Even then, there was still some flashing. The flashing is caused by the skin CSS being used to render the page before the overriding CSS kicked in.
Also, having our mods are fully incorporated into the skin rather than overwriting parts of the skin will provide new opportunities for customization and more efficient rendering in the browser.
The Solution
A new skin named Jefreshed was created from the Refreshed skin.
- The Refreshed skin was copied and global changes were made to identifiers and files were renamed as appropriate.
- "Refreshed" became "Jefreshed."
- "refreshed" became "jefreshed."
Implications for Updates
If Refreshed is changed in the future to be compatible with a new release of MediaWiki, we will need to do a diff comparing the old version of Refreshed with the new version of Refreshed, and incorporate any required or desired changes into Jefreshed. The Refreshed skin directory was renamed Refreshed-original so that if a new version is released and uploaded, it won't overwrite the original, making the diff mentioned above difficult or maybe impossible if no versions of the original can be found.
Implications for the Logo
Jefreshed does not use the $wgLogo setting in LocalSettings.php, as a carryover from Refreshed.
Use the following special pages
- MediaWiki:Jefreshed-this-wiki-wordmark: Normal logo, the content is the image logo URL.
- MediaWiki:Jefreshed-this-wiki-mobile-logo: The logo displayed on the mobile, the content is the image logo URL.
For optimal display on Refreshed's mobile skin, you should consider either using downscaled images or SVG images so that the logo does not display as blurry on "retina" (high PPI) mobile device screens. See https://www.mediawiki.org/wiki/Skin:Refreshed#Logo/Wordmark
How CSS from Common.js was incorporated
The file jfacustom.css was created within the Jefreshed skin where the other CSS files reside:
skins/Jefreshed/jefreshed/styles/screen/jfacustom.css
Custom CSS was moved from the front-end page MediaWiki:Common.css into this file. The goal is to eventually integrate the CSS in jfacustom.css into the original skin files.
To get this file to load, it was included in skins.json to be loaded by the MediaWiki resource loader:
"jefreshed/styles/screen/jfacustom.css":
"media": "(max-width: 3001px)"
The max-width media query was specified so that jfacustom.css CSS would be loaded after all the other CSS files. That's just the way the loader works—no need to fight it. The max-width value is such the CSS will apply to all non-ridiculous screen sizes.
Changing Skins
Any decision to change the skin used by jfa.wiki should not be taken lightly as negative side effects will almost certainly occur. For example, the plain-text parsing routines rely on CSS classes from the skin.
