Skin talk:Citizen

About this board

PortableInfobox glitches

7
FatalFit (talkcontribs)
What shouldn't happen, viewing the article.
What should happen, shows when viewing the source preview.
What should happen, shows when viewing the source preview.

When using this skin, PortableInfoboxes are glitched out. They appear normal when in the source preview tho, so it should be able to be fixed.

What happens

The infobox headers show small and on the very left with no padding, and collapsible tabs are impossible to open. Left image is what happens when viewing the article, right image is what happens when viewing the source preview (what it should look like).

What should happen

The infobox should appear how it shows in the source preview, the one without the glitches (right image).

Reproducing the issue

On a MediaWiki installation with the Citizen skin and PortableInfobox extensions,

  1. Create a simple infobox for testing (i've supplied code below)
  2. Create a page with the infobox (i've supplied code below), you will see how the infobox is glitchy and has the issues described above.
  3. Edit the page in source mode
    1. Make a change (correct version doesn't show in preview if you don't make a change)
    2. Click preview, the correct version with no glitches will show.
Source code for an infobox template for testing
<infobox>
<title source="name"><default>{{PAGENAME}}</default></title>
<image source="image_skyline"><caption source="skyline_caption" /></image>
<group collapse="closed">
<header>Other media</header>
<image source="image_flag"><caption source="flag_caption"><default>Flag</default></caption></image>
<image source="image_seal"><caption source="seal_caption"><default>Seal</default></caption></image>
<audio source="anthem"><caption source="anthem_caption" /></audio>
</group>
<group>
<header>Group1</header>
<data source="data1"><format>'''Example:''' {{{data1}}}</format></data>
<data source="data2"><format>'''Example:''' {{{data2}}}</format></data>
<data source="data3"><format>'''Example:''' {{{data3}}}</format></data>
</group>
</infobox>
Source code for the infobox in an article
{{InfoboxName
| name = Example name
| image_skyline = Example.svg
| skyline_caption = First image
| image_flag = Example.jpg
| flag_caption = Second image
| image_seal = Example.jpeg
| seal_caption = Third image
| anthem = Example.ogg
| anthem_caption = First audio
| data1 = First
| data2 = Second
| data3 = Third
}}
71.92.218.4 (talkcontribs)

I'm currently experiencing the same problem as well with my wiki. Is there any way to properly resolve this issue?

Alistair3149 (talkcontribs)

Would you be able to verify if the latest in the main branch fixes the issue for you?

FatalFit (talkcontribs)

Unfortunately it's still happening with MediaWiki 1.40.0 and the latest github version. Photo on Imgur

PiperMcCorkle (talkcontribs)

I'm seeing this behavior at main's tip (edfb43ffd85b59a3bc40fb401d624f6e5b4b1077) with MediaWiki 1.40.0.

D0wnl04d3r97 (talkcontribs)

I still have this glitch on Mediawiki 1.41. Any suggestion?

Alistair3149 (talkcontribs)

I am unable to reproduce it here. What version of Citizen and PortableInfobox are you using?

Reply to "PortableInfobox glitches"

Left navigation bar bugs out when receiving a talk page notification

2
Hedeyohu22 (talkcontribs)

I think this image demonstrates it pretty clearly:

Alistair3149 (talkcontribs)

Patched in the latest main branch.

Reply to "Left navigation bar bugs out when receiving a talk page notification"

Icons in search results?

3
98.97.141.71 (talkcontribs)

This may be obvious, but I can't figure out how to get images in the article to appear in the search results? I am using ShortDescription and the summary text is visible. I don't see anything obvious in the documentation or listed extensions to control this.

98.97.141.71 (talkcontribs)
ProbablePrime (talkcontribs)
Reply to "Icons in search results?"

Repeatedly unfocusing search bar

1
Leapofod (talkcontribs)

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

Reply to "Repeatedly unfocusing search bar"

Conditional Google AdSense in skin.mustache

2
HausaDictionary (talkcontribs)

Hello, is it possible to disable the Google ads on skin.mustache based on the page title/URL? Thanks!

Alistair3149 (talkcontribs)

Citizen does not insert the HTML or script needed for ads. So it depends on what modification you have to insert them.

Reply to "Conditional Google AdSense in skin.mustache"
189.61.116.159 (talkcontribs)

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?

Alistair3149 (talkcontribs)

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.

Reply to "Search.mustache"
2001:8F8:1B27:1E25:B928:BA06:8238:79C8 (talkcontribs)

I use Extension:ImageMap on my wiki for navigational map and it seems that the skin Citizen enlarging this image in <imagemap> tag as normal images. On the other hand it sqeezes image on mobile version. I want to disable this image enlarging effect for this one particular image and cannot find how I can do that. Please help

2001:8F8:1B27:1E25:B928:BA06:8238:79C8 (talkcontribs)

also it seems that the image class=noresize is completely not working either

Alistair3149 (talkcontribs)

Would you mind to link me to a demo page with the issue? I will see what I can do.

94.206.175.46 (talkcontribs)

I am trying but links might be forbidden here. It is wiki dot theieco dot com

94.206.175.46 (talkcontribs)

No updates?

94.206.175.46 (talkcontribs)

It's been one month since there is no news about this?

Alistair3149 (talkcontribs)

Sorry I missed the message. There aren't much I can do currently on the skin side because Extension:ImageMap does not load any styles at all until very recently in the latest version. However, you can put the following in MediaWiki:Citizen.css:

img[usemap] {
    transform: none !important;
}
Reply to "Image behaviours"

Icons for editing / visual editing (1.41.0)

2
Tchibob (talkcontribs)

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 (talkcontribs)

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; }

Reply to "Icons for editing / visual editing (1.41.0)"

Login and signup pages look wrong in dark mode

1
User581594 (talkcontribs)
Reply to "Login and signup pages look wrong in dark mode"

not working properly on 1.39.6

2
Jakeriper1 (talkcontribs)

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 (talkcontribs)
Reply to "not working properly on 1.39.6"