From MediaWiki Pivot Skin

Here are some answers to frequently asked questions when using the Pivot skin. Common questions will be added as they are asked or ask one if you can't find the answer.

Issues and Feature Requests

Question: I would like to report and issue or ask for a new feature. How do I do this?

Answer: You can report issues and feature requests at the issue tracker on GitHub. GitHub is the location where the software repository is hosted and where the development is done. The issue tracker is located at this spot.

Icons Are Broken

Question: My icons do not show or look broken in the sidebar and/or drop down menu. What is wrong?

Answer: It is more than likely a server issue with MIME types not being set correctly or the web server's default Content-Type being set to something besides text/plain. Pivot has the Font Awesome font files included. Missing MIME types or a different default Content-Type setting will break the fonts because the browser does not know how to decode or blocks them. Depending on your server type you will have to make a change to your .htaccess file or if using NGINX, your config folder and look for the mime.types file. See How to setup server to serve fonts for more information.

Icon Missing

Question: There is a missing icon in my "Actions" or "Toolbar" menu. Why? How do I add icons?

Answer: Icons are added with a little bit of magic using JavaScript to prepend the icon and a div container to style them a bit. While Pivot tries to add the common extensions so uncommon ones might be missing. To add an icon just create or add to your MediaWiki:Pivot.js page something similar to this code:

$('li#n-recentchanges a').prepend('<div id="drop-icon"><i class="fa fa-tasks fa-fw"></i></div>')

li#n-recentchanges a is the element id of "Recent changes" and fa fa-tasks fa-fw is the class of the icon found on Font Awesome's website. Find the icon you want on the Font Awesome website and the element id by using the inspect feature of your browser. Add the code to your MediaWiki:Pivot.js page, save and reload page. Please be aware of js file caching in your browser and server side depending on your installation settings. See our MediaWiki:Pivot.js page to see how the code looks to add the icon for "Images slider" looks.

Answer: As an alternative icons can be added via the fontawsome.css file in assets/stylesheets. This method will preload the icons instead of relying on javascript to fetch them. To add an icon just create or add to your MediaWiki:Fontawsome.css page something similar to this code:

#n-recentchanges a:before {content: "\f0ae";}

#n-recentchanges a:before is the element id before "Recent changes" (you could also place one after using :after). The \foae is a unicode number for the name of the Font Awesome icon. The name to unicode mapping can be found in assets/stylesheets/font-awesome.css.

For example this is the line in font-awesome.css showing that fa-tasks is \f0ae in unicode:

.fa-tasks:before { content: "\f0ae"; }
Cookies help us deliver our services. By using our services, you agree to our use of cookies.