Anonymous
Not logged in
Talk
Contributions
Create account
Log in
Search
Editing
MediaWiki talk:Pivot.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 “Pivot” skin or the “Vector” 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:Pivot.css]]. # When updating check the new 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.}} ==Code requests == ==Done== ===Undo then do header bar=== User:Kmdenmark Can you '''undo''' the last change? We are going to use that code on Common.css for all skins instead. After the revert can you put those code near the top, under the line that says "added by Notjusttired" please. As before, without the "pre" tags. This will simply change the MEpedia heading on pivot from ''MEpedia'' to #MEpedia (no italics) and improve a margin used on the main welcome page. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:43, September 11, 2020 (UTC) '''Now done ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:41, September 28, 2020 (UTC)''' :OK [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) ::Thanks [[User:Kmdenmark]] - this looks so much better now. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 01:05, October 15, 2020 (UTC) {{collapse top|code}} <pre> /* #MEpedia logo fonts and classes */ section#middle-nav .title a.current { font-style: normal; } section#middle-nav .title a::before { content: "#"; font-variant: normal; margin-right: -0.15em; } .mw-body li.gallerybox div.thumb { padding: 0; } </pre> {{collapse bottom}} ===Tools sidebar === Please add the following code, without the "pre" tags, right above the "/* sidebar background color */" '''Now done ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:41, September 28, 2020 (UTC)''' <pre> /* change text color when hovering over left sidebar */ ul.side-nav li a:not(.button):focus, ul.side-nav li a:not(.button):hover { color: #fff; } #p-tb { margin-bottom: 1em;} </pre> This will affect the pivot skin only, changes are: * highlighting a side bar item makes text white (background is blue, before the text was blue) * make sure that the sidebar's TOOLs heading sidebar has a small margin before the What links here link, like the other sidebar headings do. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 22:14, September 22, 2020 (UTC) ===fix light gray subheadings h4, h5, h6=== Please add the follow code near h4, h5, h6: <pre> /* v2.2 onwards requires this change */ h4,h5,h6 {color: #6f6f6f;} </pre> This will no make a difference until the next release of pivot, but on the List of news articles page it will make sure the smallest subheadings are dark gray/almost black. Thank you. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 13:09, September 23, 2020 (UTC) Update: this is to prevent it being overwritten in the server version of pivot.css included in v2.2. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:32, September 28, 2020 (UTC) '''Now done ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:41, September 28, 2020 (UTC)''' ===Category banner size and dismissable site notice on mobiles === [[User:Kmdenmark]] Please add this code to the end of Pivot.css, it should shrink the banner height where there is a colored banner (eg any potential treatments like [[ibuprofen]]), make the dismissable site notice wider/smaller when pivot is used on mobile screens and fix some layout issues with bullet and numbered lists. As usual ignore the "pre" tags. Thank you ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 23:29, September 2, 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; } /* Mobiles and tablets (cont) - dismissable site notice - remove large gap on left to reduce the space it takes up, shrink top and bottom margins, reduce left margin on numbered lists */ .sitedir-ltr .mw-dismissable-notice-body { margin: 2px 4.5em 2px 0.5em; } .mw-dismissable-notice { font-size: 90%; } ul { padding-left: 0.25em; } ol { margin-left: 2em; } } /* end of mobile code */ </pre> :[[User:Notjusttired|Njt]] , {{Done}} ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) thanks ==Old requests == (Done) {{collapse top}} 1. [[User:Kmdenmark]] [[User:Pyrrhus]] Please change the following to fix the extra gap that it caused in the table of contents. Add usual, without the "pre" tags ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:34, November 17, 2019 (EST) 1) <pre> pre, td { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } </pre> to delete the ", td " from the top and change a setting to normal: <pre> pre { padding-left: 2em; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: normal; } </pre> 2) 2. Please add the code below to the very top, above the existing code. <pre> /* normalize paragraphs, lists and tables to reduce margins */ p { margin: 0 0 1em 0; padding: 0; } table { display: table; overflow-x: visible; margin: 0; padding: 0; } td { display: table-cell; margin: 0; padding: 0; } ul, ol { padding: 0; margin-top: 0.3em; margin-bottom: 0; } </pre> 3) 3. Please change this code to allow article message boxes to be wider on small screens. This add a hyphen - to the start of a line to fix an error, and deletes the white-space lines. Thank you. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 15:34, November 17, 2019 (EST) From: <pre> @media screen and (max-width: 500px) { td, #mw-content-text li { margin-left: 2px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } } </pre> To: <pre> /* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */ @media screen and (max-width: 500px) { #mw-content, /* special pages */ td, #mw-content-text li:not(.gallerybox) { margin-left: 2px; overflow-wrap: break-word; word-wrap: break-word; -webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } } </pre> ==Color of error class == (Done) {{collapse top}} [[User:Kmdenmark]] [[User:Pyrrhus]] Please change the following code, which changes the error class color. ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 17:47, November 17, 2019 (EST) :{{Done}} [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:25, November 18, 2019 (EST) ::{{Thank}} [[User:Kmdenmark]]. Would you be able to do the changes 1-3 above as well? ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 13:10, November 21, 2019 (EST) :::{{Done}}[[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:57, November 21, 2019 (EST) ::::Thanks ~[[User:Notjusttired|Njt]] ([[User talk:Notjusttired|talk]]) 19:46, November 22, 2019 (EST) From: <pre> .error code { color: #FF4444 !important; color: #fff !important; } </pre> to: <pre> .error code { background-color: #fff; color: #FF4444 !important; } </pre> {{collapse bottom}} ==Code request - wanted categories are white== Done {{collapse top}} Please add the following code to the end of [[MediaWiki:Pivot.css]], which should make any wanted categories visible at the bottom of pages - currently it's white text on cream. [[User:Kmdenmark]] Thanks [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]])<pre> #mw-normal-catlinks a.new { color: #BA0000; } </pre> :Thanks [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 16:06, August 12, 2019 (EDT) {{collapse bottom}} ==Requested to copy to Pivot.css to set color scheme == (completed May 17, 2019) {{Read more|<pre> /* Code by Notjusttired */ /* Custom colors - top bar MEActionRed */ .tab-bar { background: #E7453A; color: #FFF; font-family: "Helvetica Neue", sans-serif; font-weight:bold; } /* style the sidebar navigation labels */ ul.side-nav label { background: #E7453A; color: #fff; padding: .25em .5em; } /* sidebar background color */ body { background-color: #f2f2f2; } /* controls the main body area styling */ #p-cactions { padding-top: 1.5em; padding-bottom: .5em; margin-left: 0; margin-right:0; background-color: #f6f6f6; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } /* pull out side bar icons MEAction grey */ ul.off-canvas-list li label { background-color: #E7453A; color: #FFF; } ul.off-canvas-list li a { background-color: transparent; color: #333333; } /* very light grey pull out side bar */ .right-off-canvas-menu, .left-off-canvas-menu { background-color: #F6F6F6; } ul.off-canvas-list li a:hover { background-color: #F6F6F6; } .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background-color: #0BA7CD; } /* category button color dark grey */ h4.namespace.label { background-color: #767c7e; } /* new code */ #p-cactions { padding-left:5px; padding-right:5px; } .center, text-center { text-align: center; } /* paragraphs inside tables must not overwrite alignment */ th p, td p, th > p, td > p { text-align: inherit; } /* gallery margins are zero on vector */ ul.gallery { margin-left: 0; margin-right: 0; } /* gallery image border */ div.thumb div { margin: 0.5rem auto; } .gallerybox { text-align: center; } /* Fit images to containers */ img, .thumb, .image { max-width: 100%; height: auto; } /* unless image is clicked on set max width */ .gallery > img, table > img, img { max-width: 75%; height: auto; } h1.mw-body-content { font-size: 1.8rem; } h2.mw-body-content, td.h2, th.h2 { font-size: 1.375rem; } h3.mw-body-content { font-size: 1.25rem; } h4.mw-body-content { font-size: 1.1rem; font-weight: bold; } h5.mw-body-content, h6.mw-body-content, h7.mw-body-content { font-size: 1rem; } </pre> [[User:Kmdenmark]] could you do this please? It's for the new pivot skin [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 09:57, 14 May 2019 (EDT) :[[User:Notjusttired]] I need more hand-holding, I'm not sure where you would like this copied to. I copied it to https://www.me-pedia.org/wiki/MediaWiki:Pivot.css. If you meant somewhere else, please flag me again. [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 17:16, 16 May 2019 (EDT) ::Thanks, [[User:Kmdenmark|Kmdenmark]]! I think that’s what Notjusttired meant. I think you just have to remove the beginning <nowiki><pre></nowiki> and the ending <nowiki></pre></nowiki> and then the CSScode should be correct! ::[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 17:43, 16 May 2019 (EDT) :::[[User:Pyrrhus]] Thank you. I removed the tags, hope it is correct now! [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 18:02, 16 May 2019 (EDT) ::::That's great! Thanks }} ==Completed request - May 19th== [[User:Kmdenmark]] and [[User:Pyrrhus]]. Could you also add this onto the bottom of the existing code. {{Read more |I've deleted the code already there from this talk page to avoid me getting mixed up or code getting copied in their twice. This should sort an issue with the ''pre'' tag scrolling, white on white for citation date errors, and prevent long links or long words messing up citations or lists on mobiles (example: [[:Category:Potential treatments]] - wanted pages list). Extra code for pivot.css below. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 13:07, 19 May 2019 (EDT) <pre> /* Make Echo extension more mobile friendly on small widths including mobiles in landscape view */ @media only screen and (max-width: 750px) { .oo-ui-popupWidget-popup { width: auto !important; position: relative !important; margin-left: 10rem !important; margin-right: 0!important; left: auto; right: 0.9rem; font-size: 75% !important; } .oo-ui-clippableElement-clippable.oo-ui-popupWidget-body { width: 100% !important; right: 1.5rem; } } /* make donate look like button */ #n-donate { margin-left: 0.25em; } #n-donate a { display:inline-block; } /* pre tag must wrap, also break crazily long words in lists and tables */ pre, td { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } /* break long citation urls */ .citation { word-wrap: break-word; } /* mobiles: break crazily long words in lists and tables, using hyphens and keep broken items in same column, put columns closer together */ @media screen and (max-width: 500px) { td, #mw-content-text li { margin-left: 2px; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; webkit-column-gap: 2em; -moz-column-gap: 2em; column-gap: 2em; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } } /* Headings centered on other skins eg for home page contents */ table.wikitable > tr > th, table.wikitable > * > tr > th { text-align: left; } #footer-developers, #footer-cookiestatement { padding-right: 2rem; display: inline; text-align: center; } #footer-left, #footer-places, #footer-disclaimers, #footer-privacypolicy, #footer-about { display: inline; text-align: center; } /* removed powered by mediawiki - which has several different names oddly */ #footer-poweredbyico, #footer-poweredby, .poweredby { display:none; } /* center block - won't overlap sidebar */ #footer-left { display: inline-block; width: 100%!important; text-align: center; padding-right:8px; } /* fix footer bleed by fixing negative margin */ footer { margin-left: 0!important; margin-right: 0!important; padding-right: 8px;} /* Color code snippets incl for errors */ code { background: #999; background: rgba(204,204,204,0.9); color: #000; font-weight:bold; } .error code { color: #FF4444 !important; color: #fff !important; } /* allow scroll on tables */ table { max-width: none; overflow-x: auto; display: block; } #p-cactions { max-width: none; } /* end of tested code May 23 2019 */ </pre> :[[User:Notjusttired]] I added this code to the bottom of the existing code on the page. Crossing my fingers that I did it correctly. [[User:Kmdenmark|Kmdenmark]] ([[User talk:Kmdenmark|talk]]) 16:46, June 3, 2019 (EDT) ::That's working great, thanks! With the code changes, once it is saved or previewed you will see it highlights different words or symbols in different colors. Only worry if everything new is in the same color. If you want to see how it looks you can go into your user preferences, and in Appearance pick the Pivot skin. Thanks again. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 17:37, June 3, 2019 (EDT) }} == CSS changes? -- [[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 19:11, June 8, 2019 (EDT) == Hi [[User:Notjusttired]]! I have just returned to the Pivot skin to see how the new CSS is working. I noticed a few things that may be related to the CSS changes: # The search box on the main page is now left-aligned, which looks funny on large screens because it leaves a large empty space on the right side of the screen. If centering it causes problems on mobile, maybe we should just make it full-width? # I noticed that the text in the “Recent changes” page is now disorganized. # Some of the diff pages are running off the right side of the screen, such as [https://www.me-pedia.org/index.php?title=Jose_Montoya&curid=330&diff=59614&oldid=59467&diffmode=source here]. Any idea what may be going on? Thanks! <br>[[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 19:11, June 8, 2019 (EDT) :I will add those to the outstanding issues list. :1 The search box - do you mean the large one by Try Exact Match only on the main page? The whole section around the search box, ie the surrounding boxes in the tables, not just the search box? I think it's when the screen is wide enough for the sidebar to be visible that there are issues. I can't find the exact width what's it goes wrong, I use the quirktools screenfly website but can't really zoom out to tell. Can you check if this is an issue on the Timeless skin too? The issue might be adding ''' display: block''' to the wikitable section. :2 I thought recent changes looked messy before? Can you describe how? :3 Will need to check into that code since I haven't done any changes aimed at the Recent Changes page. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 19:13, June 9, 2019 (EDT) ::1 Sorry, I meant the whole section around the search box, including the “MEpedia’s articles have been viewed..” line. It looks fine on the Timeless skin. ::2 Maybe it was messy before and I just didn’t notice! If there has been only one change to a page, it shows up correctly as a single line on the “Recent changes” page. But, if there have been multiple changes to a page, it shows up broken into 7-8 lines. ::3 I only notice that the diff pages run off the right side of the screen on smaller screens, not on my desktop. This has nothing to do with the recent changes page, as it also happens when I select a diff from the page history. But it only happens with some diffs, not with others. Again, this may have existed before but I just didn’t notice. ::Hope this helps! [[User:Pyrrhus|Pyrrhus]] ([[User talk:Pyrrhus|talk]]) 19:43, June 10, 2019 (EDT) :::Thanks [[User:Pyrrhus]]. The first issue should have been sorted by a change to the main page. For the recent changes page layout try the code below. I don't yet have a solution for the history diff issue. ::::First 2 issues should be sorted now. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 15:56, August 13, 2019 (EDT) Recent changes code - done {{collapse top}} [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 20:33, July 27, 2019 (EDT) :[[User:Kmdenmark]] can you add the code below to the page, without the "pre" bits? Thanks [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 10:04, August 12, 2019 (EDT) <pre > /* recent changes improvements for small screens */ .mw-enhancedchanges-arrow-space, .mw-enhanced-rc-time, .mw-changeslist-diff-cur { white-space: normal; } .mw-changeslist-line-prefix, .mw-enhanced-rc, .mw-changeslist-line-inner, .mw-enhanced-rc-nested { white-space: pre-line; } </pre > {{collapse bottom}} ==Show poweredby in footer== It may be necessary to remove the following code from the CSS page to show the MEpedia default image at the bottom of all pages - will have to check once developer changes made. [[User:Notjusttired|notjusttired]] ([[User talk:Notjusttired|talk]]) 10:04, August 12, 2019 (EDT) <pre> /* removed powered by mediawiki - which has several different names oddly */ #footer-poweredbyico, #footer-poweredby, .poweredby { display:none; } </pre >
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:Thank
(
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