MediaWiki talk:Pivot.css
Code requests[edit source | reply | new]
Done[edit source | reply | new]
Undo then do header bar[edit source | reply | new]
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. ~Njt (talk) 17:43, September 11, 2020 (UTC) Now done ~Njt (talk) 23:41, September 28, 2020 (UTC)
- OK Kmdenmark (talk)
- Thanks User:Kmdenmark - this looks so much better now. ~Njt (talk) 01:05, October 15, 2020 (UTC)
code |
---|
/* #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; } |
Tools sidebar[edit source | reply | new]
Please add the following code, without the "pre" tags, right above the "/* sidebar background color */" Now done ~Njt (talk) 23:41, September 28, 2020 (UTC)
/* 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;}
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. ~Njt (talk) 22:14, September 22, 2020 (UTC)
fix light gray subheadings h4, h5, h6[edit source | reply | new]
Please add the follow code near h4, h5, h6:
/* v2.2 onwards requires this change */ h4,h5,h6 {color: #6f6f6f;}
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. ~Njt (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. ~Njt (talk) 23:32, September 28, 2020 (UTC) Now done ~Njt (talk) 23:41, September 28, 2020 (UTC)
Category banner size and dismissable site notice on mobiles[edit source | reply | new]
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 ~Njt (talk) 23:29, September 2, 2020 (UTC)
/* 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 */
- Njt , Done
~Njt (talk) thanks
Old requests[edit source | reply | new]
(Done)
content hidden | ||||||
---|---|---|---|---|---|---|
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 ~Njt (talk) 15:34, November 17, 2019 (EST) 1) pre, td { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; } to delete the ", td " from the top and change a setting to normal: pre { padding-left: 2em; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; white-space: -o-pre-wrap; word-wrap: normal; } 2) 2. Please add the code below to the very top, above the existing code. /* 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; } 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. ~Njt (talk) 15:34, November 17, 2019 (EST) From: @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; } } To: /* 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; } } Color of error class[edit source | reply | new](Done)
Code request - wanted categories are white[edit source | reply | new]Done
Requested to copy to Pivot.css to set color scheme[edit source | reply | new](completed May 17, 2019) /* 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; } User:Kmdenmark could you do this please? It's for the new pivot skin notjusttired (talk) 09:57, 14 May 2019 (EDT)
(hide) (read more) Completed request - May 19th[edit source | reply | new]User:Kmdenmark and User:Pyrrhus. Could you also add this onto the bottom of the existing code.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. notjusttired (talk) 13:07, 19 May 2019 (EDT)
/* 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 */
(hide) (read more)
CSS changes? -- Pyrrhus (talk) 19:11, June 8, 2019 (EDT)[edit source | reply | new]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:
Any idea what may be going on? Thanks!
Recent changes code - done
[edit source | reply | new]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. notjusttired (talk) 10:04, August 12, 2019 (EDT) /* removed powered by mediawiki - which has several different names oddly */ #footer-poweredbyico, #footer-poweredby, .poweredby { display:none; } |