Skin talk:Tweeki

The preferred place to discuss issues and ask for support is on github. Please consider using it, thanks! --Thai (talk) 06:26, 28 April 2018 (UTC)

Help with custom CSS extension
Hi I am not sure how to use a custom CSS extension as described at https://tweeki.thai-land.at/wiki/How-Tos.

I have done the following: $wgResourceModules['x.MYEXTENSION.styles'] = array( 'styles' => array( 'screen.css' => array( 'media' => 'screen' ) ), 'localBasePath' => __DIR__,  'remoteExtPath' => 'MYEXTENSION', ); $wgTweekiSkinCustomCSS[] = 'x.MYEXTENSION.styles'; wgLoadExtension( 'MYEXTENSION' ); I would then want to add my custom css in the screen.css file and have it change the styling of the wiki... What am I doing wrong?
 * 1) Create MYEXTENSION directory under extensions/ folder
 * 2) Added extension.json file in MYEXTENSION directory, with following content:
 * 1) create screen.css file in MYEXTENSION directory (I assumed that's what the screen.css refers to in the code in extension.json file?)
 * 2) Tried adding the following to LocalSettings.php: (Adding this line breaks the wiki completely and it doesn't even load anymore, so probably not right)

Any help is appreciated :)

--sonjabrits (talk) 15:30, 20 January 2018 (UTC)


 * Hi Sonja. Sorry for the confusing description in Tweeki's documentation. It was referring to the old way of doing things (before we used extension.json). I updated it but I fear it's still not detailed enough if you don't have much experience with writing your own extensions. Therefore I would recommend you to simply use, it's the easiest way to add custom CSS.


 * Hope this helps! --Thai (talk) 09:23, 1 February 2018 (UTC)

not compatible with Extenions:HeaderTabs
Unfortunatly there is a bug when using this skin and headertabs together. The tabs are created but the text (heading) of the tabs are missing. Could this be fixed? Thanks! --M art in (talk) 14:57, 4 July 2016 (UTC)


 * I've got some idea what the problem could be but not the resources to fix this in the near future. I would gladly accept any patches, however. Meanwhile, you can use Bootstrap's Togglable Tabs. See the documentation to see how to do it. --Thai (talk) 21:08, 7 September 2016 (UTC)

blanks the wiki
Hi Tried installing the skin, but upon adding the require inside Local Settings it blanks the wiki.


 * Hi. The problem could have been due to the typo in the git command (see below). Could you try out if it works after renaming the skin folder from  to  ? If not, could you try adding the following two lines to   (before requiring Tweeki):

error_reporting( E_ALL ); ini_set( 'display_errors', 1 );
 * You should then see some error message instead of only a blank page. Could you please post it's content?
 * Thanks! --Thai (talk) 11:08, 25 March 2016 (UTC)

Typo in git command
Nice skin I am playing with it and while a tad lost at first it has some nice features. Thanks.

I think you made a typo in your git command.

The rest of your info calls for it to be in Tweeki so think you meant. I may of missed something but without that it causes quirks it seems. Pisnaz (talk) 03:33, 22 March 2016 (UTC)


 * Thanks for the hint, you're perfectly right. I had the correct link on the project page and on github but had forgotten to change it here... --Thai (talk) 11:00, 25 March 2016 (UTC)

Having trouble with latest mediawiki version 1.27
I am trying install and use this skin but it doesn't work with mediawiki version 1.27. Images are not showing up and internal links are broken... Could it be updated for the mediawiki version 1.27? Jisookmeister (talk) 16:23, 9 August 2016 (UTC)


 * Hi, I'm using Tweeki with MW 1.27, it should be working now. Please report back, if there are still problems... Thanks, --Thai (talk) 21:01, 7 September 2016 (UTC)

Revision History
For the life of me, I can't figure out how to get to the page's revision history within the UI. I had to work around that and edit the page and change the URL from action=edit to action=history. What am I missing??

Finalfenix (talk) 02:19, 7 August 2017 (UTC)


 * Some of MediaWiki's advanced features are hidden by default in order not to overwhelm users. Tweeki's default scenario is that of wiki-as-a-website with only some advanced users. You can of course easily change that and you have several options:
 * If it's important that you can access the history but not the other users go to your preferences and check “Show advanced features” under “Appearance”. The default “edit” button will then turn into a dropdown that contains a selection of the most important “views” and “actions”. See also the description of  in Navigational Elements' documentation.
 * You can make the dropdown visible either by changing the preference's default value for your users or changing the default configuration option that reduces  to   for non-advanced users. You can do so by adding the following to LocalSettings.php or your extension:
 * The history is part of the „views“, so you can add the  navigational element to any navigational section.
 * --Thai (talk) 09:43, 7 August 2017 (UTC)


 * Is there a way I can show  to all logged in users?


 * Finalfenix (talk) 08:12, 16 August 2017 (UTC)


 * Yes, you can hide it for anonymous users. So you'll have to make it visible to non-advanced users with the line above and additionally add this:
 * --Thai (talk) 10:45, 16 August 2017 (UTC)

interferences with other skins
I've set tweeki as my wiki's default skin, but now "edit source" don't show up anymore on sections with other skins… (which is a shame as most of my users use vector) --Loizbec (talk) 11:26, 12 September 2017 (UTC)


 * Should've been fixed in the latest development version. Please confirm. Thanks! --Thai (talk) 13:19, 20 September 2017 (UTC)


 * Still not working for me. Edit source is not there. --LiaVeja (talk) 13:45, 9 November 2017 (UTC)


 * Could you provide some screenshots or is your wiki publicly available so that I could have a look at it? --Thai (talk) 17:34, 9 November 2017 (UTC)

Tweeki as a website (layout)
Thank you so much for this brilliant theme and idea. I want to use the theme in a "as a web site" scenario, and I wonder what would you recommend in order to add layout, columns on a per page basis. I.e. what would the code be to display a site like your home page (text box background colour, rows with different number of columns and icons with different size text next or below).--Spiros71 (talk) 09:52, 15 October 2017 (UTC)


 * The documentation is a read-only Wiki, but you can always inspect the source code by appending  to the URL like this. For rows, columns, and all the other styling features you should have a look at Bootstrap's documentation. Hope this helps, --Thai (talk) 15:12, 15 October 2017 (UTC)

Content not showing as expected
Hi

I have a fresh local SWM installation and enabled Tweeki. The topbar is much higher now than on my private online site, and the text "Navigation menu" is showing on the upper left corner with quite big font. The hight is twice the size as this: https://tweeki.thai-land.at/wiki/MediaWiki:Tweeki-navbar-right.

Any ideas?

Regards, Pål


 * Hi. Thanks for the report. Could you provide some screenshots? You could use github's issue tracker here to upload your images... What version of MW are you using? And what is the language of your installation? --Thai (talk) 13:22, 16 February 2018 (UTC)


 * It's exactly the same as the open issue on github (#98).. I will update my issue there.


 * Regards, Pål

Bootstrap Carousel
Hello, I tried to add a BS carousel to an article on my wiki, but it seems not to work. For reference, I just tried copy-pasting the example from the W3C tutorial onto one of the pages on my wiki to play around with it. I am still quite new to BS and CSS, but would you be able to point me in the direction of how to add one? I know there are some carousel classes included in the Tweeki Bootstrap CSS file, but it seems like there are some classes missing. Any help would be appreciated! TIA Lucidlywisely (talk) 07:49, 2 March 2018 (UTC)


 * Hi. I'm sorry, but carousels are currently not supported by Tweeki. I never needed it and so never felt the urge to implement the style fixes (the classes are not missing it's just that MediaWiki's classes with higher specificity mix things up). Besides styles it probably also needs some code to be rewritten as carousel's javascript relies on specific attributes. I will happily accept any working patches but I won't have the resources to implement this myself in the near future – and to be honest I'm not a big fan of slideshows. Others advise against using it, too ;) Also, they raise issues in terms of accessibility. --Thai (talk) 11:50, 3 March 2018 (UTC)


 * Bmulckhu provided the necessary css fixes and also started to write some documentation on how to use it. Carousels should probably work now, please help testing it. --Thai (talk) 18:27, 8 June 2018 (UTC)

Long TOC and showing the category
Hello! I hope this is the correct place to share these two questions, as I am not familiar with github. I have been using Tweeki and found that it looks great, thank you!, and have two little questions about it: (1) when there are many first-level headings, the TOC at the sidebar only shows down to the a few, is there a way to make it so that the TOC is also scrolled up when there's, say, 20+ headings to be shown. I guess it involves touching the php code here and there, just some guidance would be greatly appreciated! (2) How can I show the categories of every page? I navigate using category pages a lot, I would love to have the link visible somewhere. Thank you so much for your work!!! Houjou (talk) 15:45, 13 March 2018 (UTC)


 * Hi. Happy to hear, that you like the skin. (1) I see several possibilities for you here. If you want it fancy, that is, if the TOC should always stay in sight but slowly scroll down as you approach the end of the page, you'll have to write your own javascript. This would be rather advanced. One easy solution is to “unfix” the sidebar(s) with this simple line of CSS that you can put into :
 * The sidebar would then move together with the rest of the page. A third possibility – the one I would prefer – would be to group them so that you only have a handful of first-level headings and a number of subheadings that will only be shown in the TOC for the section currently in view.
 * (2) The categories are only hidden via CSS. You can make them visible with this line:
 * Good luck, --Thai (talk) 20:44, 13 March 2018 (UTC)
 * Good luck, --Thai (talk) 20:44, 13 March 2018 (UTC)
 * Good luck, --Thai (talk) 20:44, 13 March 2018 (UTC)


 * Thank you so much for your quick and useful reply! (1) Until I am confident enough to prepare my own js for this, I'll keep the sidebar non-absolute and see if I can reorganize the headings of the affected long articles. (2) Yes! Thanks!!! --Houjou (talk) 15:36, 15 March 2018 (UTC)

No button to "Cancel" when using VisualEditor
Hello Thai! I'm using Tweeki on several websites and I find it's very flexible and it's looking great! Only recently I tried using Tweeki in combination with VisualEditor, which seems to work quite seamless... with one exception! When editing a page with VE there is no "Cancel" button! There's only some impractical workarounds, like clicking page-back on my browser or switching to the conventional editor for cancelling... Not nice!! Would there be some way to include a "Cancel" button in the navigational menu's? Cancelling would actually be a link to the standard page in read-modus! Bmulckhu (talk) 15:50, 19 April 2018 (UTC).


 * Hi. If I understand it correctly the missing “Cancel” button is not specific for Tweeki, right? But in Vector you have the “Read” tab to return to the page. You can of course add a “Cancel“ link to the navigation (e.g. with ). VisualEditor loads dynamically and adds classes to the   tag, so you could use these to show/hide the button. In order to do so you should add a custom class to the link (e.g.  ). Then you could add the follow CSS (in   or in your own extension):

.customclass { display:hide; } .customclass { display:none; } .ve-active .customclass { display:block; }
 * --Thai (talk) 20:07, 19 April 2018 (UTC)


 * Hi! Thanks for your reply. This is exactly what I meant.
 * 1- The proposed solution would be nice. There is an issue with the proposed CSS, though. I added the CSS to, but the Cancel-link is not hidden when not editing. It is always there. I did inspect with Google dev-tools and the   is assigned correctly to the link:  . What's going wrong?
 * 2- Would it also be possible to add the Cancel-link to the actions in the dropdown from the EDIT-EXT?
 * 3- Or even better - since the Edit-button is actually dysfunctional when editing - would it be possible to change the Edit-button into a cancel button?
 * Bmulckhu (talk) 21:11, 19 April 2018 (UTC).


 * Hi.
 * 1 - sorry, you're right. It's a question of specificity. Bootstrap's  overrules  . So   and   should work as selectors.
 * 2 - that is possible but it requires some PHP skills. You can use to override EDIT-EXT or create your own special navigational element. There you can customize the dropdown in the way you prefer it and add the classes that you need in order to show and hide elements depending on the state of VE.
 * 3 - it's possible that you can achieve this with CSS if you play around long enough but I guess it will be easier with the solution from 2.
 * Good luck, --Thai (talk) 05:59, 20 April 2018 (UTC)


 * Hi & thanks again for your extensive reply. I'll stick with the the first option for now, and try to figure out the second some time later.
 * The selectors you proposed are not working though (I did clear the cache). I did put the Cancel-link in the right sidebar; would that make a difference for the  part of the selector? Bmulckhu (talk) 22:52, 20 April 2018 (UTC).


 * I was typing to fast the other day. It should read  instead of  . If you put the link in the sidebar there should be no need to override Bootstrap CSS rules of higher specificity. --Thai (talk) 18:31, 22 April 2018 (UTC)


 * Okay, I realize that probably I'm starting to get annoying now... :-) . And it's true: I should have been able to find the  issue myself. But.... it is still not working !?!? Same issue - the selector doesn't make the Cancel-link disappear... I googled and fiddled but can't get it working right. Bmulckhu (talk) 07:26, 24 April 2018 (UTC).


 * That's weird. Your wiki is not public, by any chance? Could you post the contents of your  and your  ? I just tested it (without VE installed) – hiding the link works like a charm… If you inspect the applied styles with dev-tools---does the style for   get applied? And what's the rule that overrides it? --Thai (talk) 07:59, 24 April 2018 (UTC)


 * Yes, weird indeed. The wiki is public now: please find tweeki.css here. The customclass I'm using is . You can find the css in MediaWiki:Tweeki.css (link above). The "Annuleren"-link (Cancel-link) is visible here f.e. Bmulckhu (talk) 17:23, 24 April 2018 (UTC).


 * Thanks for your perseverance. Again, I wasn't exact enough in my answer above. If you put the link in the sidebar and not in the navigation there's not only no need to use the specific selector it's also harmful. If you use only  and   as selectors it should work, I hope. Good luck, --Thai (talk) 18:11, 24 April 2018 (UTC)


 * Uhm... please don't kill the messenger... : this isn't working either! I also tried a few variants with  and tried to add , but none of those worked. Bmulckhu (talk) 19:10, 24 April 2018 (UTC).


 * Interesting in just how many ways it can go wrong – I found another possible culprit and I'm curious what will happen next ;) You accidentally commented out your carefully crafted rules, that might be the problem... Nice work, that you're doing there, btw. --Thai (talk) 20:21, 24 April 2018 (UTC)


 * Ok... my bad: the last one did it! Just for clarification: the working solution is:

.ve-annuleren-link {display:none;} .ve-active .ve-annuleren-link {display:block;}
 * Thanks a million for your patience and support (and your compliments for the work)! Bmulckhu (talk) 21:06, 24 April 2018 (UTC).


 * Hi! I recently found the "annuleren"-link in the right sidebar on the page  ("Special:Preferences"). This is quite confusing, since this page does not use editing at all. I tried to hide it in several ways, but wasn't able to get rid of it. Here are some examples of lines that i put in   (in addition to the lines above), but none of them did have any effect...:

.ve-active .rootpage-Speciaal_Voorkeuren .ve-annuleren-link { display:none!important; } a[href*='Speciaal:Voorkeuren'] .ve-annuleren-link {display:none!important;} .rootpage-Speciaal_Voorkeuren .ve-annuleren-link { display:none!important; }
 * What am I doing wrong??? Bmulckhu (talk) 10:53, 29 April 2018 (UTC).


 * Site CSS customizations are disabled by default on  and   for security reasons (see the manual). You can change this behaviour using   or put your CSS in an extension. --Thai (talk) 12:02, 29 April 2018 (UTC)


 * Ok, this is the final edit on this subject from my side... Adding the (standard CSS) class  to the link in   (the full link there is now:  ) and changing the custom CSS to:

.ve-annuleren-link {display:none;} .ve-active .ve-annuleren-link {display:block!important;}
 * circumvents the issue that the "cancel"-link ("annuleren") gets displayed on Login and Preference pages (without the need for an extension). Actually the first line in custom-CSS is superfluous as well... Bmulckhu (talk) 17:40, 2 May 2018 (UTC).

Changing “Edit section links” when using VisualEditor
Normally (in case you’re not using VisualEditor) when hovering a section title Tweeki will neatly show an “edit section” link with the label “source” (nl: “brontekst”) and a pencil glyph. The label is linking to editing the section with the conventional editor. When using VisualEditor there are three links that show up behind the section title, separated by “pipes”:
 * 1) Just the pencil glyph, linked to editing the page (not the section!) with VE. class=“tw-editsection-onhover mw-editsection-visualeditor”
 * 2) Just the tekst “edit source” (nl: “brontekst bewerken”), linking to editing the section with VE. class=“tw-editsection-onhover”
 * 3) The tekst “source” (nl: “brontekst”) and the pencil glyph, linking to editing the section with the conventional editor. class=“tw-editsection-onhover”
 * 4) Also the pipes are always visible, even when not hovering the section title. Class=“mw-editsection-divider”

Dev-tools also shows a container span (class=“mw-editsection”) and square brackets spans (which are hidden anyway, class=“mw-editsection-bracket”).

Finally my questions:
 * 1) How can the first pencil glyph be removed (including dividing pipe)?
 * 2) How can the second text be adapted to “edit with Visual Editor” (“bewerken met Visual Editor” or a plain “bewerken”)?
 * 3) How can the third text be adapted to “edit source” (“bewerken bron”)?
 * 4) How can the dividers (pipes) be hidden when not hovering the section title?

I’m aware of the manual (https://tweeki.thai-land.at/wiki/Messages#Edit_Section_Link), but couldn’t find out how to get it working as described.


 * You should have a look at the SkinEditSectionLinks hook. Either you disable Tweeki's handling (setting  to  ) and implement what you would like to have in your own extension or you could also provide patches for Tweeki. They would be warmly welcome. Have a look at these lines if you want to go down that road. (I just updated Tweeki, btw, because it had used the deprecated DoEditSectionLink hook.) --Thai (talk) 14:30, 26 April 2018 (UTC)


 * Hi! I understand what you're saying, but my PHP-programming skills are (very) limited (i.e. non-existent). It took me an age to figure out a work-around in CSS and I will publish it here soon. I'm a fan and I would really like to contribute to Tweeki, but it won't be on the coding part, I'm afraid! I could add one or two examples though, to your "how-to" documentation, if you'd appreciate it? Bmulckhu (talk) 15:55, 27 April 2018 (UTC).


 * Any contributions are very welcome and with the documentation there's definitely room for improvement ;) Would you prefer to just send me your examples or would you rather get your own account for the documentation wiki? Just drop me a line. --Thai (talk) 06:31, 28 April 2018 (UTC)


 * Hi, this is not so much a "solution" as a "work around" for the issues above. The simplest work around, of course, is to suppress the link, but this work around aims to end up with an "edit" link and an "edit-icon" separated by a dividing "pipe". This work around also works when Visual Editor is disabled for a user (then just a glyphicon is being displayed).
 * 1a & 4- Hiding the dividers (and brackets) in the "edit-section" link in case the section title is not being "hovered" by the mouse:

/* Divider hidden */

h1 > .mw-editsection > span.mw-editsection-divider, h2 > .mw-editsection > span.mw-editsection-divider, h3 > .mw-editsection > span.mw-editsection-divider, h4 > .mw-editsection > span.mw-editsection-divider, h5 > .mw-editsection > span.mw-editsection-divider, h6 > .mw-editsection > span.mw-editsection-divider {display:none;}

h1:hover > .mw-editsection > span:nth-last-of-type(2), h2:hover > .mw-editsection > span:nth-last-of-type(2), h3:hover > .mw-editsection > span:nth-last-of-type(2), h4:hover > .mw-editsection > span:nth-last-of-type(2), h5:hover > .mw-editsection > span:nth-last-of-type(2), h6:hover > .mw-editsection > span:nth-last-of-type(2) {display:inline;} .mw-editsection-bracket {display:none!important; }
 * 1b - Removing the the first link in section-edit and the pipe (divider) following this link:

/* Remove the first link and following divider */ .mw-editsection-visualeditor > span.glyphicon {display:none;} .mw-editsection-visualeditor + span.mw-editsection-divider {display:none;}
 * 2 - Change the text in  into the general "edit" (or any other text you'd prefer).
 * 3 - Optionally, change the icon in  into   to make it look different from the standard "glyphicon-pencil"
 * Better or smarter solutions (workarounds) are always welcome! Bmulckhu (talk) 09:07, 29 April 2018 (UTC).