Page MenuHomePhabricator

don't unnecessarily override "a.external" links "background-color:" CSS property
Closed, DeclinedPublic

Description

Author: ms419

Description:
http://www.sfu.ca/~jdbates/tmp/mediawiki/201003190/patch

By using the "background:" shorthand CSS property to specify the external.png graphic next to "#bodyContent a.external" links, skins/monobook/main.css unnecessarily overrides the "background-color:" property

This makes customizing MediaWiki with additional CSS a little tedious - for example I added to our custom CSS,

a:focus,
a:hover
{

background: #ffc;

}

All links now have a yellow background when hovered over - except "#bodyContent a.external" links

I could amend our custom CSS, specifically mentioning "a.external",

a:focus,
a:hover,
#bodyContent a.external:focus,
#bodyContent a.external:hover
{

background-color: #ffc;

}

However if the skins/monobook/main.css "#bodyContent a.external" rule set properties more carefully, this wouldn't be necessary,

#bodyContent a.external
{

background-image: url(external.png);
background-position: right;
background-repeat: no-repeat;

}

^ this achieves the same "a.external" link style as the "background:" shorthand property, without unnecessarily overriding the "background-color:" property

This avoids making "a.external" links unnecessarily inconsistent with other links


Version: 1.17.x
Severity: minor

Details

Reference
bz22904

Event Timeline

bzimport raised the priority of this task from to Low.Nov 21 2014, 10:58 PM
bzimport added a project: MediaWiki-Parser.
bzimport set Reference to bz22904.
bzimport added a subscriber: Unknown Object (MLST).

ms419 wrote:

patch

Attached:

Don't really need the word patch in the title.

Does patch have any relevance to other skins like Vector and Modern?

Imo, nowadays Mediawiki:Common.css is loaded *after* the skin scripts.
So, setting background-color: in common.css shouldn't be a problem

content hidden as private in Bugzilla

(In reply to comment #4)

Imo, nowadays Mediawiki:Common.css is loaded *after* the skin scripts.
So, setting background-color: in common.css shouldn't be a problem

That's not the point. The order is irrelevant for the most part here.

CSS selectors override only if they have the same weight/priority. an
"#id"-selector with depth has more weight than a simple tag selector.

The solution is to

  • 1) only set the background color in Common.css so the backgound image will be

preserved instead of overridden by the shorthand method

  • 2) Prioritize your selector by overriding the weight (do this with the

"!important" keyword).

so, in MediaWiki:Common.css:

a:hover { background-color: pink !important; }
a:active { background-color: #fcc !important; }

or whatever, that should work.

Yeah, you're right. This patch needs to be updated for other skins (modern, simple, vector) and the changes should be done to all a background definitions

(In reply to comment #7)

Yeah, you're right. This patch needs to be updated for other skins (modern,
simple, vector) and the changes should be done to all a background definitions

I'm not sure a change is needed in the skin files at all. Since they are loaded first and MediaWiki:Common.css is loaded after, the problem the bug opener had is solved. Simply changing the settings from "background" to "background-color: !important" achieves what he wants.

Ofcourse we could change this in core skin files, but I'm not sure that would help.

(previous):
-core:
a.external { background: url(image) no-repeat right; }

-MediaWiki:Common.css
a { background: #fcc; }

That part in MediaWiki:Common.css overrides everything, changing the core skin files to 3 seperate lines doesn't fix that. Changing the line in MediaWiki:Common.css to the folowing does:

a { background-color: #fcc; }

If that doesn't work, add " !important" after the color.