Skin talk:Citizen

Hello! I've recently upgraded my wiki instance to 1.36.0; however, I feel like there are some places where the skin is a little funny (e.g. missing icons on the top bar, weird TOC display, overlapping edit buttons). I'm wondering if 1.36 had been fully supported?

I have the same issue. The great wiki editor is also no longer supported.

I haven't looked into 1.36 yet but I'll look into it hopefully next week. Would you mind to provide details on the bugs that you listed?

I've collected some bugs I noticed here. Also, it seems like VE is not working; I'm not sure if it's because I haven't updated my extensions yet.

Edit: VE started working after I updated it, but not WikiEditor.

Is your WikiEditor OK? Or do you have the same mistake?

I think WikiEditor is not working for me as well.

Do you have a live wiki that showcases the issue? I am unable to reproduce it in a local environement.

The edit button overlap is on purpose when both visual and source edit are visible. What browser and OS are you using?

Can I set that just an edit button is visible and that opens the VE? From there you could switch to the WikiEditor?

Yes it can be done in your user preferences or you can enable single tab edit button wiki-wide through $wgVisualEditorUseSingleEditTab

Great, thank you.

Chrome on Windows; Chrome, Safari, Firefox and Opera on Mac. None works.

All the ToC-related bugs are now fixed, I am unable to reproduce the menu button bug but see if the latest version fixes it for you.

Thank you very, very much. I installed it and set the following two variables, now the WikiEditor also works :)

$wgVisualEditorEnableWikitext = true;
$wgDefaultUserOptions['visualeditor-newwikitext'] = 1;

Wow, great if you could solve that. In addition to the Leranjun, I noticed two things.

1. With the footer it no longer takes over the text.
2. And the WikiEditor is just the standard - I don't know exactly how it was in 1.35 - but on the website Star Citizen Wiki the WikiEditor is much better.

1. That's very weird, I have to double check if I'm able to reproduce it.

2. Star Citizen Wiki is using Extension:VisualEditor, it could be that it is not enabled on your wiki.

I saw that the footer bug is not theme-specific ... I also have the problem with the intercafe with timeless.

Do you know how I could fix the interface? It's not only in the footer, (almost) everywhere.

Are you able to reproduce the same bug with Vector? If it affects Vector as well then it could be a configuration issue or something else.

Edit: You might also need to edit the according page in your wiki language (e.g. MediaWiki:Citizen-footer-tagline/de for German)

I don't know why, but it works now. Thank you very much.

It is really strange. I have activated VisualEditor. Everything looks good there, except for the blue button.

I noticed something else. For an article, it does not show a "last edited" section between the content and the footer. Do I have to activate this somehow or is this a bug?

Do you have a link to the page? It might be a bug.

Here is my wiki, thanks for looking at it.

https://dev.articles.biblewiki.one/view/BibleWiki:Mitmachen

Oh I see. It is a bug that fixed in a few versions ago, an update should fix it.

There will be some upcoming changes to simplify surface colors by replacing `background-color-dp-XX` with `color-surface-X`. Currently both are available but `background-color-dp-XX` will be taken out in a later version. You might want to convert those colors in the future. I am putting up a little wiki guide on how to adapt the skin but it looks like you got most already :D

Nice wiki btw!

Thank you for the reply and the compliment 😅 I have made the update and adjusted the CSS variables. Thank you. That's how I like to work.

not a known issue

Hi, I have this skin installed on a Miraheze wiki and using the Page Forms extension. I am having and issue with certain form elements not functioning (for example input types “combo box” and “tokens”) and thought it might be skin related. I just wanted to see if that rings any bells as a known issue or not before going much further. Thanks!

I'm not sure if it is skin-related. Do you have a live example that I can take a look at?

I have the same suspicion as GrapheneBob. Have you found a solution?

Sorry, it wasn't a bug. Now it works for me, I had syntax errors.

With auto, it's very hard to author for. Even if I create light and dark versions of background images (for example), when it's set to auto, I'm not able to set the correct one. Resulting in broken designs (and my only option being to disable these nice additions in auto all-together)

Are you looking for $wgCitizenThemeDefault? This can be set to either dark or light

Hello and thanks for this great skin!

I would like to know what the proper way is to customize the arrangement of the different buttons in the toolbar of a page. I use the last version of the skin. For instance, the discussion button is in the the "More" menu (three dots), in a category "Namespaces". I would like to move this button to the top line which is always visible like "History". I also would like to remove the "Namespaces" line.

Thanks! There is no proper way to customize this menu sadly but I'll be looking into ways to make the Discussion button out of the more menu in the future. For namespace line you can probably hide it with CSS.

Thanks for your answer! I think that the "Watch" button should also be moveable to the top line

First of all I love this skin, it's great for me. However, on my website there are darker icons on my site and on dark theme it is very hard to see them. I have lighter versions of the icons, so I was wondering if there's a way to use those icons instead when dark theme is enabled.

You can create specific CSS rules in MediaWiki:Citizen.css

For the dark theme use html.skin-citizen-dark The selector for light mode html.skin-citizen-light

A "hacky" version would be to do something like

.skin-citizen-dark .icon-class {
filter: invert(1) hue-rotate(180deg);
}

This would invert the color from light to dark or vice versa

^ the hacky version is basically what is used for icons in the skin currently. Most of the time it works well enough.

You can also use the background-image rule to override the default icons if you wanted to

The problem has been resolved.

When added a comment from the Extension: Extension:PageDisqus Position Very Wide, Is there a solution?

Do you have a screenshot or a demo of the issue? I don't have experience with the extension so I can't say I understand the issue.

This is example infitaah.id/wiki when added Extension:Pagedisqus.

Add this to the MediaWiki:Citizen.css page on your wiki, it should fix it.

#mw-data-after-content > h2,
#disqus_thread {
    max-width: var( --width-layout );
    margin: 0 auto;
    padding: 0 20px;
}

Thank you for the help... :)

Style is not used by Citizen, but solution is provided.

Hey all! I remember the old version used to have an envelope icon beside mailto links; however, now it just shows up as a regular external link.

Is this feature removed? If so, is there a way to still keep it?

That is possibly a part of the MW core styles, I will look into adding it back.

It looks like it is taken out from core.

However, you can implement that through your MediaWiki:Common.css:

/* Add the external link icon to malito links */
.mw-parser-output a[href^="mailto:"].external {
	background: url( your icon link ) no-repeat right;
	/* @noflip */
	padding-right: 18px;
}

Hmm, it still seems to be in the source, but I'm not sure why it's not working.

Will try the solution given. Thanks a lot!

Citizen does not use core styles at all, it seems that the latest Vector has also moved away from that as well.

I see. Thanks a lot for the clarification!

Patch merged into master

It seems like the Citizen skin enables raw HTML embedding, and "$wgRawHtml = false;" does nothing to disable it, which seems unsafe. Am I missing something during setup to make this more secure?

That does indeed happen when collapsible sections are created. In the meantime you can disable those by setting $wgCitizenEnableCollapsibleSections to false.

Patch at https://github.com/StarCitizenTools/mediawiki-skins-Citizen/pull/333

Merged into master, should be fixed now.

Hi! Wonderful skin! Thank you very much for developing and making it available. I have been really glad since I've found it. .

I would like help changing a few things in order to use the skin for my personal wiki. I am a total novice to css, less, json etc. I thought could I could understand my way through the files in the skin folder but I could not.

The following items are what I would like to achieve.

1. Make the dark mode always enabled (I've read it is not possible to toggle it).
2. Make the logout button in the side panel with the same color as the rest of the menu (the red distracts me a bit when I open the panel).
3. Change the values of the colors of dark mode to be closer to the ones I already use on my editor.
4. Change the style of headings and text (font, size, color etc.).

Are there trivial ways to make such changes? If not, could you give me some guidance as to what should I do. Thank you again very much for creating this skin and thank you in advance for the help. (Sorry if my wording is confuse at any point. Brazilian here.)

We made a lot of progress recently on making the skin more customizable, and to answer your question:

1. You can now set the default theme of the skin in LocalSettings.php, users are able edit their default option in Special:Preferences, and there is also a toggle button in the header

2. Add the following line onto your MediaWiki:Citizen.css page

#p-personal #pt-logout a {
  background-color: transparent;
}

3. You should be able to change the dark mode color scheme by only the :root selector with CSS. Just define the color that you want to override in MediaWiki:Citizen.css

4. You can manually define the individual styles with CSS in MediaWiki:Citizen.css, but with that you need to find the exact style to override.

I would say that you need some knowledge on CSS to make changes like this. It is a pretty easy language to learn and I am sure you will get the hang of it soon :)

Maybe you can tell me what exactly I have to do to get rid of that white (or dark) gradient at the top?

I really don't like it, especially on top of images it just doesn't look good at all. I would maybe make it solid and transparent. But the gradient is a no-go :D

Thanks in advance for any help!

The header selector would be .mw-header:before. You can change it to a solid color or transparent by using the background rule.

Discussion is moved to the hover menu on the top.

Hey all, I just realised that the "Discussion" button on the bottom right of the screen is blocking the rightmost category of the category list under a page.

Screenshot

On the latest version it should be moved into the more (three dot) menu on the page instead.

Ah, I see. I've updated the skin and now it has the menu. However, when I hover over it, the menu always seems to disappear before I can click the menu items... Maybe show the menu on active as well as on hover?

Also I think the plainlinks class is broken :(

Thanks for letting me know! The hover menu is a bug and the plainlinks class weren't in the skin before. I fixed both of them in the latest version now, please let me know if you run into any issues.