Topic on Skin talk:Chameleon

Hi,

I installed the chameleon theme along with the bootstrap extension and the amelia variables.less and bootstrap.less on my wiki. Everything seems to be working properly and I have succesfully managed to change some LESS variables in the localsettings.php. However, there are certain elements of the wiki which I don't seem to find. For instance, I would like to change the link color displayed on Special:SpecialPages which is white at the moment. Also, I would like the search bar at the top right corner to come slightly down.

I can't find the correct variable in the LESS files for this anywhere so I started diving deeper into my files. In '/domains/[name]/private_html/vendor/twitter/bootstrap/dist/css' I found bootstrap.css which has a style element that should fix the white text on SpecialPages. This is the code I found: a:hover, a:focus {

 color: #FFF;
 text-decoration: underline;

}

However, after changing the color to '#000' it did not change to black but remained white. What am I doing wrong? Did I change the wrong bootstrap.css? I tried it with several other 'bootstrap.csss aswell but none of them seem to work.

Changing that CSS will not have any effect, Chameleon uses the Less files directly (otherwise it would not be possible to change colors and stuff).

The variable you are looking for is @link-hover-color.

To add some margin at the top of the searchbar, create your own Less file (e.g. call it fixes.less) and put the following rule in it:

.p-search {
    margin-top: 2ex;
}

Add it the same way you add the amelia files, e.g. you should in the end have something like

$egChameleonExternalStyleModules = array(
    __DIR__ . '/amelia-variables.less' => $wgScriptPath,
    __DIR__ . '/amelia-bootswatch.less' => $wgScriptPath,
    __DIR__ . '/fixes.less' => $wgScriptPath,
);

It's working perfectly now! Thank you for the quick response and help.

Great work on the skin by the way. I love it.

Hey, I'm sorry to bother you again but there is something else I've been struggling with a bit lately,

I have a carousel on my mainpage but I find the gradient to be very ugly and want to remove this. I found this thread: http://stackoverflow.com/questions/20746461/how-do-you-remove-the-default-bootstrap-3-carousel-control-background-gradients

I have located this in the bootstrap.css. As you pointed out earlier, such fixes should be put into fixes.less, and that's why I put this in my fixes.less:

.carousel-control.left {
background: none !important;
filter: progid:none !important;
}
 
.carousel-control.right {
background: none !important;
filter: progid:none !important;
}

However, it doesn't work. How am I supposed to remove the Carousel gradient? Thank you for your time.

I never worked with the carousel, so the following may or may not work.

First, whenever you change a Less file you also need to change the LocalSettings.php. Chameleon caches the compiled styles because re-compiling on every page request is not feasible. To recognize that it needs to drop the cache and re-compile the Less files, the file modification time of LocalSettings.php needs to change. Just add an empty line somewhere and save. Then refresh the browser.

If that does not help, it might be that the CSS rule priorities prevent the application of your rules. you could try adding the following rule:

.carousel-control {
  &.left, &.right {
    #gradient > .horizontal(@start-percent: 0%; @end-percent: 0%);
  }
}

(Don't forget to re-save your LocalSettings.php again.)

Thank you very much! Entering the terminal and using the command 'touch LocalSettings.php' also did the job perfectly. You don't even have to enter a blank line for it.