Skin talk:Citizen/2024

not working properly on 1.39.6

is there a release version of this skin that works well on 1.39.6, with it's bundled extensions?

i ask because the WikiEditor extension breaks this skin, when editing a page..or this skin breaks the WikiEditor; the toolbar ui of WikiEditor expands in height, down until the wiki's footer, hiding the textarea. i believe because of the style "display grid", set on "citizen body" (or somewhere close to that). if i remove that type of display (grid), the textarea is visible.

also, in mobile phone, the menu and setting icons is out of view. could PHP warning messages at the top of a wiki break the calculation for the floating bar that contains the menu (settings, login, etc) on the botom)? Jakeriper1 (talk) 02:35, 7 January 2024 (UTC)

i figured out what's breaking this skin; it's any php errors that appear at the top of the page.

https://i.imgur.com/d4YBRCK.jpeg

hiding these errors, by not outputting their return, works

https://i.imgur.com/7upAFgg.jpeg Jakeriper1 (talk) 16:17, 7 January 2024 (UTC)

Icons for editing / visual editing (1.41.0)

When using the delivered Visual Editor extension together with Citizen, any paragraph shows the known pencil icon (for editing in wikitext). Left from it, a lettering 'edit' is displayed and leads to the visual editor.

It would be much preferable, if next to the pencil, there would be the 'eye' icon from Visual Editor shown next to the pencil instead of the letters. In german language for example, 'edit' is translated to 'bearbeiten', which is a long word and clutters the optics quite a bit and does not really fit to your clear and uncluttered skin.

Possible? TIA!

ATM, the source code looks like this:

<h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/index.php?title=MyArticle&amp;veaction=edit&amp;section=3" class="Array mw-editsection-visualeditor" title="Edit section: MySection">edit</a><span class="mw-editsection-divider"> | </span><a href="/index.php?title=MyArticle&amp;action=edit&amp;section=3" class="citizen-editsection-icon mw-ui-icon-wikimedia-edit" title="Edit section's source code: MySection">edit source</a><span class="mw-editsection-bracket">]</span></span> Tchibob (talk) 07:21, 19 January 2024 (UTC)

I think I solved this myself. Add this to MediaWiki:Citizen.css:

.mw-editsection-visualeditor { width: 1.875rem; height: 1.875rem; text-indent: -9999px; opacity: var(--opacity-icon-base); transition: var(--transition-hover); transition-property: opacity; background-image: url(data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="grey"%3E%3Ctitle%3E eye %3C/title%3E%3Cpath d="M10 14.5a4.5 4.5 0 1 1 4.5-4.5 4.5 4.5 0 0 1-4.5 4.5zM10 3C3 3 0 10 0 10s3 7 10 7 10-7 10-7-3-7-10-7z"/%3E%3Ccircle cx="10" fill="grey" cy="10" r="2.5"/%3E%3C/svg%3E); background-repeat: no-repeat; background-position: center; display: block; background-size: 1.125rem; } Tchibob (talk) 11:29, 22 January 2024 (UTC)

Login and signup pages look wrong in dark mode

My login and signup pages have white input boxes instead of the dark ones when I am in dark mode. It also seems like the buttons and input boxes don't match the Citizen UI elements.

For reference, here is the Star Citizen's login and signup page:

https://i.imgur.com/LzhHAdw.png

https://i.imgur.com/GCDipDc.png

And this is what my wiki's login and signup page looks like:

https://i.imgur.com/ISlP4ZS.png

https://i.imgur.com/Zy1iSmR.png

How do I fix this? Using Mediawiki 1.41.0 with Citizen 2.9.0. User581594 (talk) 19:03, 21 January 2024 (UTC)

It should be fixed in the main branch now Alistair3149 (talk) 06:28, 18 May 2024 (UTC)

Search.mustache

In the toggle menu of the Citizen skin version 2.4.3, there is a search field to search for article pages. However, only pages that are typed correctly from the beginning appear as suggestions. I would like it to display all pages that have at least one word entered in the search field. Is it possible to implement this in a simple way? 189.61.116.159 (talk) 03:32, 31 January 2024 (UTC)

Citizen does not provide the suggestions, it is from MediaWiki core which is quite barebone. To have improved search suggestions, you would need Extension:CirrusSearch. Alistair3149 (talk) 20:54, 1 February 2024 (UTC)

Conditional Google AdSense in skin.mustache

Hello, is it possible to disable the Google ads on skin.mustache based on the page title/URL? Thanks! HausaDictionary (talk) 22:44, 11 February 2024 (UTC)

Citizen does not insert the HTML or script needed for ads.

So it depends on what modification you have to insert them. Alistair3149 (talk) 08:01, 13 February 2024 (UTC)

Repeatedly unfocusing search bar

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

While using the search bar on my wiki the search unfocuses and flashes blank after every keypress making it unusable. Does anyone know what the issue might be? Thanks

I'm using MW 1.41.0 and Citizen 2.9.1 Leapofod (talk) 01:50, 20 February 2024 (UTC)

Did you happen to use Safari? There was a bug with Safari and it should be patched now, both in the skin and the browser. Alistair3149 (talk) 06:29, 18 May 2024 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Left navigation bar bugs out when receiving a talk page notification

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

I think this image demonstrates it pretty clearly:

Hedeyohu22 (talk) 11:37, 2 March 2024 (UTC)

Patched in the latest main branch. Alistair3149 (talk) 20:02, 2 March 2024 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Text fragment on the sidebar after skin installation

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

A piece of text in the sidebar broke the layout

Attached screenshot. A piece of unknown text next to the search icon broke the sidebar layout after I installed the skin. If I remove the text via DevTools, everything gets better. How can I fix this problem? Sergtsar (talk) 05:16, 15 May 2024 (UTC)

What is the exact text? Alistair3149 (talk) 05:32, 15 May 2024 (UTC)

Here it is

on" Content-Type: application/octe Sergtsar (talk) 05:34, 15 May 2024 (UTC)

Do you have a live demo or the HTML of that part? The text provided is incomplete. Alistair3149 (talk) 07:27, 15 May 2024 (UTC)

Here's the part of HTML code, I hope I got it to paste correctly

<div class="citizen-search citizen-header__item citizen-menu-checkbox-container">
	<input type="checkbox" id="citizen-search__checkbox" class="citizen-menu-checkbox-checkbox" role="button" aria-labelledby="citizen-search__buttonCheckbox" aria-haspopup="true">
	on"
	Content-Type: application/octe
	<div class="citizen-search__button citizen-header__button">
		<div class="citizen-search__buttonIcon citizen-header__buttonIcon">
			<div></div>
			<div></div>
			<div></div>
		</div>

Here's a link to a site where you can see the problem:

vremelyst.ru

UPD: Sorry, forgot to make Citizen a default skin

UPD 2: I figured out how to insert the code, now it looks good Sergtsar (talk) 07:49, 15 May 2024 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Translating my wiki text into another language

Hi, my wiki text is written in English, and I would like to have, in addition to the English language, one or two versions in Spanish and French.

Is this possible?

Thank you very much. VARGUX (talk) 07:18, 15 May 2024 (UTC)

wgHiddenPrefs[] = "skin" causes an error

in Special:Preferences

[7fc6880336eec79626218910] /wiki/Special:Preferences DomainException: HTMLForm::getField: no field named skin
Backtrace:
from /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLForm.php(458)
#0 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(153): HTMLForm->getField()
#1 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(168): HTMLFormField->getNearestField()
#2 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(284): HTMLFormField->getNearestFieldValue()
#3 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(272): HTMLFormField->checkStateRecurse()
#4 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(350): HTMLFormField->checkStateRecurse()
#5 /home/<username>/domains/<domain>/public_html/includes/htmlform/HTMLFormField.php(396): HTMLFormField->isHidden()
#6 /home/<username>/domains/<domain>/public_html/includes/preferences/DefaultPreferencesFactory.php(350): HTMLFormField->validate()
#7 /home/<username>/domains/<domain>/public_html/includes/preferences/DefaultPreferencesFactory.php(265): MediaWiki\Preferences\DefaultPreferencesFactory->loadPreferenceValues()
#8 /home/<username>/domains/<domain>/public_html/includes/preferences/DefaultPreferencesFactory.php(1895): MediaWiki\Preferences\DefaultPreferencesFactory->getFormDescriptor()
#9 /home/<username>/domains/<domain>/public_html/includes/specials/SpecialPreferences.php(147): MediaWiki\Preferences\DefaultPreferencesFactory->getForm()
#10 /home/<username>/domains/<domain>/public_html/includes/specials/SpecialPreferences.php(114): MediaWiki\Specials\SpecialPreferences->getFormObject()
#11 /home/<username>/domains/<domain>/public_html/includes/specialpage/SpecialPage.php(727): MediaWiki\Specials\SpecialPreferences->execute()
#12 /home/<username>/domains/<domain>/public_html/includes/specialpage/SpecialPageFactory.php(1621): MediaWiki\SpecialPage\SpecialPage->run()
#13 /home/<username>/domains/<domain>/public_html/includes/MediaWiki.php(357): MediaWiki\SpecialPage\SpecialPageFactory->executePath()
#14 /home/<username>/domains/<domain>/public_html/includes/MediaWiki.php(960): MediaWiki->performRequest()
#15 /home/<username>/domains/<domain>/public_html/includes/MediaWiki.php(613): MediaWiki->main()
#16 /home/<username>/domains/<domain>/public_html/index.php(50): MediaWiki->run()
#17 /home/<username>/domains/<domain>/public_html/index.php(46): wfIndexMain()
#18 {main}

鈴音雨 (talk) 12:20, 15 May 2024 (UTC)

That doesn't seem to be related to Citizen. You might want to ask the question at https://www.mediawiki.org/wiki/Project:Support_desk or the MediaWiki Discord Alistair3149 (talk) 21:46, 15 May 2024 (UTC)

You should move bubble notifications to the bottom left corner

You should move bubble notifications, such as the notification you got when you successfully saved your preferences, from the top right corner to the bottom left corner. In Vector skin, they put those at the top right corner because that's where their notification drawer and personal menu are at. Since you've moved the notification drawer and personal menu to the bottom left corner, moving bubble notifications to the bottom left corner makes more sense. LittlePaw365 (talk) 12:08, 17 May 2024 (UTC)

We kept the notifications on the top right corner for additional visibility. It can be difficult to see especially on mobile device, where users are often holding the device from the bottom. Alistair3149 (talk) 06:27, 18 May 2024 (UTC)

Unclickable wikitables

It might be worth noting that wikitables from the get go are unclickable. That is if there is a wikilink or an external link it is not clickable. This seem to be a feature as you can't click any table on the Star Citizen wiki.

This is only relevant for the class "wikitable", but since all tables are wikitables this is an issue. As far as I can see the only workaround is creating a different class.

I'm not sure whether this belongs here, but in case any other new user to this particular skin pops by to search for a remedy to this issue, I thought placing it here. Kim.kik (talk) 14:03, 14 June 2024 (UTC)

It was an oversight that was fixed recently: https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues/878 Alistair3149 (talk) 18:29, 15 June 2024 (UTC)

This is amazing :D my installation is short of 20 hours earlier than the bug fix. Kim.kik (talk) 10:48, 16 June 2024 (UTC)

Logo Size

Hello,

I have uploaded an SVG for the logo of my wiki, and I noticed it doesn't render quite right, however, when I zoom in a little bit, it renders properly.

Is there a CSS object somewhere I can edit to scale that logo just a little bit bigger to see if it renders better? 173.198.127.25 (talk) 21:14, 26 June 2024 (UTC)

You could try .citizen-header__logo or .mw-logo-icon 2001:871:4:B428:59BB:11CA:658F:3AED (talk) 09:30, 9 August 2024 (UTC)

Skin not activating

Hi everyone, I really like the Citizen skin, but when I try to activate it in LocalSettings.php, the site stops responding. Can you help me fix this? 62.133.60.20 (talk) 17:28, 12 July 2024 (UTC)

Does it throw any error messages when you try to use the skin, or do you only get a white site? If so, which one? (You may need to temporarily enable debugging in your LocalSettings.php for exceptions to show: Manual:How to debug).

And which MediaWiki, MySql and PHP versions are using (you can find this information on your Special:Version page)? UsualyWeJustSayPlease (talk) 19:11, 24 September 2024 (UTC)

how to target auto-dark users ?

I would like to target user that uses darkmode. I know which class to target for those who set it manually. But not for those that use the auto feature. Awing ding (talk) 18:14, 27 July 2024 (UTC)

The CSS class should be .skin-theme-clientpref-auto according to https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Customizing-Citizen-styles.

But for me it doesn't work changing variables in it using MediaWiki:Citizen.css. For some reason it only works for the dark class which is .skin-theme-clientpref-night. 2001:871:4:B428:59BB:11CA:658F:3AED (talk) 09:28, 9 August 2024 (UTC)

How to Disable Header Dropdown Carrots?

Hi, I'm trying to build a splash page for a project, but every time I use a header it creates a collapsible section. I'd like to just have a Header without the carrot. How or where should I look to change this feature? 70.44.3.114 (talk) 23:38, 29 July 2024 (UTC)

I guess you should add this to the LocalSettings.php:

$wgCitizenEnableCollapsibleSections = false; Sergtsar (talk) 07:30, 11 August 2024 (UTC)

Set bottom navigation bar to default to not hiding?

I've looked everywhere to try and understand which setting I need to add to the LocalSettings.php to enable or disable this as default. On mobile, the navigation bar is defaulted to hide automatically, I'd like to charge that. 109.149.224.75 (talk) 06:16, 24 September 2024 (UTC)

There isn't a way to set as default yet. But it can be set per user under the preference menu (the gear icon on the navbar). Alistair3149 (talk) 02:25, 2 October 2024 (UTC)

Thanks Alistair! Incredible skin by the way. Would be a great feature to have of possible. 2A00:23C7:B50E:7C01:BE81:62A4:BA9E:3ADF (talk) 18:00, 5 October 2024 (UTC)

⧼citizen-page-info-viewcount⧽ and Extension:HitCounters

Just a quick tip for others who might be using Extension:HitCounters. If you see ⧼citizen-page-info-viewcount⧽ above your page count, it can be fixed by editing MediaWiki:Citizen-page-info-viewcount to put in your phrase of choice. Flounder ceo (talk) 19:59, 10 October 2024 (UTC)

Wide Tables on Mobile Devices - horizontal scrolling

Hello, first off, great looking skin! I am hoping we can use it for our wiki.

We have wide sortable tables on our Wiki - on the Desktop it looks fine with a wide monitor, but when viewing on a portrait mobile phone, it does not allow scrolling to the right to view the whole table.

Screenshot from iPhone:

https://imgur.com/a/zP0Dl2K

(The width of the page cuts if off at Manufacturer, and cannot scroll over to view the rest of the table)

Screenshot from Desktop:

https://imgur.com/a/Y9QTy6h

Live page link:

https://cptdb.ca/wiki/index.php/York_University_Shuttle

Is there a suggested fix for this? Thank you so much for the great work! 2001:56A:F8AB:7600:7DD9:C66A:34CC:920E (talk) 03:54, 20 October 2024 (UTC)

There are two ways to approach it. You can either add the wikitable class to the table (which also applies Citizen's table styling) or citizen-overflow class to anything that might overflow. Alistair3149 (talk) 07:20, 20 October 2024 (UTC)

Forcing dark mode temporarily?

Is there any way to force the Citizen skin into dark mode temporarily by adding to the URL like with these skins?

Manual:Dark mode#Forcing dark mode temporarily 96.40.242.184 (talk) 23:54, 22 October 2024 (UTC)

There isn't a way to do it with URL. May I ask what the use case is for that? Alistair3149 (talk) 05:55, 23 October 2024 (UTC)

Hiding the top elements on the main page

Ive recently picked up the Citizen skin since it looks absolutely amazing and been trying to replicate the general layout of the main page from the star citizen wiki.

Im wondering how they hid the elements at the top of the page. Ive already succeeded in removing the page title from the main page using MediaWiki:Mainpage-title and MediaWiki:Mainpage-title-loggedin but Im not sure how to also hide the subtitle right bellow the title itself and the other control elements on the top right of the page. 92.73.227.188 (talk) 16:52, 23 October 2024 (UTC)

Since a lot of folks are asking for something similar, we have implemented the styles needed to shift the page tools to the bottom of the page for main page. You can update to the latest main branch of Citizen and check it out! Alistair3149 (talk) 21:13, 23 October 2024 (UTC)

Updated and Im happy to say that I love the changes. Thank you :) 92.73.227.188 (talk) 22:50, 23 October 2024 (UTC)

Infobox tables on mobile not looking right

I'm trying Citizen as a default for my site and infoboxes are getting cut off from the side on mobile. Also some of the subheadings colors need to be updated for dark. e.g. https://encyc.org/wiki/World_War_II It works fine with MinervaNeue. Flounder ceo (talk) 14:20, 27 October 2024 (UTC)

MinervaNeue comes with some opinionated styles override for infobox specifically, and Citizen doesn't do it for compatibility reasons.

As for dark mode and the responsiveness, since it is a custom template, it should be handled on the wiki through CSS.

https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Using-Citizen-styles might help Alistair3149 (talk) 16:42, 27 October 2024 (UTC)

Popups not in right place on Edge

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Disable 'Pure Black Mode'

Is there a way to disable it through a config? Thanks! Enews01 (talk) 15:18, 10 November 2024 (UTC)

What would be the use case here? You can modify the appearance via CSS if you don't like the default look. UsualyWeJustSayPlease (talk) 17:25, 10 November 2024 (UTC)

The use case would be to disable it. The way we have styled the site makes pure black mode do next to nothing - and we would rather have just light and dark mode. Thanks. Enews01 (talk) 02:22, 21 November 2024 (UTC)

Style Pure Black Mode

Hello! I'm wondering if I'm able to style the Pure Black mode. I know that .skin-theme-clientpref-day, .skin-theme-clientpref-night, and .skin-theme-clientpref-os exists, but I would like to be able to style the Pure Black mode since the way I styled dark mode makes it look kinda useless. Stackd (talk) 12:52, 24 November 2024 (UTC)

Not sure how much this is of help: https://github.com/StarCitizenTools/mediawiki-skins-Citizen/wiki/Using-Citizen-styles UsualyWeJustSayPlease (talk) 15:28, 24 November 2024 (UTC)

I have read it, but it documents only about light, dark, and automatic mode. It doesn't mention anything about pure black mode. Stackd (talk) 11:49, 25 November 2024 (UTC)

Your skin is incompatible with VisualEditor.

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Your skin is incompatible with VisualEditor. See https://www.mediawiki.org/wiki/Extension:VisualEditor/Skin_requirements for the requirements.

Is there a way to fix this? CescoAiel (talk) 22:17, 15 December 2024 (UTC)

Ok, turns out it's a widget (Widget:Audio) whose JS code pops an unexpected end of JSON error that breaks the skin... CescoAiel (talk) 22:51, 15 December 2024 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Prevent Drawer Card closing when link on it is clicked?

I have a CategoryTree displayed in the Drawer Card (the panel displayed when the hamburger menu is clicked. class="citizen-drawer__card" id="citizen-drawer__card"). However, after an update to all things MW 1.43, whenever a user clicks on a node of the category tree, the Drawer Card closes/hides, so they have to re-open the Drawer Card to continue navigating the category tree nodes.

Is there a way to prevent the Drawer Card closing whenever a link on it is clicked?

If the user actually clicks a link that goes to another page, they don't care that the Drawer Card would still be open just before the new page loads. Medicinestorm (talk) 19:02, 26 December 2024 (UTC)