Anonymous
Not logged in
Talk
Contributions
Create account
Log in
Search
Editing
MediaWiki talk:Common.css
From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Namespaces
Message
Discussion
More
More
Page actions
Read
Edit source
New topic
History
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
{{Interface explanation|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: # The ‘skin’ contains most of the CSS code, and this basic ‘skin’ code can not be changed. However, an MEpedia user can select from a list of different skins in their user preferences. For example, a user can select either the standard “Vector” skin or the light-sensitive “Timeless” skin. # The [[MediaWiki:Common.css]] page contains MEpedia-specific changes to the CSS code that will apply to ALL skins available at MEpedia. # Each skin has a page that contains MEpedia-specific changes to the CSS code that will apply to ONLY that skin. For example, [[MediaWiki:Timeless.css]]. # Changes to [[MediaWiki:Common.css]] are critical and immediately affect everyone. When updating this page, please review the following checklist: ## Before making changes to this page, test your changes in your own "common.css" page, such as [[User:Pyrrhus/common.css]] ## Any changes should be tested in the standard Vector skin, as well as the Timeless skin. (You can see how a page looks in the Timeless skin by adding <nowiki>"&useskin=timeless"</nowiki> to the end of the URL in the address bar.) Note that different skins use different fonts, which can slightly alter layout or readability. ## Any changes should be tested in a desktop interface, as well as a mobile interface. Mobile views may not need all features- less crowded improves readability. To test different device sizes, you can use a tool like http://www.infobyip.com/testwebsiteresolution.php ## Any changes should be tested in at least 2 different browsers. If you must use any uncommon CSS, you can check browser compatibility at https://caniuse.com or search for answers at https://css-tricks.com (CSS3-only features should be avoided) ## Any additions to this page should include brief documentation explaining who made the addition, when the addition was made, what the function of the addition is, and if the code has been copied, the original source of the code. ## Any changes to existing sections should be well explained in the edit summary. ## If possible, avoid specifying colors in [[MediaWiki:Common.css]], since the colors must work with all skins. If you must specify colors, be sure to check the end-result in the Timeless skin and make any compensating changes in [[MediaWiki:Timeless.css]]. Timeless is a higher contrast / low vision / accessible skin, using specific shades to avoid common color blindness issues, and [https://webaim.org/resources/contrastchecker/ AA contrast] where possible (calculated contrast 4.5 or higher). See [https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility#Color Wikipedia's Color Guidance] and [https://design.wikimedia.org/style-guide/visual-style_colors.html dark and light palettes] for recommendations and colors to avoid. ## If you are creating a new CSS class, make sure your class name won't be used by any other part of the MEpedia interface. Consider using a naming convention such as found in [https://en.wikipedia.org/wiki/Wikipedia:Catalogue_of_CSS_classes existing MediaWiki class names and ids]. (These cover many templates, such as 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.) ## You can validate any new CSS code using the [https://jigsaw.w3.org/css-validator/#validate_by_input+with_options w3c css validator] (vendor extension and "same color" errors can be ignored). }} ==Requests == ==Done== ===Site notice border=== [[User:JaimeS]] Please add to [[MediaWiki:Common.css]] this code, without the "pre" lines: <pre> /* Style settings for border on [[MediaWiki:Sitenotice]] */ .border-notice { border-style: solid; border-color: blue; border-width: 5px; } </pre> The best place to add this would be right after these lines: <pre>.custom-bottom-banner { background-color: lightyellow; }</pre> 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 ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 10:45, August 10, 2022 (UTC) ==Long citations== 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 ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 11:34, October 16, 2020 (UTC) ::{{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 18:53, October 16, 2020 (UTC) <pre> /* Styling for citations. Breaks long urls, etc., rather than overflowing box */ .citation { word-wrap: break-word; } </pre> ===Mobile changes for dismissable site notice === [[User:Kmdenmark]] Can add the following code: <pre> /* smaller sitenotice for logged in users */ .mw-dismissable-notice-body { font-size: smaller; } </pre> It needs to go near the end of the page, immediately after the line:<br /> <code>/* Mobiles and small screens - bullets and numbering */</code><br /> This reduces the space the site notice takes up on mobile screens only. Thank you. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 09:59, October 15, 2020 (UTC) ====Re: Mobile changes for dismissable site notice -- [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:31, October 15, 2020 (UTC)==== :: [[User:Notjusttired|Njt]], Please let me know if this is correct. I added the code as such: [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:31, October 15, 2020 (UTC) } :::Yes, it's great thanks. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 21:37, October 15, 2020 (UTC) /* 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 == Can you make this change by adding this code <s>User:Kmdenmark</s>. 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. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:52, September 14, 2020 (UTC) Now done ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:06, September 28, 2020 (UTC) {{collapse top|Code}} <pre> @media screen and (max-width: 768px) { #mw-panel #p-logo { position: initial!important; margin: 1em 0.6em 0 0.7em; } #mw-panel #p-logo a { height: 45px; } #searchtable form.searchbox { display: flex; flex-wrap: wrap; } #searchtable form.searchbox .searchboxInput.mw-ui-input { width: 70%; display: block; flex-grow: 9; margin: 5px 5px 5px 0; } #searchtable form.searchbox .mw-ui-button { display: block; margin: 5px auto; max-width: 90px; flex-grow: 1; margin-right: auto; } /* Mobiles and tablets - smaller category banner */ h1 { font-size: 1.4rem; margin-top: 4px; margin-bottom: 4px; } h1 div, .firstHeading { font-size: 1.25rem; padding: 2px!important; margin-left:0; margin-right: 0; } /* 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; } } @media screen and (max-width: 720px) { body { font-size: 18px; } #mw-panel #p-logo { position: absolute!important; margin: 0; top: 5px!important; left: 2px!important; } .sitedir-ltr .mw-dismissable-notice-body { margin: 0 3em 0 0; } .sitedir-rtl .mw-dismissable-notice-body { margin: 0 0 0 3em; } #addthistoolbar { float: initial; } #addthistoolbar .addthis_separator { height: 32px; } #addthistoolbar .at300m { display: flex; flex-direction: row; align-items: center; font-size: 16px; } #addthistoolbar .at300b span, #addthistoolbar .at300m span, #addthissidebar .at300b span, #addthissidebar .at300m span { width: 32px !important; height: 32px !important; line-height: 32px !important; } #addthistoolbar .at300b span svg, #addthistoolbar .at300m span svg, #addthissidebar .at300b span svg, #addthissidebar .at300m span svg{ width: 32px !important; height: 32px !important; } div#mw-panel div.portal div.body ul li { font-size: 18px; } div#footer ul li { font-size: 16px; } .apihelp-block.apihelp-flags { width: 100%; float: none; box-sizing: border-box; } .apihelp-parameters dt { float: none; } .apihelp-parameters dd { margin: 0 0 0.5em 0; } .apihelp-parameters dd.info { margin-left: 2em; } .apihelp-block > * { word-break: break-all; } } @media screen and (max-width: 400px) { #searchtable form.searchbox .searchboxInput.mw-ui-input { width: 100%; margin: 5px 0; } } </pre> {{collapse bottom}} ===Colored text for use on pages=== 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 ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 01:36, August 22, 2020 (UTC) :{{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 13:24, August 24, 2020 (UTC) {{collapse top|Code }} <pre> /* text colors */ .green { color: #007000; } .red { color: #FF2000;} .blue { color: #00008b;} .gray { color: #454545;} /* off-white text shadow, for use on dark backgrounds */ .shadow { text-shadow: 2px 2px 4px #fff;} </pre> Just a few lines to test it works: <div style="background:#f8f8f8"> Background color #f8f8f8.<br> This is <span class="green">green</span>. This is <span class="red">red</span>. This is <span class="blue">blue</span>. This is <span class="gray">gray</span>. This text should have a <span style="background:#333333" class="shadow">white shadow</span>. </div> - ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 01:36, August 22, 2020 (UTC) :Working nicely now, see + and - and colors in the left column on [[List of herpesvirus infection studies]]. Thank you [[User:Kmdenmark]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:56, September 2, 2020 (UTC) ::[[User:Notjusttired|Njt]], you are very welcome. Glad it worked so well. [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:30, September 3, 2020 (UTC) {{collapse bottom}} ==Discussion of changes: Ticklist?== 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]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|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 [https://webaim.org/resources/contrastchecker/ AA contrast] where possible (calculated contrast 4.5 or higher). See [https://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style/Accessibility#Color Wikipedia's Help:Colours] and [https://design.wikimedia.org/style-guide/visual-style_colors.html 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 [https://www.me-pedia.org/index.php?title=Portal:Contents/Portals&useskin=pivot "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.php?url=https%3A%2F%2Fme-pedia.org%2Fwiki%2FMOS%3ADATENUM&width=1024&height=768&in_browser=true 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 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. [https://en.wikipedia.org/wiki/Wikipedia:Catalogue_of_CSS_classes 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. [https://caniuse.com/#search=%3Abefore Caniuse.com] or css-tricks can check this. CSS3-only features should be avoided. # Images included by MediaWiki can be found by searching [https://github.com/wikimedia/mediawiki 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 ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|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. [[User:Kmdenmark|Kmdenmark]] ([[User talk: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. ::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 22:15, December 31, 2019 (EST) :::Thanks [[User:Pyrrhus]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:48, February 23, 2020 (EST) {{collapse top|completed code request - updated 8 Jun 2019}} Please copy the code below to [[MediaWiki:Common.css]] (but without the "pre" tags). This makes collapsible lists work, improves file upload from mobiles by making things fit in the screen better, and means the "Read more" feature on this page should work now, and hide completed requests unless you click "read more". [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 20:28, June 3, 2019 (EDT) : I’m going to add a small bit to this request, in order to center the donate button in the sidebar. I have tested this on all installed skins. If you have a chance, [[User:Kmdenmark]], please add the following code to the END of this page. Please let us know if you have any questions. Thanks! :[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 14:14, June 8, 2019 (EDT) :Just a friendly ‘ping’, [[User:Kmdenmark]]! Cheers! :[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 17:50, June 11, 2019 (EDT) <pre> /* Collapsible list or collapsible elements eg buttons */ /* move list toggle to left for list */ .collapsed span.mw-collapsible-toggle, .collapse ul.mw-collapsible-toggle, .collapse div.mw-collapsible-toggle, .collapsed span.mw-collapsible-toggle expanded { float: left; } /** Lifted from wikipedia - Sandbox/CollapsibleDemo.css Toggles between right arrow and up arrow images for collapsible elements - lists or bullets See Wikipedia Manual:Collapsible_elements/Demo/Advanced **/ #collapse-pre-one .mw-collapsible-toggle .up, #collapse-pre-one.mw-collapsed .mw-collapsible-toggle .down { display: none; } #collapse-pre-one .mw-collapsible-toggle .down, #collapse-pre-one.mw-collapsed .mw-collapsible-toggle .up { display: block; } /* Lifted from WikiMedia Make sure the license dropdown of the upload form doesn't extend beyond the browser's window, even if there are some long license descriptions. (If that happens, the description box *also* goes beyond the right edge of the window.) */ #wpLicense { width: 100%; overflow: hidden; } /* Give the upload form a little breathing space. */ #upload * td { padding-bottom: 8px; } #mw-upload-table * td { padding-bottom: 8px; } /* end of WikiMedia code */ /* Copied from Wikipedia shared.css for Read more template */ /* hide initially collapsed collapsable tables */ table.collapsed tr.collapsable { display: none; } /* end of Wikipedia code */ /* * What: Center donate button in sidebar * Who: Pyrrhus * When: 8 june 2019 */ #n-donate { text-align: center; } </pre> ==New font code request == (Completed Jun 2 2019) {{Read more| [[User:Kmdenmark]] [[User:JaimeS]] Please add the following code to the ''start'' of [[MediaWiki:Common.css]], without the <nowiki ><pre></nowiki > tags. This will allow for a #MEpedia logo without it needing embedding in an image. It won't work unless on the first line. Thanks [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 16:41, May 24, 2019 (EDT) - edited May 30th for permanent marker <pre> @import url(https://fonts.googleapis.com/css?family=Oswald); @import url(https://fonts.googleapis.com/css?family=Permanent+Marker); /* fonts must go on top line only */ /* #MEpedia logo fonts and classes */ .logo-me { font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; } section#middle-nav .title a { font-family: Oswald, sans-serif; font-style: italic; font-variant: small-caps; } .logo-pedia { font-family: Oswald, sans-serif; font-style: normal; font-variant: small-caps; padding-left: 0.15em; } </pre> }} :[[User:Notjusttired]] Done! [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:02, June 3, 2019 (EDT) ::Thank you! [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 17:29, June 3, 2019 (EDT) == Please add tweet icon -- [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 17:03, July 7, 2019 (EDT) == [[User:Kmdenmark]] Please add the code below (except for the "pre) bits. This should create a twitter type icon, so we can have a Cite tweet if we want at some point. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 17:03, July 7, 2019 (EDT) <pre > .ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") } </pre > ==Minor change for ref-cite-tweet icon == [[User:Kmdenmark]] Can you please change the end section from: <pre > .ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") } </pre > to: <pre > .oo-ui-icon-ref-cite-tweet, .ref-cite-tweet { background-image:url("https://www.me-pedia.org/images/1/16/Ref-cite-tweet.svg") } </pre > This should (hopefully) display the tweet icon in the Cite, Tweet option from visual editor. Thanks [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 05:32, August 3, 2019 (EDT) : Done! [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 11:12, August 3, 2019 (EDT) ::Thanks, it's working! [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 14:38, August 4, 2019 (EDT) {{collapse bottom}} ==Ambox code == <nowiki>/* Not sure what these settings are for */ table.ambox{... </nowiki > 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. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 18:59, October 26, 2019 (EDT) :Thanks! that's very helpful! now updated. :[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 19:31, October 26, 2019 (EDT) ::Thanks [[User:Pyrrhus]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 13:20, October 27, 2019 (EDT) ==Alternance table striping == 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. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 08:42, October 24, 2019 (EDT) :{{done}} :[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 12:51, October 24, 2019 (EDT) ::Thanks ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 18:59, October 26, 2019 (EDT) {{collapse top}} <pre> /* ALTERNANCE */ /** Classes allowing alternating line colors * in tables according to the number of header lines: *.alternance if odd number *.alternance2 if even number. * *.odd is to be kind to IE<9 which does not implement * the selector :nth-child, applied via Common.js (?) * *.sortable: sortable tables require reversing * the alternance. */ .alternance, .alternance2 { border-collapse: collapse; } table.alternance > * > tr > th, table.alternance2 > * > tr > th { background: #e6e6e6; } .alternance tr, .alternance th[scope="row"] { background: #fcfcfc; } .alternance:not(.sortable) tr:nth-child(odd), .alternance.sortable tr:nth-child(even), .alternance:not(.sortable) tr:nth-child(odd) th[scope="row"], .alternance.sortable tr:nth-child(even) th[scope="row"] { background: #eeeeee; } .alternance .odd, .alternance .odd th[scope="row"] { /* be kind to IE<9 */ background: #eeeeee; } .alternance2 tr, .alternance2 th[scope="row"] { background: #eeeeee; } .alternance2 tr:nth-child(odd), .alternance2 tr:nth-child(odd) th[scope="row"] { background: #fcfcfc; } .alternance2 .odd, .alternance2 .odd th[scope="row"] { /* be kind to IE<9 */ background: #fcfcfc; } </pre> {{collapse bottom}} ==Example in use == (please leave in place for testing on different skins) {{collapse top}} {| class="wikitable alternance" |- ! class wikitable alternance !! Header text !! Header text |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- |} {| class="alternance2" |- ! class alternance2 !! col2 !! col3 |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- |} {| class="wikitable alternance2" |- ! class wikitable alternance2 !! col2 !! col3 |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- | Example || Example || Example |- |} {{collapse bottom}} == Temporary holiday notice problem (dark skin) -- ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 18:22, December 22, 2019 (EST) == 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]] <pre> .mw-dismissable-notice { color: #000; </pre> ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 18:22, December 22, 2019 (EST) ===Re: Temporary holiday notice problem (dark skin) -- [[User:DariusC|DariusC]] ([[User talk:DariusC|talk]]) 12:07, December 23, 2019 (EST)=== : 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. ::Thank you Darius. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 16:14, December 28, 2019 (EST) == Category banner size (mobiles and tablets) -- ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 14:48, February 23, 2020 (EST) == Can the code below please be added to improve mobile usability? [[User:Kmdenmark]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|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 [http://www.responsinator.com/?url=www.me-pedia.org%2Findex.php%3Ftitle%3DLorazepam%26useskin%3Dvector 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]] ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 14:48, February 23, 2020 (EST) === Dismissable site notice on mobiles and tablets -- ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:54, February 23, 2020 (EST) === See Zsolt request from Sep 14 2020, which includes this also . ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 20:56, September 14, 2020 (UTC) <s>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. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:54, February 23, 2020 (EST)</s> {{collapse top}} <s>The dismissable site notice code is now being done by the developers, so just add the bullet and numbering code and category banners please. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 16:33, September 11, 2020 (UTC) <pre> /* Mobiles and tablets - smaller category banner */ @media (max-width: 768px) { h1 { font-size: 1.4rem; margin-top: 4px; margin-bottom: 4px; } h1 div, .firstHeading { font-size: 1.25rem; padding: 2px!important; margin-left:0; margin-right: 0; color: #333; text-shadow: none; } /* bullets and numbering */ ul { padding-left: 0.25em; } ol { margin-left: 2em; } } </pre> </s> {{collapse bottom}}
Summary:
Please make sure your edits are consistent with
MEpedia's guidelines
.
By saving changes, you agree to the
Terms of use
, and you irrevocably agree to release your contribution under the
CC BY-SA 3.0 License
and the
GFDL
. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.
Cancel
Editing help
(opens in new window)
Templates used on this page:
Template:Collapse bottom
(
edit
)
Template:Collapse top
(
edit
)
Template:Done
(
edit
)
Template:Interface explanation
(
edit
)
Template:Read more
(
edit
)
Template:Tmbox
(
edit
)
Template:Tmbox/core
(
edit
)
Navigation
Navigation
Skip to content
Main page
Browse
Become an editor
Random page
Popular pages
Abbreviations
Glossary
About MEpedia
Links for editors
Contents
Guidelines
Recent changes
Pages in need
Search
Help
Wiki tools
Wiki tools
Special pages
Page tools
Page tools
User page tools
More
What links here
Related changes
Page information
Page logs