MediaWiki:Common.css

From DayzUnderground Wiki
Revision as of 19:00, 24 October 2025 by Integrity DUG (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* === GLOBAL PAGE STYLING === */

/* === BACKGROUND === */

#body { background-color: #111111; } 
/*- in general the body is equal to the whole screen. However if you set a background color with it, it covers areas where there isn't any other element with specific background color set. In case of the Vector skin it affects the area under the page content and on the left of it.*/

.thumb {
  background-color: #111111;
  border: 2px solid #61dafb;
  border-radius: 8px;
  padding: 4px;
}

#content { 
background-color: #1b1b1b; 
border: 1px solid #1b1b1b;
} 
/*- changes the background color of the content of articles/pages, including the title of the articles.*/

#bodyContent { background-color: #1b1b1b; } 
/*- changes the background color of the content of pages, without the title of the pages.*/

#firstHeading { background-color: #1b1b1b; } 
/*- changes the background color only of page titles.*/

#catlinks { background-color: #1b1b1b; } 
/*- changes the background color of the area in which are displayed the links to the categories to which the page belongs. If a page is assigned to categories, they are listed exactly under the content of the page in a rectangular container.*/

#mw-head-base { background-color: #1b1b1b; } 
/*- changes the background color at the top of the screen, the area above the page title. It doesn't affect the color of the page tabs (e.g. Discussion, Edit, etc.).*/

#mw-panel { background-color: #111111; } 
/*- changes the background color of the menus on the left side of the screen (the area where the links Recent changes, Random page, etc., and the Tools menu are located).*/

#p-logo { background-color: #111111; } 
/*- sets the background color of the area where the logo is located (the top left corner).*/

#p-navigation { background-color: #111111; 
} 
/*- this is for the background color of the Navigation menu in the left column. That's the menu with the links Main page, Recent changes, Random page, Help.*/

#p-tb { background-color: #111111; } 
/*- changes the background color of the Tools menu in the left column. Both the title of the menu and the links in it are affected.*/

#p-tb-label { background-color: #111111; 
background-image: none !important;} 
/*- changes the background color of the Tools menu in the left column. Both the title of the menu and the links in it are affected.*/

#footer {background-color: #1b1b1b; } 
/*- this is for the background color of the footer of the site. This includes the area of the meta links (Privacy policy, Disclaimers, etc.), the information about the last modification of the page and how many times it has been accessed, and the icon "Powered by MediaWiki". All the space that's under the footer to the bottom of the screen is not affected.*/

body { background-color: #111111; } 
/*- in general the body is equal to the whole screen. However if you set a background color with it, it covers areas where there isn't any other element with specific background color set. In case of the Vector skin it affects the area under the page content and on the left of it.*/

#mw-page-base,
#mw-head-base {
background: #111111
}
/*- better masks the background for dark mode.*/

.vector-menu-tabs {
  background-image: none !important;
}

.toc {
    background-color: #1b1b1b;
    border: 1px solid #3c3c3c;
}

#p-cactions-label {
  background-image: none !important;
  background: none !important;
}


/* === BUTTONS AND BORDERS === */

#p-views li a {
color: #d17f0f !important;
font-family: "Bebas Neue";
font-size: 16px; 
background-color: #111111 !important;
font-weight: bold;
background-image: none !important;
}

#p-namespaces li a {
color: #d17f0f !important;
font-family: "Bebas Neue";
font-size: 16px; 
background-color: #111111 !important;
font-weight: bold;
background-image: none !important;
}


/* === TEXT === */


#content p,
#content li,
li::marker {
color: #e0e0e0; 
font-size: 14px; 
font-family: 
"Helvetica"; 
} 



body { color: #e0e0e0; font-size: 16px; font-family: "Helvetica"; } 

#content h1 { 

color: #e0e0e0; 
font-size: 40px; 
font-family: "Bebas Neue";
font-weight: bold;

} 
/*- affects the titles of pages. Section titles/subheadings are not affected.*/

#content h2 { 

color: #e0e0e0; 
font-size: 32px; 
font-family: "Bebas Neue";
font-weight: bold; 

} 
 
/*- affects all level two subheadings. This will also affect the Contents label of the table of contents. To avoid this and change the style only of level 2 headings without the label for the table of contents being affected, you can use the code #content h2 .mw-headline { color: #5a7425; font-size: 12px; font-family: "Courier New"; }.*/

#content h3 { color: #e0e0e0; font-size: 20px; font-family: "Bebas Neue"; } 

#content h4 { color: #e0e0e0; font-size: 16px; font-family: "Helvetica"; } 

/*As you know you can add subheadings to pages. They can be different levels. Section headings that are direct subheadings of the page title are level 2. While, for example, a subheading of a subheading is level 3. You can style the respective level of subheadings by changing the number in the code; for example, #content h4 will affect section headings level 4.*/

#p-navigation { font-size: 16px; font-family: "Helvetica"; }
/*- affects the navigation menu on the left. That's the menu that contains the links Main page, Recent changes, Random page, Help. Note however that changing the font size will also change the size of the menu block and this in turn affects the layout of the page. With the MonoBook skin this code affects both the title and the links of the menu; in the Vector skin this menu doesn't have a label, so only the menu links are affected.*/

#p-tb { color: #d17f0f !important; font-size: 16px; font-family: "Helvetica"; }
/*- affects the Tools menu in the left column. That's the menu with the links What links here, Related changes, Special pages, etc. The label of the menu and the menu links are affected.*/

#mw-panel #p-tb h3 { 
color: #e0e0e0 !important;
font-size: 20px; 
font-family: "Bebas Neue";
font-weight: bold; 
}  
/*- works only with Vector. This will change the color, size and font family only of the title/label of the Tools menu.*/



#p-search { font-size: 16px; font-family: "Helvetica"; } 
/*- affects the Search block. In the Vector skin it's only a text field in the top right corner; there's no text to be affected and changing the font size will affect the size of the text field. In MonoBook it's a block in the left column. The only text is the title of the block, and the text in the buttons Go and Search. Changing the font size will affect not only the title of the block but also the buttons and the text field and respectively the size of the whole block. Setting a font color using this ID will not affect any text in this block, that's why we haven't included it in our example.*/

#left-navigation { font-size: 16px; font-family: "Helvetica"; } 
/*- works with Vector. This changes the font size and style of the page tabs at the top left side. These are the tabs Page and Discussion. Since they are links they are not affected by the color changes specified with this code.*/

#right-navigation { font-size: 16px; font-family: "Helvetica"; } 
/*- works with Vector. Changes the size and font family of the text of the page tabs at the top right side (e.g. Read, Edit, View history, etc.).*/

#p-personal { font-size: 16px; font-family: "Helvetica"; } 
/*- this will change the size and font style of the user links in the top right corner of the screen. These are the links Create account and Log in for anonymous users; Preferences, Watchlist, Contributions, etc. for logged in users.*/

div#footer ul li { color: #d17f0f; font-size: 16px; font-family: "Helvetica"; } 
/*- this affects the text in the footer. This is the text about the last modification of the page, the information about the license used on the site, the links Privacy policy, Disclaimers, etc.*/


/* === HYPERLINKS === */

/* unvisited link */
a:link {
  color: #d17f0f;
}

/* visited link */
a:visited {
  color: #a6660c;
}

/* mouse over link */
a:hover {
  color: #d17f0f;
}

/* selected link */
a:active {
  color: #d17f0f;
}

/* left hand panel links */
#mw-panel a {
        color: #d17f0f !important; font-size: 14px; font-family: "Helvetica";
        }

#mw-panel a:visited {
  color: #a6660c; font-size: 14px; font-family: "Helvetica";
}

#mw-panel a:hover {
  color: #d17f0f; font-size: 14px; font-family: "Helvetica";
}

#mw-panel a:active {
  color: #d17f0f; font-size: 14px; font-family: "Helvetica";
}

#footer-info-lastmod {
    color: #e0e0e0 !important;
    font-size: 12px;
    font-family: "Helvetica";
}

.tocnumber {
    color: #e0e0e0 !important; /* set to white or your preferred color */
}

blockquote {
    color: #e0e0e0 !important; font-size: 18px !important; font-family: "Helvetica" !important; 
}