Customizing a wiki's appearance. | Miraheze | Page 1

elfin garnet Feb 13, 2024, 8:38 PM

#

I have recently created a wiki for a game that I am a contributor for, basing the structure off of the old one we originally used on FANDOM.
I would like to customize the appearance to resemble the original wiki as closely as possible. If I could have help figuring out all the ins and outs of customizing the appearance, that'd be great.
I am, however, completely new to Miraheze as a whole, so please explain everything to me as if I am an idiot. Thanks in advance!

chrome grove Feb 13, 2024, 8:42 PM

#

well, as I said in PTW server, first thing is that you need to settle on which skin you are going to use

#

skins is a type of extensions, which defines layout of the wiki, like default skin you get here is called Vector 2022

round oracle Feb 13, 2024, 8:43 PM

#

elfin garnet I have recently created a wiki for a game that I am a contributor for, basing th...

MediaWiki:<skin name>.css or Common.css to modify your wiki's CSS; the developer console will be helpful in designing your customizations, as it allows you to see which element IDs/classes need to be changed

#

For specific design help, a link to your wiki would be helpful

chrome grove Feb 13, 2024, 8:43 PM

#

the closest to Fandom skins are Cosmos (replication of Oasis, old skin) and Evelution (replication of FandomDesktop, current skin)

#

I already provided and example of Cosmos w/ basic settings, but I also can show more modified Cosmos on a wiki I manage (logo is changable, I just got lazy here)

elfin garnet Feb 13, 2024, 8:53 PM

#

round oracle MediaWiki:<skin name>.css or Common.css to modify your wiki's CSS; the developer...

Have no idea where either of these are at the moment, but good to know.
Here's the link to it: https://robloxcriticalstrike.miraheze.org/wiki/CRITICAL_STRIKE_Wiki

Roblox CRITICAL STRIKE

CRITICAL STRIKE Wiki

<mainpage-leftcolumn-start />

<mainpage-endcolumn />
<mainpage-rightcolumn-start />

<mainpage-endcolumn />

elfin garnet Feb 13, 2024, 8:54 PM

#

chrome grove I already provided and example of Cosmos w/ basic settings, but I also can show ...

I'll probably end up using Oasis then. Can't seem to find it, though.

chrome grove Feb 13, 2024, 8:54 PM

#

first you need to enable it

#

go to Manage this wiki's extensions admin menu

#

then Skins tab

#

you should choose Cosmos

round oracle Feb 13, 2024, 8:55 PM

#

elfin garnet Have no idea where either of these are at the moment, but good to know. Here's t...

Common.css is the page in which you can insert CSS that will affect every wiki; each skin also has their own CSS page in which you can put styles that only affect that skin

chrome grove Feb 13, 2024, 8:55 PM

#

(Oasis is original skin, but Cosmos is its open source port available for non-Fandom wikis to use)

elfin garnet Feb 13, 2024, 8:56 PM

#

chrome grove you should choose ***Cosmos***

👍

chrome grove Feb 13, 2024, 8:57 PM

#

save changes and then go back to wiki's additional settings -> styling

#

default skin dropdown now should have Cosmos

#

pick it and save changes

#

another small suggstion - in extensions admin menu, type in search bar MobileFrontend and turn it off

#

since Cosmos is mobile adaptive skin, mobile mode extension isn't needed

elfin garnet Feb 13, 2024, 8:59 PM

#

Got it.

#

Mainpage updated as well. 🎉

chrome grove Feb 13, 2024, 9:00 PM

#

now, next step is basic Cosmos settings

#

if you'll scroll down the Styling tab, you'll see settings related to things like logo, favicons, bg image, and then color settings especially for Cosmos

#

you should insert HEX color codes in their fields, like this

#

after saving changes you should see them working immediately

#

in you need to change something, just update color codes

#

to set up things like logo etc you should first upload images on wiki

#

after uploading an image its file page will open - you should click on full size link, under the image

#

a "raw" file link will open

#

you should copy its URL and insert in setting's field, like this

elfin garnet Feb 13, 2024, 9:10 PM

#

chrome grove you should copy its URL and insert in setting's field, like this

Image and colors worked, can't seem to get opacity to work though.

#

Assuming the field I changed even meant what I had thought it did.

chrome grove Feb 13, 2024, 9:10 PM

#

Cosmos Content Opacity Level ($wgCosmosContentOpacityLevel) ?

elfin garnet Feb 13, 2024, 9:11 PM

#

✅

#

Attempting to achieve something similar to this effect.

round oracle Feb 13, 2024, 9:12 PM

#

IMO the header color should be a darker red instead of the default light gray

elfin garnet Feb 13, 2024, 9:13 PM

#

👍

#

Just trying to get the opacity to work for the time being.

round oracle Feb 13, 2024, 9:14 PM

#

On second thought, the header color should be the current color of the page body and the page body should be a somewhat lighter red

#

Good, but I think #8e2f2f would be a better color for the article body

chrome grove Feb 13, 2024, 9:35 PM

#

I'm heading out for the night

#

if you want to modify beyond styling settings, then comes CSS

#

CSS is a code which defines look of elements

#

there's no ready list of elements and how to change them, so you gotta poke around web pages's code w/ your browser's element inspector tool, and changing CSS values

#

those changes then should be added on MediaWiki:Common.css (works no matter which skin user chooses, good for general elements like gallery or infoboxes) and MediaWiki:Cosmos.css (work only on Cosmos)

#

there are plenty free tutorials on HTML and CSS

#

if you still have questions other available volunteers can help

feral schooner Feb 13, 2024, 11:34 PM

#

https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Color

Cascading Style Sheets/Color

Colors can be specified for various objects. These include text ("color: white"), background ("background-color: white"), and borders ("border-color: gray").
An example CSS rule that sets all h1 elements to have white text on a red background:

Methods of specification of colors, an overview:

English name, such as color: white
The CSS color nam...

#

https://en.wikibooks.org/wiki/Cascading_Style_Sheets/Fonts_and_Text

Cascading Style Sheets/Fonts and Text

#

https://developer.mozilla.org/en-US/docs/Web/CSS/display

MDN Web Docs

display - CSS: Cascading Style Sheets | MDN

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

#

Here are a few documentations from which you can get ideas and help for what you want to achieve 😉

agile tinsel Feb 14, 2024, 12:58 AM

#

chrome grove I already provided and example of Cosmos w/ basic settings, but I also can show ...

how'd you change these?

#

and can you add stuff to the administration dropdown?

#

#

this is like exactly what i need too

#

im not OP but it looks like its invalid on their wiki too

chrome grove Feb 14, 2024, 3:47 AM

#

agile tinsel how'd you change these?

please don't post in other people's support threads if you question is a tad different
it must be in MediaWiki:Cosmos-navigation
admin links is an extension

agile tinsel Feb 14, 2024, 3:55 AM

#

chrome grove please don't post in other people's support threads if you question is a tad dif...

i'll make a thread then, still got questions for it

feral schooner Feb 14, 2024, 11:22 AM

#

chrome grove please don't post in other people's support threads if you question is a tad dif...

Sorry,hadn't noticed.

#

I'll delete mine

elfin garnet Feb 18, 2024, 3:27 AM

#

Okay, so after avoiding the wiki in general for a bit, I tried again with opacity and it turns out opacity just doesn't work on Cosmos for some reason, at least from what I can tell.
The other two editors also said cosmos just sucks to use, so we're trying vector-2022. Can I CSS to change the background color, or is it just permanently white?

round oracle Feb 18, 2024, 3:39 AM

#

elfin garnet Okay, so after avoiding the wiki in general for a bit, I tried again with opacit...

The class to modify is .mw-page-container IIRC

frail bluff Feb 18, 2024, 4:34 AM

#

you can change the background with css, yes

violet otter Feb 21, 2024, 1:03 PM

#

Also, keep in mind that despite Cosmos having basic style settings it can be styled with CSS in addition, like any other skin. So you could achieve transparency that way

I recommend using the browser inspector to find the right elements to style and even try out styling in real time. Looking up "browser inspector css" or similar should give you a bunch of tutorials pupCoffeeMH

elfin garnet Feb 23, 2024, 9:38 PM

#

Hello, back again. What is the legality(?) of using another wiki's common.css as a reference and reverse-engineering it?

chrome grove Feb 23, 2024, 9:40 PM

#

it's a common practice, but if there's something unique (like layout change on Inkepedia I use on my wikis) you better credit the wiki in a commentary code (/* ... */)

feral schooner Feb 23, 2024, 9:47 PM

#

elfin garnet Hello, back again. What is the legality(?) of using another wiki's common.css as...

Another option is to copy the permanent link to that version of the page, and put that in the summary field before submitting the changes. That way you give credit and they can see which version you used.

elfin garnet Feb 27, 2024, 9:24 PM

#

My wiki does not have a :root for me to change the colors with. How does one add this?
These two images are in the exact same elements in the MediaWiki:Common.css pages of the respective wikis. (Mine on the left, PTW on the right)

chrome grove Feb 27, 2024, 9:26 PM

#

root is a thing for CSS variables

#

it's because PTW has several themes so variables are used for easier change

#

in most cases, wikis don't need it

elfin garnet Feb 27, 2024, 9:48 PM

#

Okay, we're finally getting somewhere.
How do I make this background image follow the position like on Fandom? And how do I make the background itself just be opaque instead of full transparent?