MediaWiki:Common.css: Difference between revisions

Revision as of 10:03, 16 September 2022

/* CSS placed here will be applied to all skins */

/* SITE COLORS */

#content { background-color: #38373D; } - changes the background color of the content of articles/pages, including the title of the articles.

#bodyContent { background-color: blue; } - changes the background color of the content of pages, without the title of the pages.

#firstHeading { background-color: orange; } - changes the background color only of page titles.

#catlinks { background-color: green; } - 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: #e6ffb4; } - 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: #e6ffb4; } - 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: #e6ffb4; } - sets the background color of the area where the logo is located (the top left corner).

#p-navigation { background-color: #e6ffb4; } - 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: #e6ffb4; } - 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: #e6ffb4; } - changes the background color only of the title of the Tools menu on the left. The color of the actual menu is not changed.

#p-tb .body { background-color: #e6ffb4; } - changes the background color of the Tools menu but without changing the background color of the title of the menu.

#footer { background-color: #e6ffb4; } - 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: black; }

#content { background-color: #e6ffb4; } - this ID is the same as for the Vector skin. It changes the background color of the content and title of pages.

#bodyContent { background-color: #e6ffb4; } - this is also the same as for the Vector skin. It sets the background color only of the content of pages without affecting the title.

#firstHeading { background-color: #e6ffb4; } - sets the background color only of page titles without affecting the content of pages.

#catlinks { background-color: #e6ffb4; } - changes the background color of the rectangular area where category links are located. It's situated under the page content (if the page belongs to any categories).

#p-logo { background-color: #e6ffb4; } - sets the background color of the area of the logo.

#p-navigation { background-color: #e6ffb4; } - this is for the background color of the title of the Navigation menu in the left column. It doesn't change the background color of the actual menu.

#p-navigation .pBody { background-color: #e6ffb4; } - changes the background color of the Navigation menu on the left without affecting the background color of the title of the menu.

#p-search { background-color: #e6ffb4; } - sets the background color of the title of the Search block in the left column.

#p-search .pBody { background-color: #e6ffb4; } - sets the background color of the Search block on the left without affecting its title.

#p-tb { background-color: #e6ffb4; } - changes the background color of the title of the Tools menu on the left.

#p-tb .pBody { background-color: #e6ffb4; } - sets the background color of the Tools menu in the left column without affecting the background color of the title of the menu.

#footer { background-color: #e6ffb4!important; } - changes the background color of the footer area with the meta links (e.g. Privacy policy), the information with the last modification and the icon "Powered by MediaWiki". The area is as wide as the screen and it's marked at the top and bottom with lines. The rest of the space below the page content is not affected by the #footer ID. Note that in the code you should also include the part !mportant after the color.

body { background-color: #e6ffb4; } - generally, the body is the whole visible area of the site, but in practice when it comes to the background color of the MonoBook skin in particular it affects the background color of the space at the bottom of the screen, below the page content. The strip with the footer links is not affected. It also changes the background color of part of the left column, from the bottom area up to the middle of the Navigation menu.

#globalWrapper { background-color: #e6ffb4; } - sets the background color of the top area above the page title, the left column with the menus and the space below the content of the page, down to the footer links (the area below the footer links is not affected). Note that in the left column it changes only the background color of the titles of the menus, not the actual menus themselves.

#column-content { background-color: #e6ffb4; } - changes the background color of the top area of the screen, above the page title, as well as part of the left column (down to the Tools menu, or in other words it goes down to the same level as the bottom of the page container).

#column-one { background-color: #e6ffb4; } - sets the background color of the top space of the screen, above the page title. It also changes the color of the left column without affecting the background color of the menus there (just of their titles), and also covers the bottom area down to the footer links. The background color of the area below the footer links is not changed.

/* TEXT COLORS */

#content { color: white }