Sysadmin:Jefreshed Skin: A Customization of Refreshed
)
Contents
Jefreshed Skin
This page describes the Jefreshed skin that we are using, the reasons for creating it, the implications of using it, and information on how to use it.
The problem
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. 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. I was either that or set $wgAllowSiteCSSOnRestrictedPages to true, compromising security.
There is another reason. Using Common.css also presents a less than optimum workflow when making changes in dev and moving those changes to production.
The Solution
A new skin named Jefreshed was created from Refreshed
- The refreshed skin was copied and global changes were made to rename the files.
- "Refreshed" was renamed to "Jefreshed."
- "refreshed" was renamed to "refreshed."
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 in 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
Refreshed does not use the $wgLogo setting in LocalSettings.php.
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