Skin talk:Chameleon

Jump to navigation Jump to search

About this board

Make Chameleon compatible with MediaWiki 1.32.0

2
Dktue (talkcontribs)

TÜpedia ist uses the Chameleon-Skin and it looks awesome! Unfortunately it seems not to work with MediaWiki 1.32.0.

Do you have any plans to adapt it to MediaWiki 1.32.0?

F.trott (talkcontribs)

Yes, definitely. I have to look at what changed exactly, which may take a few weeks.

Reply to "Make Chameleon compatible with MediaWiki 1.32.0"

How to increase the screen size of my page?

3
Hirami to (talkcontribs)

Hi,

I used Chameleon skin. I want to set my page as full screen size.

How I can do that?


Thank you.

F.trott (talkcontribs)
Hirami to (talkcontribs)

It worked.


Reply to "How to increase the screen size of my page?"
MAzZYBiG (talkcontribs)

Hi all!

Please help me to change printable output in Chameleon skin.

I want to remove:

1) urls nearby images

2) pencil icon at the bottom of any page


Can't find this code.

Thank you

F.trott (talkcontribs)
MAzZYBiG (talkcontribs)

Can you say me where is this code? Exact files.

Thank you

F.trott (talkcontribs)

MediaWiki:Common.css is a page on the wiki. E.g. on MW.org it would be MediaWiki:Common.css. Additional style files you can put where ever you want on the server. The style files of Chameleon are in .../skins/chameleon/resources/styles. You should never change them directly.

MAzZYBiG (talkcontribs)

Thank you but I know about css.

Now I want to find out what php files generates this code.

F.trott (talkcontribs)

Styles are registered in chameleon/src/Hooks/SetupAfterCache.php

The generation of CSS is then handled by the Bootstrap extension. Registration of style modules is handled by Bootstrap/src/BootstrapManager.php, generation of the css is done by Bootstrap/src/ResourceLoaderBootstrapModule.php, starting from the getStyles() method.

MAzZYBiG (talkcontribs)

Please forget about styles and css.

I want to know how print page builds. It there any files responsible for that?

F.trott (talkcontribs)

There is no special PHP code for printing, just different styling. Chameleon defines print-specific styles in skins/chameleon/resources/styles/print.less, Bootstrap is defining some more styles in extensions/Bootstrap/resources/bootstrap/less/print.less. Finally and most importantly, MediaWiki itself is defining styles. Have a look at resources/Resources.php and search for modules defined for 'media' => 'print'.

MAzZYBiG (talkcontribs)

Ok

Thank you very much!

Reply to "Change print template"

How to set my <pre> whitout scrollbar?

2
177.182.201.84 (talkcontribs)

Hi,

On vector theme, <pre> not have scrollbar.... i like it :D

how to disable scrollbar on chameleon theme?


Thanks

F.trott (talkcontribs)
Reply to "How to set my <pre> whitout scrollbar?"
Loman87 (talkcontribs)

Hello,

sorry to bother again but I am having a minor issue that I am not able to solve by myself. After clicking on a page section title using the ToC, I am correctly linked to the section but the navbar overlaps the heading of the section and also the first line. How do I solve this? Here it is an example. I guess this is a really simple setting to adjust...

Thanks very much,

Lorenzo

F.trott (talkcontribs)

Unfortunately it is not at all simple. The navbar is a fixed element, i.e. it is removed from the normal document flow and shown at the top of the screen. When following the link to an anchor (e.g. the links in the TOC) the browser positions the linked element also at the top of the screen. I am not aware of any simple solution to the problem. https://github.com/twbs/bootstrap/issues/1768 has several approaches, but I'd have to think about how to fit them in a skin where the height of the navbar is not known and may even change depending on the screen size. https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033 seems to come close. Maybe you can use some variation of it on your page.

F.trott (talkcontribs)

This seems to do the trick for your page (and even seems to work on mobile devices):

.mw-headline[id]::before {
   display: block;
   content: " ";
   margin-top: -32px;
   height: 32px;
   visibility: hidden;
}
Loman87 (talkcontribs)

oh, I thought it was easier. Anyway your code works well for me (I have just edited the margin-top value), thanks very much! I had the same problem with references anchors and I solved using this (for those who are interested):

sup.reference[id]::before {
 display: inline-block;
 content: " ";
 margin-top: -65px;
 height: 65px;
 visibility: hidden;
}

Many thanks again!
Cheers,
Lorenzo

Reply to "Navbar overlaps section headings"
Loman87 (talkcontribs)

Hi,
is there any method to differentiate internal and external links in Chameleon? I am talking about the classical mediawiki icon .
Thanks for the help,
Lorenzo

F.trott (talkcontribs)

This probably worked out of the box in the beginning, but the skinning system was reworked a few years ago and now you have to add it explicitly.

You can add the necessary styles, either by adding them to your MediaWiki:Common.css or MediaWiki:Chameleon.css or by adding a Less file.

The following is taken from Vector:

.mw-body-content {

   .external {

      background-position: center right;
      background-repeat: no-repeat;

      background-image: url( 'images/external-link-ltr-icon.png' );
      background-image: linear-gradient( transparent, transparent ), /* @embed */ url( 'images/external-link-ltr-icon.svg' );
      // Do not serve SVG to Opera 12, bad rendering with border-radius or background-size (T87504)
      background-image: -o-linear-gradient( transparent, transparent ), url( 'images/external-link-ltr-icon.png' );

      padding-right: 13px;

   }
}

Of course, you will have to provide images/external-link-ltr-icon.png, images/external-link-ltr-icon.svg, images/external-link-rtl-icon.png, and images/external-link-rtl-icon.svg and correct the path to these images in your css.


Loman87 (talkcontribs)

That's great, thanks!

Reply to "External links"
Cavila (talkcontribs)

Hiya, I'm working with the latest Chameleon (1.7.1) on a MW 1.31 installation. The domain name is of the type "wiki.example.com". Unfortunately, I noticed that some javascript files are not loaded as the references to them are not resolving as expected:

https://wiki.example.com/var/www/vhosts/example.com/httpdocs/wiki.example.com/skins/chameleon/resources/js/sticky-kit/jquery.sticky-kit.js?

and similarly,

wiki.example.com/var/www/vhosts/example.com/httpdocs/wiki.example.com/skins/chameleon/resources/js/Components/Modifications/sticky.js?

...which is odd. Any idea?

F.trott (talkcontribs)

No idea, I'm afraid. Could be a misconfigured wiki, or some legal but unusual file layout, or just a genuine bug.

Reply to "javascript files not loaded"
WolfgangFahl (talkcontribs)

Chameleon is not for me. I am working with other wikis with e.g. the vector skin all day and only when I visit with the semantic mediawiki site I am confused by this skin. Things are not where they should be or are not there at all. E.g. edit buttons for sections or even the category link for a page. The sidebar is gone and ...

The viewers of the site might like the skin - since I rarely visit the site and mostly for contributing I'd like to use a different skin. Unfortunately the preferences seem to give me no choice. What can be done about this?

F.trott (talkcontribs)

Going to your preferences (Special:Preferences) you should be able to select whatever skin is installed and activated on the wiki in question.

WolfgangFahl (talkcontribs)
F.trott (talkcontribs)

Could be that there's just no other skin activated. I don't think that this is a Chameleon issue. Please check with the admin of the wiki.

Reply to "Switching to a non chameleon skin"

Main Menu ('sidebar') Font Customisation

5
62.96.213.62 (talkcontribs)

Hi! I am using the Chameleon skin wuth navhead.xml. I cannot establish which variables to use to modify the menu text eg Main Page and Help in the default installation. Hoping to change the colour and size. I have successfully changed the entire installation font family by modifying the CustomCSS mediawiki webpage but this does not seem to do anything for the navhead Chameleon menu...

F.trott (talkcontribs)

There is, as far as I can tell, no specific variable for the font used in the navbar. You will need to add some css or less code to change the font. For the color however there are several variables:

  • @navbar-default-link-color
  • @navbar-default-link-hover-color
  • @navbar-default-link-hover-bg
  • @navbar-default-link-active-color
  • @navbar-default-link-active-bg
  • @navbar-default-link-disabled-color
  • @navbar-default-link-disabled-bg

You can find their standard values at https://github.com/cmln/mw-bootstrap/blob/master/resources/bootstrap/less/variables.less#L367-L378

62.96.213.62 (talkcontribs)

Thank you! That is really helpful. Unfortunately, when I try to add a third variable to my existing array in LocalSettings.php, it crashes my wiki :( As soon as I comment it out, the wiki works again...

Any combination of variables causes the problem, so it is the length of the array not the actual variables... ?

$egChameleonExternalLessVariables = array(

        'navbar-default-bg' => 'rgba(255,255,255,1)',

        'navbar-default-border' => 'rgba(255,255,255,1)'

       

'navbar-default-link-color' => 'rgba(255,0,0,1)'

);

F.trott (talkcontribs)

Make sure it is syntactically correct. I don't know if it is the same in your LocalSettings.php, but in the example above a comma is missing.

If that's not the problem, turn on error reporting to hopefully get more information on what is causing the crash.

62.96.213.62 (talkcontribs)

F.trott - thank you so much!!! It was the missing comma. I cannot believe it.

Reply to "Main Menu ('sidebar') Font Customisation"

bootswatch cause "RuntimeException"

5
14.63.88.169 (talkcontribs)

Hi,

I just apply bootswatch's less files.

like follow:

$egChameleonExternalStyleModules = array(

__DIR__ . 'amelia_flatly_variables.less' => $wgScriptPath,

__DIR__ . 'amelia_flatly_bootswatch.less' => $wgScriptPath,

);

afte apply this to LocalSettings.php, It's cause the "RuntimeException"

Install chamelon by using composer. I think all components are successfully installed.

What do I do? I can't found any information about this at Google.

Thx.

F.trott (talkcontribs)

I have no idea. Do you have any more information, e.g. a file and line number?

178.199.61.84 (talkcontribs)

Exactly the same thing for me, I don't know where this error is logged....

Does someone know which component generate this error (for checking logs) ?

debian9 apache2 mariadb php7 mediawiki 1.27 last stable, skin chameleon working fine, but when I try to load something beginning with $egChameleon --> "Exception encountered, of type "RuntimeException"" on all webpages loaded,

F.trott (talkcontribs)
2605:E000:1316:C0F1:4477:BEDB:7D58:22A2 (talkcontribs)

Works fine for me on MW=v1.29, Nginx=v1.13.9, PHP=v7.0.1, Ubuntu=v16.04

However, since this latest update from bootstrap via composer, fk'd up my glyphicons, so it MAY be related?

Chameleon=v1.6 & Bootstrap=v1.2.3

Reply to "bootswatch cause "RuntimeException""