- This page was created by volunteers like you!
- Help us make it even better. To learn more about contributing to MEpedia, click here.
- Join the movement
- Visit #MEAction to find support or take action. Donate today to help us improve and expand this project.
- Congratulations!
- MEpedia has got over 30 million views as of August 2022!
MediaWiki talk:Common.css
 |
MediaWiki:Common.css: This page contains “CSS” code, which controls how the MEpedia interface displays to users. This includes the placement, color, size, and font of buttons, links, windows, and text. The CSS code that controls the MEpedia interface is stored in three locations:
This page forms part of the MEpedia interface, and can only be edited by administrators or interface administrators. To request a change to the page, add your request to the discussion page, tag several administrators or interface administrators, and add a description of your request. If this is a system message or skin it may be documented on MediaWiki.org or translatewiki.net. Gadgets may be documented in MediaWiki, Wikipedia's gadget list or Wikipedia's User scripts list. |
Requests[edit source | reply | new]
Done[edit source | reply | new]
Site notice border[edit source | reply | new]
User:JaimeS Please add to MediaWiki:Common.css this code, without the "pre" lines:
/* Style settings for border on [[MediaWiki:Sitenotice]] */
.border-notice {
border-style: solid;
border-color: blue;
border-width: 5px;
}
The best place to add this would be right after these lines:
.custom-bottom-banner {
background-color: lightyellow;
}
The effect of this is to set the style of the border on MediaWiki:Sitenotice so that it is blue, but in a class so can be changed to white for anyone using the Timeless skin, using the class already in MediaWiki:Timeless.css. Thank you ~Njt (talk) 10:45, August 10, 2022 (UTC)
Long citations[edit source | reply | new]
Code from wikipedia to prevent long references breaking the page layout. User:Kmdenmark Can you please add to the end of the existing code. Thanks ~Njt (talk) 11:34, October 16, 2020 (UTC)
/* Styling for citations. Breaks long urls, etc., rather than overflowing box */
.citation {
word-wrap: break-word;
}
Mobile changes for dismissable site notice[edit source | reply | new]
User:Kmdenmark Can add the following code:
/* smaller sitenotice for logged in users */
.mw-dismissable-notice-body {
font-size: smaller;
}
It needs to go near the end of the page, immediately after the line:
/* Mobiles and small screens - bullets and numbering */
This reduces the space the site notice takes up on mobile screens only. Thank you. ~Njt (talk) 09:59, October 15, 2020 (UTC)
Re: Mobile changes for dismissable site notice -- Kmdenmark (talk) 17:31, October 15, 2020 (UTC)[edit source | reply | new]
}
/* Mobiles and small screens - bullets and numbering */
.sitedir-ltr .mw-dismissable-notice-body {
margin: 0 4.5em 0 0;
}
.sitedir-rtl .mw-dismissable-notice-body {
margin: 0 0 0 4.5em;
}
.mw-content-ltr ul, .mw-dismissable-notice-body ul {
padding-left: 0.25em;
}
.mw-content-ltr ol, .mw-dismissable-notice-body ol {
margin-left: 2em;
}
.mw-content-rtl ul {
padding-right: 0.25em;
}
.mw-content-rtl ol {
margin-right: 2em;
}
/* smaller sitenotice for logged in users */
.mw-dismissable-notice-body {
font-size: smaller;
}
Zsolt request for mobile usability[edit source | reply | new]
Can you make this change by adding this code User:Kmdenmark. Ideally this should go at the very bottom. This developer code should resolve the Google search engine usability errors (see Slack for info), plus merges in changes by User:Notjusttired to improve category banners on mobiles and reduce indents for bullet points on mobiles, and make the width of the dismissable site notice larger so it goes over less lines on small screens. Thanks. ~Njt (talk) 22:52, September 14, 2020 (UTC)
Now done ~Njt (talk) 23:06, September 28, 2020 (UTC)
| Code |
|---|
Colored text for use on pages[edit source | reply | new]
Can this be added to the end of the existing code, it will allow several colors of text that will change to a lighter shade on this skin. User:Kmdenmark. See related changed at MediaWiki_talk:Common.css. This will be useful in some tables and for positive / negative symbols, possibly for viruses and bacteria. Thank you ~Njt (talk) 01:36, August 22, 2020 (UTC)
| Code |
|---|
Discussion of changes: Ticklist?[edit source | reply | new]
Can we please have some standards agreed before more changes are made here? Changes here are critical and immediately affect everyone.
I would like to agree some standards going forward to minimize future issues, perhaps add a ticklist before changes are made. I think this will help avoid errors and act as a prompt for us to consider different choices, and more opportunity to have different people feedback on suggested changes. I suggest these below. User:Pyrrhus User:Kmdenmark User:JaimeS User:JenB ~Njt (talk) 18:58, November 12, 2019 (EST)
- Color changes: should only be made here in exceptional circumstances, and with dark skin alternatives added to MediaWiki:Timeless.css at the same time, otherwise they should go on the relevant skin's page only. Our dark Timeless is a higher contrast / low vision / accessible skin, using specific shades to avoid common color blindness issues, and AA contrast where possible (calculated contrast 4.5 or higher). See Wikipedia's Help:Colours and dark and light palettes for recommendations and colors to avoid.
- Images or icons: should not be added if possible, given that alternatives will be needed for dark skins like Timeless. It may be possible to use symbols from HTML instead, or we could look into font awesome icons (lazy load - at the end of the css - for less frequently used images). Images affect layout and color contrast. Grayscale / white / black are best.
- Some changes may be best suited only to desktop users, or only to certain skins. Media screen queries for screen size already exist to target tablets, or mobile devices. Mobile views may not need all features, less crowded improves readability.
- Images: must use external URLs, not use relative paths, except when we are waiting for those files to server's https://www.me-pedia.org/resources/assets - this should be marked as an outstanding issue on the talk page. This is because the relative paths can easily change in future or images may be accidentally changed or deleted by other editors.
- Icon images must have a fallback, typically icons should be svg with fallback to png format. Converters are available online.
- Design principles should be followed as per Wikipedia, with MEpedia red and blue shades for branding, some screens show the same color code very differently.
- Changes should be infrequent, and not be made here without being tested elsewhere first eg on a user's own common.css, to minimize needing to make corrections on the same day.
- Test on all skins: Changes must be tested on all skins first, eg using a "useskin" link or changing user preferences
- Different screen sizes: Changes must be tested on different device sizes, eg using a tool like http://www.infobyip.com/testwebsiteresolution.ph. This can be combined with the "useskin" option, eg [http://www.infobyip.com/testwebsiteresolution.php?url=https%3A%2F%2Fwww.me-pedia.org%2Findex.php%3Ftitle%3DBateman_Horne_Center%26useskin%3Dtimeless&width=320&height=480&in_browser=false Bateman Horne Center in Timeless skin on iPhone 4. This will help show when layout problems occur or font size changes are needed.
- Code should be validated first: eg on https://jigsaw.w3.org/css-validator/#validate_by_input, outstanding "red" errors will prevent that section running.
- New classes: Careful thought should go into introducing new class names. Existing MediaWiki class names and ids cover many templates eg infoboxes, features like wrap / nowrap and plainlinks. Standard ones include ns-, ca-, p- and others. Extras may appear in Vector but not in other skins.
- Less common CSS can cause issues browser compatibility issues, eg the :before pseudoclass is ignored on old Safari and IE browsers. Caniuse.com or css-tricks can check this. CSS3-only features should be avoided.
- Images included by MediaWiki can be found by searching Github
- Particular issues with colors exist when colored backgrounds are used in tables, eg Notable studies, and on Portal boxes.
- Different skins use different fonts, which can slightly alter layout or readability.
- System messages: should not refer to position of things on the screen or screen colors, as per MediaWiki standards. Avoid referring to "the red button", "the first option". These may be more longer or shorter when translated.
- Use detailed comments in the edit summary to describe all changes. This makes uncommon problems much easier to trace when the problem has not been noticed until several edits later.
- Code snippets from elsewhere should be referred to either in the code or on the talk page.
Comments welcome ~Njt (talk) 18:58, November 12, 2019 (EST)
- Thank you for all the work you are doing to improve this site. I don't have the technical knowledge to response to any of the points outlined. I will graciously defer to other techies. Kmdenmark (talk) 10:14, November 14, 2019 (EST)
- I have adapted the above checklist and included it in the interface explanation at the top of this page.
- Pyrrhus (talk) 22:15, December 31, 2019 (EST)
- Thanks User:Pyrrhus ~Njt (talk) 15:48, February 23, 2020 (EST)
| completed code request - updated 8 Jun 2019 |
|---|
Ambox code[edit source | reply | new]
/* Not sure what these settings are for */ table.ambox{... This is styling for all article message boxes, eg Cleanup templates, and is used by Template:Ambox, anything calling (invoking) Module:Ambox, and anything calling Module:Mbox on articles. Hope this helps. ~Njt (talk) 18:59, October 26, 2019 (EDT)
- Thanks! that's very helpful! now updated.
- Pyrrhus (talk) 19:31, October 26, 2019 (EDT)
- Thanks User:Pyrrhus ~Njt (talk) 13:20, October 27, 2019 (EDT)
Alternance table striping[edit source | reply | new]
Please add the following to the end of the existing code. This allows for tables to have different colors when the new classes "alternance" are used in a table. ~Njt (talk) 08:42, October 24, 2019 (EDT)
| content hidden |
|---|
Example in use[edit source | reply | new]
(please leave in place for testing on different skins)
| content hidden |
|---|
Temporary holiday notice problem (dark skin) -- ~Njt (talk) 18:22, December 22, 2019 (EST)[edit source | reply | new]
The code for the temporary notice sets the font color to black without setting the background color in mw-dismissable-notice. This means on the dark Timeless skin it's black text over very very dark grey background. I suggest taking out the font color line (which should allow it to be inherited, and default to nearly black except on Timeless which should default to off-white). I made suggestions earlier on this page of a ticklist that should help spit possible issues. Unfortunately I've now dismissed the notice so not sure how to test the changes. User:Pyrrhus
.mw-dismissable-notice {
color: #000;
~Njt (talk) 18:22, December 22, 2019 (EST)
Re: Temporary holiday notice problem (dark skin) -- DariusC (talk) 12:07, December 23, 2019 (EST)[edit source | reply | new]
- I've commented out the colour property of the temporary fundraising site notice. I've switched to "Timeless" to check and it looks good, very readable. It's light grey (#ccc) on dark grey (almost black #333). If you notice any other issue here, let me know.
Category banner size (mobiles and tablets) -- ~Njt (talk) 14:48, February 23, 2020 (EST)[edit source | reply | new]
Can the code below please be added to improve mobile usability? User:Kmdenmark ~Njt (talk) 14:50, September 11, 2020 (UTC)
In addition to the minor changes I suggested in MediaWiki_talk:Common.js, can the following be added to the end of Common.css to shrink the banner for all mobiles and tablets. Currently this link this link to Responsinator shows different mobile layouts using the Potential comorbidities banner for testing (vector skin). This means that the banner used for Potential treatments / Potential comorbidities / Medical hypothesis will have smaller text and won't have a full black line above and below (on mobiles this doubles the height of the banner). See Slack for before / after screenshots. New code, please copy from source view:
User:Kmdenmark User:Pyrrhus user:Aletheia2020
~Njt (talk) 14:48, February 23, 2020 (EST)
Dismissable site notice on mobiles and tablets -- ~Njt (talk) 15:54, February 23, 2020 (EST)[edit source | reply | new]
See Zsolt request from Sep 14 2020, which includes this also
. ~Njt (talk) 20:56, September 14, 2020 (UTC)
Can the following code by made, assuming it looks ok. The idea is to use the gap on the left of the notice for text on snake screens (left to right languages only - the gap on the right is for the word "dismiss"). Small changes like less indentation for numbering too. User:Pyrrhus I hope this is ok since very foggy now. I don't know why but I can't seem to nest the ul and ol list code inside the top ltr- statement. Possibly causing issues with rtl languages. I am not sure how many will be using those though - possibly nobody right now? I am not sure if right to left is recognized for those without accounts. Hebrew is one language that could be tested. ~Njt (talk) 15:54, February 23, 2020 (EST)
| content hidden |
|---|
