Forum:Help for two issues

Forums: Index → Community help

Hi.

I have two issues, the menus are now in some kind of blue and I can't see them very well. Why are they not as white as before? How to correct this? Please see the first and second print-screens.

The second issue occurs in the 'special pages', where appear a little strange white 'bar' behind the main image in the left and across all the page. Why this happening? Please see the third print-screen. Can someone help, please?

I hope there's solutions for these 2 problems.

Link for my wiki: s:w:aequilibrium

Many thanks and hugs, Nuno —The preceding unsigned comment was added by NunoEddie (talk • contribs) 12:54, 10 September 2023‎ (UTC). Please sign your posts with --~~~~!

Those appear to be things you can adjust with CSS. --Saftzie (talk) 21:54, 10 September 2023 (UTC)

@Saftzie: Can you specify and tell how to correct? I really don't understand that kind of things what to do. Thanks. Nuno —The preceding unsigned comment was added by NunoEddie (talk • contribs) 22:02, 10 September 2023‎ (UTC). Please sign your posts with --~~~~!

Specifically? No. I haven't looked at your wiki, but I do notice that you've edited enough CSS to change the background. --Saftzie (talk) 21:42, 11 September 2023 (UTC)

@Saftzie: Well, I had help previously. If you can help me with these 2 problems, I really appreciate it. It's possible? Thanks, Nuno —The preceding unsigned comment was added by NunoEddie (talk • contribs) 15:56, 12 September 2023‎ (UTC). Please sign your posts with --~~~~!

If you're going to make CSS changes to your wiki, now might be a good opportunity to learn CSS. --Saftzie (talk) 20:07, 12 September 2023 (UTC)

@Saftzie: And where can I learn? It's one little thin, change the color of the menus on the left and the text (not links) on the below of the page. What's the codes for that? I would like them white color. And what about the white bar? What's the code to remove or correct it? For now, the code is this:

body { background: #000000 url("http://images.shoutwiki.com/aequilibrium/f/f1/Aequilibrium-new-wallpaperx.png") no-repeat fixed; webkit-background-size: cover; moz-background-size: cover; o-background-size: cover; background-size: cover; } div#head { background: none } div#banner { background: none } div#body { background: none } div#foot { background: none } div.toc#toc { background-color: rgba(255,255,255,0.5); border: 1px solid #F3E3C3; } div#mw-head { background: #000000 url("http://images.shoutwiki.com/aequilibrium/f/f1/Aequilibrium-new-wallpaperx.png") no-repeat fixed; webkit-background-size: cover; moz-background-size: cover; o-background-size: cover; background-size: cover; } div#content { background-color: rgba(255,255,255,0.75); } /* Thumbnails */ div.thumbinner { background-color: #000000; border: 1px solid #000000 !important; color: #fff; } img.thumbimage { background-color: #000000; border: 1px solid #000000; } div.toc#toc { -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } div#catlinks { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #F3E3C3; } div.mw-search-profile-tabs { background-color: rgba(255,255,255,0.25); color: #ebebeb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } div#mw-panel div.portal div.body ul li a { color: #FFFFFF; } div#mw-panel div.portal div.body ul li a:visited { color: #FFFFFF; } div#mw-panel div.portal div.body ul li a:new { color: #FFFFFF; } a:link { color: #008B8B; } a:visited { color: #008B8B; } a:link.new { color: #DC143C; }

Something wrong with it? Please help and thanks. —The preceding unsigned comment was added by NunoEddie (talk • contribs) 20:57, 12 September 2023‎ (UTC). Please sign your posts with --~~~~!

Mozilla and W3Schools are two popular tutorials. --Saftzie (talk) 20:31, 13 September 2023 (UTC)

Well, I tried to see in the link section to change the color of the menu on the left and didn't work. Don't think these pages have what I want. And about the white strange bar, no idea what hell is that... Or is a bug with the shoutwiki or something wrong in my CSS code, but once I don't understand, I figures that will remain like that. Maybe someone one day answer directly for what I asked. Thanks anyway, but it didn't help me. —The preceding unsigned comment was added by NunoEddie (talk • contribs) 20:56, 13 September 2023‎ (UTC). Please sign your posts with --~~~~!

Your white bar is on #mw-page-base, seems to double show, no idea why. The image server move touched literally nothing in the MediaWiki files. We restarted Varnish but that's about it, I guess it was incorrectly cached? --Lewis Cawte (talk) 22:51, 17 September 2023 (UTC)

Seems like we have a bit of a "clash of cultures" here. MediaWiki is incredibly easy to use for a technically minded person...but you shouldn't need to be one to run a wiki, and that's what ShoutWiki's at least tried to address for ages. Of course it goes without saying that we've succeeded better in some things than in others. Customizing the wiki "look and feel" is one such aspect: it's important for a lot of sites for obvious reasons but MediaWiki doesn't make it easy and we haven't been able to build anything awesome (yet) to address this pain point either.

Saying "just learn CSS" is technically speaking correct and, depending on the person, might come in very handy; but not everyone wants to or should need to learn CSS (and other related technologies). But at the same time, with collaborative efforts like most wikis, there's the risk that your CSS guru might one day just go AWOL: big sites like the English Wikipedia wouldn't be impacted by one or several gurus going absent for they have enough people to make up for it, but smaller sites would likely suffer if their one and only CSS and/or JS guru decides to leave the project for whatever reason(s).

Now, as for the issues at hand...

First, let me start off with some related upstream-related matters which are of relevance even if they don't seem like it at first. The Wikimedia Foundation (WMF), which is the non-profit organization behind Wikipedia and thus the major driving force of the MediaWiki software, started a project dubbed "Desktop Improvements", which focused and focuses on the Vector skin, as it's the default MediaWiki skin and also the default skin on WMF wikis.
Long story made very short and skipping over a lot of details, the practical outcome for the average non-WMF MediaWiki user (like every ShoutWiki user wishing to use Vector) is that Vector should be considered at least somewhat unstable, given the rather radical code changes made to the skin in the course of the Desktop Improvements project.

If you wish to change the Vector skin's colors etc. and not have to learn CSS, there are two themes available for Vector which are maintained and should work nicely: dark and dark-grey. To choose either one of these, make sure you're using Vector, then go to Special:Preferences, select the skin tab and you should see the theme drop-down menu underneath the skin listing. Choose whichever you prefer and hit the save button. Of course it should be noted that both of these themes are rather, well, dark, so they won't work for everyone or for all wikis; but such a theme can be a better starting point than "plain" uncustomized Vector.

Even if you're not a programmer and/or otherwise familiar with CSS, this diff shows that Vector's changed quite a bit after the release of MediaWiki 1.34. For MediaWiki 1.35, various things changed, and for MediaWiki 1.39 (yet to be released on ShoutWiki), things changed again. This diff is quite small but trust me when I say it took more than a few minutes to track down all the changes and figure out how to fix our code to play nice with these new changes. :)

Now, for the CSS questions presented here...

1. The sidebar links indeed do seem like an eyesore currently. There's this CSS rule which sets their color: .portal .body li a, .vector-menu-portal .body li a { color: #0645ad; } — #0645ad is some shade of dark-ish blue. Doesn't play nice with your background image really. Try this instead: .portal .body li a, .vector-menu-portal .body li a { color: #fff; } — #fff (sometimes also written as #FFF or even #FFFFFF) is pure white. You may also wish to look up CSS hex codes and pick a different color. :)
   Note that the section titles in the sidebar ("Ferramentas" etc.) use a different selector and color. The selector appears to be .portal h3, .vector-menu-portal h3 and the current color is #54595d, a dark grey shade. If you wish to make them white as well: .portal h3, .vector-menu-portal h3 { color: #fff; } (or you could even combine the selector with the other selector for marginally better performance).
2. Likewise, the footer area doesn't look very nice currently either. To make everything—both the text and the links—white: #footer a, #footer li { color: #fff; } — a is the HTML link element, li meanwhile stands for List Item, and the footer area texts are actually "list items" (but as you can see, "list item (text) color" and "link color" are separate, and you may indeed wish to use a different link color to clearly differentiate the links from the rest of the text).
3. That white gap can be made to go away with #mw-page-base { background-color: transparent; } (if that doesn't work for some reason, try div#mw-page-base { background-color: transparent; } or even div#mw-page-base { background-color: transparent !important; } — note that the CSS !important keyword is somewhat of a last resort usually best avoided but sometimes using it is unavoidable and there aren't really any better solutions)

I hope this helps! Please let us know if you have any further questions. :)

P.S. Generally speaking a lot of CSS styles are skin-specific, so you may consider moving the rules from s:w:aequilibrium:MediaWiki:Common.css to s:w:aequilibrium:MediaWiki:Vector.css to ensure they only apply to users using the Vector skin. Currently they apply to e.g. MonoBook or Nimbus users as well.

P.P.S. Although this is 100% unrelated to the CSS questions being discussed here, the JavaScript code in s:w:aequilibrium:MediaWiki:Common.js is rather old and doesn't work as intended — the addOnloadHook method no longer exists, so you may wish to change addOnloadHook(toggleInit); to $(toggleInit); to see if that fixes the JS (and makes the "Uncaught ReferenceError" popping up in the browser developer tools console go away). --Jack Phoenix _(Contact) 11:18, 23 September 2023 (UTC)