MediaWiki talk:Pivot.css
Code requests
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 ~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
Old requests
(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(Done)
Code request - wanted categories are whiteDone
Requested to copy to Pivot.css to set color scheme(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 19thUser: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)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
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; } |