Make Refreshed less brickimedia-specific

[neoncitylights]

The Refreshed skin should be less brickimedia specific so other wikis don't have to download unnecessary files they're not going to use (files should only be there if they're going to be used globally otherwise local files should be on our own local site), this means:

• [ ] The /images folder shouldn't include brickimedia wiki logos, they should just include the icons required for mobile.
• [x] Remove the .png wordmark fallbacks since we're officially not supporting IE 8 anymore. Also helps with performance since loading less files that aren't being used
• [ ] Requires some rewriting of Refreshed header component
• [ ] That means all these logos should turn into variables required to be entered into brickimedia/LocalSettings, meaning this would require making changes across multiple repositories. (all of our local variable values would be from image.brickimedia.org and uploaded to Meta), and for other wikis they would require editing their own LocalSettings.php file
• [ ] Since this breaks directory paths, this should be counted as a major patch instead of a minor patch. So instead of 3.1.1, this should be included in 4.1.1 and should be reflected on the Refreshed.php file (Note: I found a good way of versioning that I like in of these comments at https://github.com/alrra/browser-logos/issues/76)
• [ ] Reflect these changes on mw docs https://www.mediawiki.org/wiki/Skin:Refreshed

[georgebarnick]

What do we plan to use as a default watermark? There's no real image that works universally for every wiki so we might have to add support for plaintext watermarks that default to $wgSiteName. Thoughts?

[neoncitylights]

Plaintext wordmarks work. If we want to use an image placeholder we could make it this (icon from wikifont):

[MtMNC]

We could a version of the MediaWiki flower logo like Monobook and Vector, that would provide more visual consistency across skins. Can't check right now but it might be in (path to mw)/resources/src. Also we could ask for a WikiFont version of it.

On Feb 6, 2016, at 12:41 PM, Cody Nguyen notifications@github.com wrote:

Plaintext wordmarks work. If we want to use an image base we could make it this (icon from wikifont):

— Reply to this email directly or view it on GitHub.

[neoncitylights]

found 2 images we'd be intereted in /resources/assets, here you go:

[lachlanshanks]

This is interesting as I use Refreshed on a non Brickimedia wiki. I remember changing the background colour was a big faff so some configuration settings for background colour and accent colours would be cool. I can look into it a bit more when I'm on my PC.

[neoncitylights]

@lachlanshanks Neat idea Lachlan :+1: Variables for colours on LocalSettings.php doesn't sound too hard, I think. However, I believe wiki admins should have power of changing it too instead of just sysadmins (or people who have access to the back-end) Those kind of things should be on the MediaWiki:Refreshed.css file instead of LocalSettings.php

[georgebarnick]

Color changing should be handled by local CSS but perhaps blue isn't the best default color. Open for ideas

[lachlanshanks]

After looking at Brickipedia with Inspect Element, these are the elements I can find which are blue and make up the theme colour:

• body (#194a8d)

• header (#103ca2)

• :hover on header buttons (midnightblue)
• .header-menu (midnightblue)
• .search-form (midnightblue)
• .sidebar-shower (#194a8d)

• sidebar-wrapper (midnightblue)

These can be overwritten in Refreshed.css, but (correct me if I'm wrong) there is no documentation on easily overwriting these. A new user would have to find these and write CSS to override them. We could add instructions, possibly on the "Customisations" section of the MediaWiki page, by providing a CSS snippet to add to Refreshed.css which groups these elements together.

Frontend wise, that's the only method I can think of for making colour changing easy.

[neoncitylights]

Yeah, I agree that we need better documentation on customising the skin. I'll start writing and add it to https://www.mediawiki.org/wiki/Skin:Refreshed and also show you guys here when it's done, shouldn't take that long.

[neoncitylights]

Simplified some of the elements you listed down to the direct declaration, here's what I have:

body {
    background-color: /* bg-color of site */ ;
    color: /* content/text color of site */ ;
}

#header-wrapper {
    background: /* bg-color/gradient of header web component */ ;
}

.header-button:hover, 
.header-dropdown-item:hover, 
.header-button-active, 
.sitedropdown-highlighted, 
.dropdown-highlighted {
    background-color: /* bg-color of header items and dropdown menus */ ;
    color: /* content/text color of header items and dropdown menus */ ;
}

/* styling for medium and large sized tablets */
@media (max-width: 1000px) and (min-width: 601px) {
    #header-wrapper .search-form {
        background-color: /* bg-color of search on tablet */ ;
    }
}

/* styling for phones and smaller tablets */
@media (max-width: 600px) {
    #sidebar-wrapper {
        background-color: /* bg-color of sidebar on phones */ ;
    }
    #user-info .header-menu {
        background-color: /* bg-color of user dropdown menu */ ;
    }
}

[neoncitylights]

@lachlanshanks Done as of mw.diff 2043036, feel free to make it better. :+1:

[soullivaneuh]

Note: I found a good way of versioning that I like in of these comments at alrra/browser-logos#76

All you want to know about this is here: http://semver.org/ :wink:

[neoncitylights]

@Soullivaneuh Thanks, I appreciate it :)

[neoncitylights]

closing per https://phabricator.wikimedia.org/T134669