This page lists snippets of code you can add to your personal css to add some useful functions to the wiki you might like! Personal CSS shows effect only to you, which allows personalizing various things.
If you want to add a snippet, simply copy it to your css and tweak if needed! The changes should appear instantly or almost instantly. You can add more code if you want, for example making all redirects bold with font-weight: bold;. The snippets contain the most useful code though.
Show Edit Sections[edit source]
/* show edit sections */
.mw-editsection {
display: inline;
opacity: 100%
}
[ edit source ] links next to headings will appear. You can tweak the opacity value to make the edit sections less noticeable for yourself.
Show the Toolbar[edit source]
/* show toolbar */
#cosmos-toolbar{
display: block;
max-width: 50%;
float: right;
}
Shows a toolbar on the bottom right of the screen. max-width specifies how wide the toolbar can be. float can be "left" or "right", and it tells the toolbar on which side to appear.
Highlight Redirects[edit source]
/* redirect highlighter */
a.mw-redirect {
opacity: 1;
color: #008963 !important;
}
This will make all redirect links this color instead of this one. opacity (range 0-1) and color tweakabe to your needs.
Show Edit Button on Mobile[edit source]
@media only screen and (max-width: 850px) {
#cosmos-articleHeader-actions {
display: flex;
}
}
The edit button ("EDIT SOURCE"), action dropdown and the "DOCUMENTATION" button are hidden on mobile by default. Use this snippet to show it for yourself if you enjoy editing on mobile!
Use this instead if you want for it to be more compact and semitransparent (it will overlap with titles though)
@media only screen and (max-width: 850px) {
#cosmos-articleHeader-actions {
display: flex;
position: absolute;
right: 0px;
opacity: 0.6;
}
span.cosmos-button-text {
font-size: x-small;
}
div#cosmos-actionsList-button {
padding: 5px;
}
div#ca-edit {
padding: 5px;
}
}
Show Translation Links on Mobile[edit source]
/* show translate links on mobile */
.mw-pt-translate-header {
display: block;
}
Translation links (for example, "Translate this page") that show for translators and translation managers are hidden on mobile by default. If you prefer to see when on mobile, use this snippet.