Topic on Project:Support desk

108.39.246.74 (talkcontribs)

Version information:

MediaWiki 1.23.6 PHP 5.4.16 (apache2handler) MariaDB 5.5.41-MariaDB

Wiki is hosted internally and not accessible from the WWW.

Question:

Can a text-based logo be used, and dressed up with CSS inside a div tag, or does MediaWiki require an image-based logo?

Thanks

Florianschmidtwelzow (talkcontribs)

The file set in $wgLogo has to be an image, it will be used as a source for an img tag. But you can simply chnage the skin you're using and add a function to handle whatever you want :)

88.130.99.71 (talkcontribs)

I think there might be an even easier solution: It is true that $wgLogo must point to an image file. But that must not be a JPG or a PNG file. I have not tested that, but it should also work with SVGs, where you can basically write your text into the image.

108.39.246.74 (talkcontribs)

I thought about SVG, but not really sure that makes sense if it's not going to scale. Size is set by pixels in CSS. I still think text would be sharper, but as I think it through, maybe not.

88.130.99.71 (talkcontribs)

I quickly made up this example SVG:

<svg height="135" width="135" style="background-color:green;">
  <text x="68" y="45" fill="red" text-anchor="middle" style="font-size:20px;">My Company</text>
  <text x="68" y="75" fill="red" text-anchor="middle">Name</text>
</svg>

Looks ugly, but proves the point: The text is perfectly sharp, it's centered and it can be edited easily.

108.39.246.74 (talkcontribs)

Can you go into a little more detail on modifying the skin? I'm not sure how to create a function, and not sure what files would be appropriate to modify... I am using the stock Vector skin.

Florianschmidtwelzow (talkcontribs)

First: You should fork Vector and create your own skin on top of it, even, if you "just" want to change the logo :)

Here you find the needed lines. The link with the class "mw-wiki-logo" will get the logo as he background-logo property in css. You now could simply remove the css class and add an your text into the a-tags, or change the class to a custom one and design the logo like you want or you completly remove the link and write down your own stuff.

Reply to "Text-based logo"