When you edit a page with visual editor the top menu seems broken. Here's a pic of what I'm looking at. visual-editor.jpg (3127×492) (venciclopedia.org)
Skin talk:Pivot
Add this to your MediaWiki:Pivot.css:
.ve-init-target-visual .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-widget-disabled > .oo-ui-tool-link, .ve-init-target-visual .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
display: block !important;
}
First of all, thanks. Love this skin. I have a problem with images, though. Thumbs in articles show without any style.
So, this...
[[File:A.jpg|thumb|alt=B|C]],
just shows an image and captions below without borders, always on the left, and more.
I know I'm missing a setting or something because this problem doesn't happen on pivot.wikiproject.net. Thanks. Example in this page. All those images in a column on the left are thumbs originally spread around the page.
Already posted at the pivot site, and Kghbln mentioned that looks like "classes thumb tnone and thumbinner are no longer applied to thumbs and instead they use the figure and figcaption tags". How do I go about this?
@Jdlrobson: I assume it is probably just a matter of adding some CSS classes to the repo catering to the change. Do you think this may be the solution, and if yes, which CSS do I need to add? Thanks and cheers
@Cojoilustrado thanks for the bug report!
@Kghbln yes it should be a change to assets/stylesheets/pivot.css. You can use the styles in https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/content.media-common.less as a reference.
Thanks for the information and pointer! One last question: I am not much of a CSS, LESS, or SAAS expert: Is it just a matter of converting the file to CSS and adding it to the skin? I assume the imported variables are made available via MediaWiki core and do not need to be repeated?
@Kghbln @Jdlrobson Thanks for the information. This is my report. The css you provided doesn't work out of the box. Alignment worked once I removed the comments (my server doesn't like //) but nothing else. Switching alignment to the left renders undesirable formatting. Captions have no line height among other issues. To regain regular formatting, I added my own styling to pivot.css, but that, of course, is bad practice, but just wanted to regain cosmetic adequacy to the site. How do you convert LESS or SAAS to CSS? Is the css you sent me other than CSS? Linting it gave error in almost every line XD
@Kghbln I can fix this (possibly next week). Feel free to ping me again if I forget or create a ticket to remind me.
@Jdlrobson Thanks! I will. Testing hard the skin. I'll let you know if I find something else.
This will be utterly cool! Thanks a bunch!!!
Have you got an example wiki which demonstrates where this issue is occurring? I took a look today but was unable to reproduce the issue. It might be an issue in an older version so it would be useful to understand this more.
If you don't have a wiki if you could click view source and share the HTML of that page, and the MediaWiki version that should be sufficient for me to work this out.
Thanks in advance.
The link to the wiki is this one https://www.venciclopedia.org/index.php?title=Aditus The wiki is on 1.40.x
I think https://gerrit.wikimedia.org/r/c/mediawiki/skins/Pivot/+/995238 should do it. Try it out and let me know.
@Cojoilustrado: Could you please check? Thanks!
@Kghbln: @Jdlrobson: It's alive! Thumbs working right, left and center. Thanks. There's a problem with icons now, though. Icons like "fa fa-navicon fa-lg" don't show. I guessed it might be that I have preload awesome as false, but when I change to true the whole site crashes into this error. Keeping it off for now.
MediaWiki internal error.
Original exception: [ZcVMIKjQxmXUWP1zFpYmpwAAAAE] /index.php?title=Jorge_Aguilar Error: Call to undefined method PivotTemplate::getOutput()
Backtrace:
from /home/lizardkg/venciclopedia.org/wiki/skins/pivot/Pivot.skin.php(35)
#0 /home/lizardkg/venciclopedia.org/wiki/includes/skins/SkinTemplate.php(155): PivotTemplate->execute()
#1 /home/lizardkg/venciclopedia.org/wiki/includes/skins/SkinTemplate.php(181): SkinTemplate->generateHTML()
#2 /home/lizardkg/venciclopedia.org/wiki/includes/OutputPage.php(2899): SkinTemplate->outputPage()
#3 /home/lizardkg/venciclopedia.org/wiki/includes/MediaWiki.php(941): OutputPage->output(boolean)
#4 /home/lizardkg/venciclopedia.org/wiki/includes/MediaWiki.php(576): MediaWiki->main()
#5 /home/lizardkg/venciclopedia.org/wiki/index.php(50): MediaWiki->run()
#6 /home/lizardkg/venciclopedia.org/wiki/index.php(46): wfIndexMain()
#7 {main}
Exception caught inside exception handler: [ZcVMIKjQxmXUWP1zFpYmpwAAAAE] /index.php?title=Jorge_Aguilar Error: Call to undefined method PivotTemplate::getOutput()
Backtrace:
from /home/lizardkg/venciclopedia.org/wiki/skins/pivot/Pivot.skin.php(35)
#0 /home/lizardkg/venciclopedia.org/wiki/includes/skins/SkinTemplate.php(155): PivotTemplate->execute()
#1 /home/lizardkg/venciclopedia.org/wiki/includes/skins/SkinTemplate.php(181): SkinTemplate->generateHTML()
#2 /home/lizardkg/venciclopedia.org/wiki/includes/OutputPage.php(2899): SkinTemplate->outputPage()
#3 /home/lizardkg/venciclopedia.org/wiki/includes/exception/MWExceptionRenderer.php(184): OutputPage->output()
#4 /home/lizardkg/venciclopedia.org/wiki/includes/exception/MWExceptionRenderer.php(103): MWExceptionRenderer::reportHTML(Error)
#5 /home/lizardkg/venciclopedia.org/wiki/includes/exception/MWExceptionHandler.php(132): MWExceptionRenderer::output(Error, integer)
#6 /home/lizardkg/venciclopedia.org/wiki/includes/exception/MWExceptionHandler.php(249): MWExceptionHandler::report(Error)
#7 /home/lizardkg/venciclopedia.org/wiki/includes/MediaWiki.php(598): MWExceptionHandler::handleException(Error, string)
#8 /home/lizardkg/venciclopedia.org/wiki/index.php(50): MediaWiki->run()
#9 /home/lizardkg/venciclopedia.org/wiki/index.php(46): wfIndexMain()
#10 {main}Hi i've updated both my wiki and pivot to latest 1.39 but the tocstyles are not working, you can see it here:
https://selven.altervista.org/index.php?title=Pagina_principale&useskin=pivot
As written e n the time the show/Hide function of tablet of content not work with MediaWiki 1.38.2
I love this skin and it fits perfectly to the city week I am configuring. Yet, the search box is very small and difficult to find in the off-canvas side menu and autocomplete was not working on mobile like it does on a large screen. I tried editing pivot.skin.php and changed autocomplete="off" to "on" in lines 122 and 167 as described here, but nothing changed.
What I did instead: I added a search icon to the top bar which only appears on small screens. The icon links to Special:Search, where autocomplete is working also on mobile. Then, I deleted the search box from the off-canvas sidebar.
To add the icon, open your pivot.skin.php and look for <section id="middle-nav" class="middle tab-bar-section"> (somewhere around line 100). Directly below this line, add the following snippet:
<section id="middle-nav" class="right-small show-for-small">
<a href="/wiki/Special:Search" class="search"><span id="search-icon"><i class="fa fa-search fa-lg"></i></span></a>
</section>
The path to your Special:Search given at href="..." will vary, if your are not using short URLs with the same structure as me. This should work. If not, you can try to find a solution with the "Inspect Element" function of your browser and then copy the outer HTML to your pivot.skin.php.
To remove the search box from your off-canvas side menu on mobile only, find the following code snippet in your pivot.skin.php and delete it.
<li class="has-form">
<form action="<?php $this->text( 'wgScript' ); ?>" id="searchform" class="mw-search">
<div class="row collapse">
<div class="small-12 columns">
<input type="search" name="search" placeholder="<?php echo wfMessage( 'search' )->text() ?>" title="Search [alt-shift-f]" accesskey="f" id="searchInput-offcanvas" autocomplete="on">
</div>
</div>
</form>
</li>
Alternatively, you can add the following to your Mediawiki:Pivot.css:
.row.collapse > .column, .row.collapse > .columns {
display: none;
}
I hope this helps and works for you, too. Getting a proper solution for the search box issue in the pivot skin (hard to find, too small and no autocomplete) would nevertheless be great.
We adore this skin, however discovered it isn't compatible with 1.34.1 the current release since support ends for 1.33 in June 2020. On clean installation with no extensions enabled (even packaged extensions) enabling this skin kicks a 500 error and renders site inaccessible. You can change it back to Vector in LocalSettings.php. If you changed this in your user prefs and got error 500 and can't access the site, using SSH you can use a maintenance script to change the user settings back to vector: php userOptions.php skin --old "pivot" --new "vector"
We really hope they release an updated version soon but for now we have to transition to a similar one and begin customizing that to replace the skin ~~~~
Coincidentally someone ran into the same issue and reported it at GitHub. Looks like it will be fixed soon.
Great :)
They updated to version 2.20 and fixed the issue, we very much appreciate their fast work! :)
Skin Pivot is a killer skin. Beautiful, smart and effective.
My only concern is with the CategoryTree extension.
The label for Categories is displayed, but not the list of categories, no html else but label.
Did someone had the same issue ?
Any code for this would be appreciated. The suggestions dropdown on medium / larger screens is set for the search in the middle of the top bar, but not for the simpleSearch on the left off canvas menu, which is the only search available for small screens.
It will be great if you could create an issue report on GitHub
Solution: set autocomplete to on in Pivot.skin.php in the nav-bar section <ul class="side-nav"> only.
This still need redoing after each upgrade of Pivot.
<input type="search" name="search" placeholder="<?php echo wfMessage( 'search' )->text() ?>" title="Search [alt-shift-f]" accesskey="f" id="searchInput" autocomplete="on">
Hello, this may be pretty simple but I haven't had any luck figuring it out.
I've customized the toolbox a bit but would like to add some of the links into the menu that shows up on the right hand side, primarily a link to "Special Pages" and "What Links Here".
How would I go about doing this?
Amazing skin!!! Looks fantastic.
Echo notifications are cut off for smaller screens at the moment - seems to be from echo developers making changes.
On mobiles pivot 2.1 has the alerts and notices popups off the far left of the screen so they aren't visible, landscape view on same devices partially show them. Rough code below this, and for adapting future echo issues, thank you to the developer for making this easy to find via a previous fix (Github issue 19, pull request 32).
/* Make Echo extension more mobile friendly on small widths including mobiles in landscape view */
@media only screen and (max-width: 750px) {
.oo-ui-popupWidget-popup {
width: auto !important;
position: relative !important;
margin-left: 10rem !important;
margin-right: 0!important;
left: auto;
right: 0.9rem;
font-size: 75% !important;
}
.oo-ui-clippableElement-clippable.oo-ui-popupWidget-body {
width: 100% !important;
right: 1.5rem;
}
}
A suggestion for the future would be to locate these off canvas, under the user tools, as in Minerva.
Thanks a lot for sharing this CSS. I'd recommend opening an issue report for your suggestion as well as a pull request for this your preliminary fix, both on GitHub. This will be awesome!