CSS

“ At present we cant add CSS to Commons.css for every work, otherwise it would become very big. Additions to the global CSS need to be generic, so that they are features that can be used by many works. Perhaps we need a big discussion about this on WS:S, to investigate current CSS inline usage and enhance the global CSS to minimise inline CSS. Document specific style sheets hasnt been widely discussed, and it would depend on a software enhancement, or perhaps a mediawiki extension already exists. I dont have time to run a bot elsewhere. ”

“ Anyway, the above third and fourth examples implement your sig entirely with css such that it is immune from this; the fourth example is wrapped in apostrophe pairs to no effect. Other all-css implementations would work, i.e. you might prefer to allow the sig to go all-italic, but still control the color. Might as will give that, too;
— Rlevse • Talk • — Rlevse • Talk • Oh, I also added 'sans-serif' as a fallback typeface. ”

“ Keeping primary stylings in the CSS file will make it clear what is going on (hopefully) . Edit: add .ns-104 .quality1, to the first 5 lines, so you get styling in the page namespace (page header, edit buttons) too. Inductiveload—talk/contribs 02:55, 26 February 2012 (UTC) Respectfully, Huh? I don't know what you are seeing but every namespace I checked already has the PR color status of the Page: linked as the background color now - including (forehead smack) the Index: namespace. ”

“ See the example. Index pages now have a CSS field. It contains classes to be added to Page: pages. see example: book with two columns. Noting that this css code only applies in Page: and does not transclude. The

is now hidden. TOC pages : when is used without "from" and "to" a proofreading status indicator for the whole book is displayed, and the table of contents of the book is transcluded from the index page. example at enws, example at frws The tag accepts a "follow" parameter : . ”

“ I see value in maintaining a template interface to this functionality; a number of reasons, really. First would be flexibility; the template provides a point of control, i.e. options for the future. Second, using client-side css is better than server-side parser functions in a lot of circumstances. When someones copy-pastes text off the screen that has been somehow UPPERED, what should they get? With the css approach, they get the, presumably, mixed-case that was passed to the template; with the parser function, they get ALL-CAPS, all the time. ”

“ Each distinct selectable layout is at heart just a set of CSS style rules. Because our texts contain certain elements that should not be subjected to these layout rules (the header, maintenance templates, authority control, license tags, etc.) , the Gadget has to identify these and hoist them out of the layout containers. That is, it is guessing what parts of the page is part of the text and what parts are something else.
This approach has all sorts of problems. Wrapping with the extra elements after the page has been rendered forces the browser to relayout the page. ”

“ The real problem with the overlapping sidenotes amounts to the lack of a CSS clear:left directive from the floating elements (being the sidenotes themselves. Oh and clear:right for the right-hand ones.) ”

“ For example, many e-readers can handle only a very tiny subset of CSS. You should not use CSS for any content that must be shown even if the reader doesn't support any CSS. For example, using CSS counters to number lists or :after selectors to add dots after list numbers will result in the wrong thing being shown to users without CSS. As a rough guide, if it can't be copy-and-pasted, users will not see it when CSS is not available. ”

“ You should think about whether there is a semantic element that matches the intent of your use of a presentational element. If there is such an element, you should use it, and if it doesn't already have a default styling that you like, then you can use CSS from the tables below to make it look like you want. ”

“ Per-work CSS is more suitable for applying work-specific styling to generic classes. You can still target the output of templates with work-specific CSS (the template in question should set a class to allow this) .
The following are some templates set classes that can be usefully targeted with CSS (others can be found in Category:Templates applying classes for page styles) :
{{pseudoheading}}: The overall heading element has .wst-heading (search for .wst-heading in CSS files) . Derived templates apply other classes. {{rule}} The

---

element has class .wst-rule . ”

“ This group is called interface administrators. Administrators can delete user CSS and JavaScript pages. There will be an A/B test on the Wikipedia mobile website. It starts this week. It tests how we show templates that show information about an article. The test will last two weeks. You can now use different CSS rules for different skins when you edit templates. This is because of TemplateStyles. wp10 in ORES is now called articlequality. When you get a new message on your talk page you get a yellow message in the toolbar. ”

“ It may be that floating very small bits of link-text as in the example at the top of this thread may be a common use of this sort of template. However, these templates are encapsulating fundamental layout mechanisms and they should be general. The css utils I gave as examples are general; a floated div can contain a lot and the behaviors I suggested have proven, to me, to be quite handy. Making some behaviors optional might work, and a style attribute can override anything. ”

“ And then instead of doing this with JavaScript after page load, we use {{header}} to insert the start tag for the main content area and a new {{footer}} template to insert the end tag. This would eliminate all the repaints, obviate the need to move elements around in the DOM, and do the core of the layout functionality using HTML and CSS (robust, predictable, handled by the web browser) instead of coding it ourselves. ”

“ Surely a text-align: and width: CSS property pair could produce the same effect as all that visibility:hidden/padding stuff? I am severely behind here―any idea where the logic to produce this lives? (Cancel that: its in the PHP code: ProofreadPage.body.php:743:
$txt = '';et al) Assuming the "cure" is not worse than the disease, have you (or anybody else) raised this sort of thing with the GSoC mob? ”

“ It should never be an issue to have a productive conversation about the components of the headers, and the layouts of the pages. Things evolve (front and back end; desktop and mobile) , and there is occasional design creep, so sounds reasonable discuss components that are problematic. We can lack good skills in css in our populace, or maybe that is those willing and able in css. Also to note that with the new mw:Extension:TemplateStyles there is scope for us to pull elements out of the Template:Header and modules to separate/simplify components. ”

“ If you don't want to show pagequality, you just need to set in your Common.css something like this: .ns-0 .quality0, .ns-0 .quality1, .ns-0 .quality2, .ns-0 .quality3, .ns-0 .quality4 { background-color: transparent; } Candalua (talk) 11:45, 27 February 2012 (UTC)
Exactly. Classes do not equal colouring, they just permit it to be set when you want. You can unset it wherever you like. For example, you could hide in mainspace, have on hover in userspace, show in page/index space, flash on and off in template space and spin around in Portal space, but only when in a certain place. ”

“ CSS shines where we can leverage selectors like descendants and :nth-child. For example __grid is something that cannot be done without very verbose inline styling. There's also a risk of de-semanticising (ironic use of a non-word intended!) things as well as providing a wide surface for fragility. For example, the following would render the same: {| class="somework_somedata" |... index CSS provides the grid and margin:auto rules here, which apply to the "_somedata" type of tables. |} {{table class/import}} {| class="__grid __floatc" .... ”

“ If the 5% can be coerced into a wider framework, then great, if they can't, then don't make the 95% case impractical to accommodate. Inductiveload—talk/contribs 10:00, 7 June 2021 (UTC) Re We need to find ways to provide stuff "for free" to be able to leverage it routinely. Either predefined stylesheets with very common varieties, or some kind of friendly visual editor to add snippets of CSS under the hood but presenting a GUI-ified interface to overriding certain properties ("All headings should be green instead of black") . At a minimum we need to provide boilerplate CSS and guidance. ”

“ CSS is not nasty stuff. C++ class hierarchies can be much more daunting than selector specificity issues. Cheers, Jack Merridew 13:56, 26 September 2009 (UTC)
OK, I've had a look-see. Idea is to refactor MediaWiki:Proofreadpage header template to use the look of Template:Header and maybe shove the code in that direction, too? I rather like the div-based structure of the MW page... Promise ”

“ We then explicitly reserve such class names for use in per-work CSS.
I suspect that on examination of existing uses of {{h}} and {{ch}} we will find a large proportion of the uses are actually "used on principle" or "used in ignorance" where they're used for the default styling of the respective template. In my experience with other such templates I also hold it likely that a large proportion of the rest will fall into a relatively small number of categories. I'm thinking these may be worthwhile to have predefined global classes for, but that needs careful consideration. ”

“ Name is from leading in printing. style – adds CSS style options. Example: |style=border:solid 1px silver; background:lightyellow This CSS style adds a solid silver border around the list, 1 pixel thick, and sets the background color of the list to light yellow. Example: |style=margin-left:2em; text-indent:-2em This CSS style creates a "hanging indent" style list often seen in the index of a book. ”

“ None fill me with joy. Having templates that wrap CSS so thinly does rather beg the question of why we bother if we're basically writing a homebrew creole for, essentially,

Inductiveload—talk/contribs 19:28, 1 March 2021 (UTC) @Inductiveload: I'm more comfortable with a leading parameter and attendant code on {{ni}} than {{salutation}}. ”

“ Note, the CSS in inlined up front, so you can't have the CSS apply only after a certain point. Inductiveload—talk/contribs 20:05, 31 January 2020 (UTC) I meant having something in the table syntax for wikitext markup that does what TemplateStyles (or {{table class/import}} does albiet on a per table basis... I can of course set id= on the table and use that id as a suitable selector if I want to classes to a specfic table... ShakespeareFan00 (talk) 09:30, 1 February 2020 (UTC) The inlined upfront, is why I'd like to see the phab ticket you mention resovled (2021 Tech wishlist maybe?) ”

“ It's an super minor thing, but the point is that any template flexible enough to arbitrarily set text-indent and leading will probably end up being a {{ts}}-style mess that's basically just CSS in a home-made dress and has zero semantic content. On reflection, you quite are right that {{salutation}} is not a good way forward. However, directly formatting it with inline CSS (with or without a translation layer like {{ti}} or {{sbs}}) doesn't sit well. ”

“ Also, similar to the (new) {{ppb}} without DHR escorts, {{section end rule}} provides a similar thing for a rule. By adding a dedicated class, default padding and width (and any other CSS) can be applied though index-level CSS, so you don't need the {{dhr}}{{rule}}{{dhr}} idiom (or anti-pattern, depending on how grumpy one feels) , you just need {{ser}}. The idea is similar: allow the user to express what they mean, as well as avoiding spraying out 3 separate HTML elements that might or might not even end up on the same page. Inductiveload—talk/contribs 13:07, 17 May 2021 (UTC) Hah! ”

“ I agree. This is something I should have built in the extension's code :-) ThomasV (talk) 12:46, 15 April 2011 (UTC) Add Top icon snippet to common CSS & Javascript I would like to propose adding MediaWiki: Snippets: Top Icons to the common CSS and Javascript. This code will allow for top icons that appear inline with the title (as at Wikipedia) rather than at the top of the page just under the title (as is currently the case here) . The current situation means that the top icons often overlap with the header template and obscure the next link where it is present. ”

“ I inserted some styles into Template:Plainlist/styles.css that were close enough but still you are outputting a few selectors more than you should to support those templates/modules. Template:Hlist/styles.css that I have made today (because it is relevant to those modules) and Template:Flatlist/styles.css are effective duplicates that you will need to resolve, however you want to do that. I am happy to help but my recommendation is to un-fork those class names. Template:Flatlist is accordingly unchanged by my efforts; 'upstream' uses Template:Hlist/styles.css. ”

“ CSS is designed to restrict the playback of an encrypted (scrambled) DVD to a CSS-equipped DVD player or DVD drive, which is capable of decrypting (unscrambling) the DVD. CSS is primarily composed of algorithms and 400 "master keys." ”