Everybodywiki:CSS

EverybodyWiki:
Project pages
To-do list Technical issues Feature suggestions Discussion CSS

This project page is a place to share CSS code snippets and user styles for customizing the user experience using MediaWiki's built-in user space CSS or an user style browser add-on.

Templates

• {{CSS-suite}} – A set of useful CSS classes to enhance the appearance of articles.
  • {{Responsive unfloat}} (shortcut: template:rfloat) allows automatically floating/unfloating page elements. Now a part of Template: CSS-suite.

Page table of contents

• {{TOC height}} turns the table of contents into a height-limited scrollable box, which may be useful for articles with too many sections
• {{TOC unfloat}} forces the table of content not to float, if it is too wide.
  • Recommendation: Avoid long section titles.
• {{TOC right 2}} should be used if Template:TOC right breaks the page appearance or responsive web design.
• {{TOC fixed}} fixes the table on sufficient screen width (≥1500px) to be quickly accessible at any scroll position.

User styles

Feel free to add your custom user styles to the list.

• User:Handroid7/minerva.css (minerva7)
• User:Handroid7/chameleon.css (chameleon7)

Implementation

When code is wolrking well you can ask WikiMaster to implement it :

• Wiki wide/all skins MediaWiki:Common.css
• Wiki wide/Chamelon skin : MediaWiki:Chameleon.css
• All EverybodyWikis with extension GlobalCssJs (to be tested)

Code snippets

These code snippets can be applied by pasting them into a user space CSS page or a user style browser add-on.

Chameleon

/* Use entire screen width for content. Convenient for readers with large monitors */
  .container { max-width: none; }

Grid bottom toolbox (unfinished)

.mb-2.p-navbar .navbar-nav {
    display: block;
    column-count: 3; 
    width: 100%;
} 

/* Only for help during experimentation. */
a{ border: 1px solid #aaa;}
} 

/* Patch code for [[User:Handroid7/chameleon.css|Chameleon7]], if implemented */
.mb-2.p-navbar .navbar-nav {
    display: flex; /* inline-flex works too. */
    column-count: initial; 
    width: initial;
}

Shadowed scroll box (unfinished)

.scrollbox {
  color:white;
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background: /* Shadow covers */
  linear-gradient(inherit 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), inherit 70%) 0 100%, /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)) 0 100%;
  background: /* Shadow covers */
  linear-gradient(inherit 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), inherit 70%) 0 100%, /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(128, 128, 128, .4), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: inherit;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}

Floatable article message boxes (implemented in Template:Responsive unfloat/Template:rfloat)

.floatbox {
  float:  right;
  clear:  right;
  width:  309px;
  margin: 0 0 1em 1.4em;
}

@media (max-width:639px) {
  .floatbox {
    float:  none;
    clear:  both;
    width:  100%;
    margin: 0;
  }
}

Responsive thumbnails

/* Responsive thumbnails */
@media (max-width:639px) {
  div.thumb { 
    margin: 0.5em 0 0.5em 0;
    text-align: center; 
    justify-content: center;
  }
  div.thumbinner { 
    justify-content: center; 
    margin:0 auto;
  }
}

Experimental

This section contains experimental and/or unfinished code snippets.

Canvas overflow issue

Apparently, something in the page is causing a canvas overflow.

What I have tried so far:

.pagetools, .pagetools .tab-group,
.footer-info, .footer-places, .footer-icons { margin: 0; }

#ezoic-pub-ad-placeholder-105 { 
  max-width:   90vw; 
  overflow-x:  scroll;
}

Experimental thanks button

@media (max-width:640px){

.jquery-confirmable-wrapper { white-space: unset; }

.jquery-confirmable-interface { 
  display:inline-block;
  position:fixed;top:40%;right:5%;
  background:#dfd;
  border: 1px solid black;
  box-shadow:0 0 20px -5px black;;
  border-radius:0.3em;
  word-wrap: break-word;
  justify-content: center;
  text-align:center;
  
}

.jquery-confirmable-text { width:100%; }
.jquery-confirmable-text,
.mw-thanks-thank-link { display:inline-block; }
  
}