Topic on Project:Support desk

How do I change the icon for WikiLove and change the colors used in the barnstars?

The heart is hardly appropriate for the grimdarkness of the 41^st millennium and the default colors are too bright for the dark layout. I tried customizing it the way that it says on the page, but it didn't work.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

Two questions:

1. Are you customizing it for just yourself or an entire wiki?
2. Do you have shell access on the server that runs the wiki?

You can customize it no matter what your answers to these questions are, but they determine what the best way to customize it is.

I'm trying to customize it for the entire wiki, so that whenever someone adds a barnstar, it will be the colors that I set.

I have shell access, but I normally just use FTP. Isn't it possible though to change the appearance from the wiki?

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

What should I do to customize it?

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

Customizing the WikiLove interface and the awards are handled differently. First, the easiest one... If you want to change the heart icon to black, for example, add something like the following to your MediaWiki:Common.css (or the specific skin equivalent):

#ca-wikilove.icon a {
  background-image: url("/extensions/WikiLove/modules/ext.wikiLove/images/heart-icons-black.png");
}

The exact URL will depend on your wiki's URL scheme. For example, on WMF wikis, there would be a '/w' before the '/extensions'. Since you have shell access, you could also go in and edit the CSS file directly:
/extensions/WikiLove/modules/ext.wikiLove/ext.wikiLove.icon.css
Other interface components can be changed with a similar approach.

Thanks. On mouseover, it seems to disappear. Do you know how I fix this? Also, when I add it to common.css on sturmkrieg.de, it causes the vector.css page to stop loading.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

That probably indicates some conflict or error in your css. Could you point me to your wiki so I can look?

sturmkrieg.de

The wiki where it works is en.sturmkrieg.com

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

Thanks. I've tried to create an account there. What do I need to mouse-over to see the problem?

I approved it. You can go to any user page, user talk page, or subpage of either to see the button for WikiLove.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

The problem is a the following CSS:

 #ca-wikilove.icon a:hover, #ca-wikilove.icon a:focus {
   background-position: -19px 60%;
 }

I fixed it in my own CSS by using:

 #ca-wikilove.icon a:hover, #ca-wikilove.icon a:focus {
   background-position: 5px 60% !important;
 }

You should probably do something like that for MediaWiki:Common.css

I'm using this:

#ca-wikilove.icon a, #ca-wikilove.icon a:hover {
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/3/3a/Feedback_red_star.png");
  background-position: 5px 60% !important;
}

And now it doesn't work after clicking on it. It shows the box, but it doesn't show any of the barnstars of any of that stuff.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

I think this list needs to be populated in using some modifications to MediaWiki:WikiLove.js like Ryan said.

I'll try it, but it worked before, so it should be able to still get what it needs from the files.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

Actually, looking at your WikiLove.js page, you are completely overwriting all the default options. Instead of

  $.wikiLoveOptions = {
    defaultBackgroundColor: '#151515',
    defaultBorderColor: '#FF0000',
  }

you want to use something like

  $.wikiLoveOptions.defaultBackgroundColor = '#151515';
  $.wikiLoveOptions.defaultBorderColor = '#FF0000';

In other words, look at MediaWiki:WikiLove.js on enwiki for how to make smaller changes. If you want to overwrite everything, you'll need to refer to the work that commons has done.

To change the items and awards that are available, you have two options. You can use your shell access to edit the file:
/extensions/WikiLove/modules/ext.wikiLove/ext.wikiLove.defaultOptions.js
...or you can edit MediaWiki:WikiLove.js on your wiki to change the items from the defaults. For example, if you wanted to change the image for the Original Barnstar, you would add a line like:

mw.loader.using( 'ext.wikiLove.defaultOptions', function() {
    $.wikiLoveOptions.types.barnstar.subtypes.original.image = 'Star icon.png';
} );

Instructions for more significant changes can be found at WikiLove#How_to_customize, while an explanation of all the properties that you can set can be found at Extension:WikiLove#Custom configuration. I would also recommend taking a look at some examples of custom WikiLove configurations already in use: Malayalam Wikipedia, English Wikipedia, Wikimedia Commons.

How do I add an additional type?

this is what I have:

//
  $.wikiLoveOptions.defaultBackgroundColor = '#151515';
  $.wikiLoveOptions.defaultBorderColor = '#FF0000';

// Medals

$.wikiloveOptions.types.medals = {
    name: 'Medals',
    select: 'Select a medal',
    subtypes: 'example'
};

$.wikiLoveOptions.types.medals.subtypes.example = {
    fields: [ 'header', 'message' ], // fields to ask for in form
    option: 'Example Medal', // option listed in the select list
    descr: 'This is an example medal.  Glory to the Emperor!',
    header: 'You have been awarded a medal, glorious adept of the Emperor', // header that appears at the top of the talk page post (optional)
    image: 'sternkreuz.png', // image for the item
    imageSize: '120px' // size to display image (optional)
};

//

I'm trying to add a section for medals.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

You have at least one typo that may be causing this:

$.wikiloveOptions.types.medals = {

The "l" should be capitalized:

$.wikiLoveOptions.types.medals = {

Thanks. How should I do subtypes?

Should it be

subtypes: { 'example' }

or

subtypes = { 'example' }

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

It turns out I had to define each of the subtypes within the code for the type, probably since it's a whole new series of them, and not an alteration to what already exists.

This post was posted by Lieutenant S. Reznov, but signed as Inquisitor Ehrenstein.

Excellent! Glad you figured it out. Could you update the documentation that Kaldari pointed you to with anything that you find?