MediaWiki talk:Vector.css

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
gear icon
 MediaWiki:Vector.css:

This page contains “CSS” code, which controls how the default MEpedia interface displays to users. This includes the placement, color, size, and font of buttons, links, windows, and text. The CSS code that controls the MEpedia interface is stored in three locations:

  1. The ‘skin’ contains most of the CSS code, and this basic ‘skin’ code can not be changed. However, an MEpedia user can select from a list of different skins in their user preferences. For example, a user can select either the “Pivot” skin or the “Vector” skin.
  2. The MediaWiki:Common.css page contains MEpedia-specific changes to the CSS code that will apply to ALL skins available at MEpedia.
  3. Each skin has a page that contains MEpedia-specific changes to the CSS code that will apply to ONLY that skin. For example, MediaWiki:Pivot.css.
  4. When updating check the new code using the w3c css validator, vendor extension and "same color" errors can be ignored.
  5. Anonymous users now use MediaWiki:Vector-2022.css in addition to this page, :not(skin-vector) excludes code from running on the new vector.
    This page forms part of the MEpedia interface, and can only be edited by administrators or interface administrators. To request a change to the page, add your request to the discussion page, tag several administrators or interface administrators, and add a description of your request. If this is a system message or skin it may be documented on MediaWiki.org or translatewiki.net. Gadgets may be documented in MediaWiki, Wikipedia's gadget list or Wikipedia's User scripts list.


Change the code[edit source | reply | new]

Please overwrite all the code with what is below (except the 'pre' tags). This will change the logo to the proper path on mobiles and hopefully sort out the logo overlap with the search bar on screens 320px wide. User:Kmdenmark notjusttired (talk) 20:37, June 24, 2019 (EDT) 


/* CSS placed here will affect users of the Vector skin */

#p-navigation{  
position: absolute;
 top: 75px;
}

#p-tb{
position: absolute;
 top: 175px;
}

/*Hide error messages when citation in Visual editor*/

.citation-comment{
  display:none;
}

/* Responsive vector for mobiles, also see responsive.less - should it be 850px? */
@media (max-width: 768px) {

.mw-wiki-logo {
display: block!important;
left: 0!important;
top: 0!important;
position: relative !important;
background-size: contain!important;
background-image: url("https://www.me-pedia.org/resources/assets/mepedia_logo_mobile.png");
background-size: contain!important;
 width: 55px!important;
 margin: none;
overflow: visible;
 }
#p-logo {
display: block!important; 
position: absolute!important; 
left: 5px!important; 
top: -85px!important;
width: auto;
height: auto;
background-size: contain!important;
 }
div#simpleSearch {
max-width: 60%!important;
margin-left:0!important;
left: 60px!important;
right: 40px!important;
}
 }
}

Completed requests[edit source | reply | new]

Request to add this code to the end of Vector.css - without the pre tags

This will put the MEAction logo in the top left on mobiles

(using vector's responsive section) - so that people can click the logo to return to the main page. The MEpedia didn't fit, but a smaller one can be used later. User:JaimeS User:Kmdenmark notjusttired (talk) 19:16, May 31, 2019 (EDT)

Updated with new mini logo notjusttired (talk) 14:35, June 1, 2019 (EDT) 

/* Responsive vector for mobiles, also see responsive.less - should it be 850px? */
@media (max-width: 768px) {

.mw-wiki-logo {
display: block!important;
left: 0!important;
top: 0!important;
position: relative !important;
background-size: contain!important;
background-image: url("/images/a/a9/MEpedia_logo_mini.png");
background-size: contain!important;
 width: 55px!important;
 margin: none;
overflow: visible;
 }
#p-logo {
display: block!important; 
position: absolute!important; 
left: 5px!important; 
top: -85px!important;
width: auto;
height: auto;
background-size: contain!important;
 }
div#simpleSearch {
max-width: 60%;
margin-left: 5em!important;
margin-right: 5em!important;
text-align: center;
 }
}
User:Notjusttired Done! Kmdenmark (talk) 16:54, June 3, 2019 (EDT)
It looks great! We had a development change made to make everything larger on a mobile, but it hid the MEpedia logo - which meant there was nothing easy to click on to get back to the main page. This code puts a mini MEpedia back at the top left. Thanks for doing this and the other requests too. It's good to see you back! User:Kmdenmark notjusttired (talk) 17:50, June 3, 2019 (EDT)
Thank you! Been recovering from a couple doctor appointments. I think I'm back in full action. :) User:Notjusttired Kmdenmark (talk) 17:57, June 3, 2019 (EDT)
Full action??!!! Great! notjusttired (talk) 18:02, June 3, 2019 (EDT)
(hide)
(read more)

Re: Completed requests -- Kmdenmark (talk) 21:31, June 24, 2019 (EDT)[edit source | reply | new]

Done! Kmdenmark (talk) 21:31, June 24, 2019 (EDT)
Retrieved from "https://me-pedia.org/w/index.php?title=MediaWiki_talk:Vector.css&oldid=241131"