MediaWiki talk:AdminSkin

Uhh... light blue and gunky brown? - SanityOrMadness 04:05, 30 April 2008 (UTC)

I'm just glad I made the PNG well enough that I don't have to worry while they experiment... --Rosicrucian^Talk 04:15, 30 April 2008 (UTC)

Yeah, I'm not digging it either. Maybe we could do up a theme of our own if none of the options available really work. It wouldn't be that hard. --Suki Brits 05:33, 30 April 2008 (UTC)

Toughpigs has voiced willingness to help cook up a custom Monaco theme if we want. Could even have a background image for the top bar akin to Wookieepedia or Stargate. Personally I'm less concerned with the color scheme and more hoping we can nail down a good layout for the sidebar menus soon.--Rosicrucian^Talk 05:47, 30 April 2008 (UTC)

And I should mention that he thinks he may be able to find a way to put the random character thumbnail in there somewhere. Not sure how far he got on that, though.--Rosicrucian^Talk 05:50, 30 April 2008 (UTC)

If we do that, can we do it completely differently? Having it force down the searchbox while I'm trying to click on it was really really annoying, and having "search" printed on it is misleading anyway. --ItsWalky 17:39, 30 April 2008 (UTC)

Yeah, if you want, I can definitely help with a custom Monaco skin... Or, more accurately, I can ask Scott to help with it, cause he's better at it than I am.

There's instructions on this page: Monaco Skin Customization. It's all done through adding bits of code to MediaWiki:Monaco.css. Changing the colors is really easy -- you just find the right bit of .css code, and swap in the color that you want. (I use this page to find color codes.)

There's two tricky bits. To change the color of the Wikia logo and the drop-down menus in the top header, you need to upload those as .png files. There are some sample logos and menu headers here, or you can make your own. The other tricky bit is making the background strip behind the logo.

Here are some eamples of customized Monaco skins, if you want some ideas: Wookieepedia, Marvel Database, DC Database, Stargate Wiki, FFXIclopedia, Marvel Movies, and Speed Racer.

If you want help with the customization, just let me know what you'd like it to look like. Or just go ahead and play with it.

I asked Christian about the random character thumbnail -- he's the widget designer. I'll let you know what I hear from him. Meanwhile, there's another widget that you might find interesting -- the Image Slideshow.

• 
• 
• 

It's a widget that appears in the sidebar that displays images. You can set it to show the most recent images, random images from the site, or images that pull from a list that you can create. You can set it to run as a slideshow, scroll through it, or pause it.

I haven't used that widget yet, so there's a few things that I don't know. It may actually be possible to use that (or modify it) to be the random character thumbnail. If we can set it as the default for all visitors on this wiki, default it to pull from the list that you create, and set it to send people to the article instead of the image page when you click on it... then that's exactly what you guys want. I'll check to see how it all works. -- Danny<staff /> (talk) 17:21, 30 April 2008 (UTC)

I can remove the "SEARCH" from those random character images easily enough, since it's all one PSD file anyway. I was mostly follwoing Wookieepedia's lead there. If we're on the subject of customizing it... well, what's the max width? I could see it taking up maybe half again as much vertical space as well for a little more visibility, and instead of "SEARCH" have, say, "GO!" to the right. --M Sipher 18:22, 30 April 2008 (UTC)

Any progress on tweaking the color scheme or skin? I for one don't mind the blue so much, but maybe we could replace the sandy color with red (white text, probably). Maybe tweak the blues so they're shades of the same blue in the TFA logo and thus they don't clash.--Rosicrucian^Talk 16:10, 6 May 2008 (UTC)

And after toying around with some of the default schemes, I didn't like how the Autobot symbol looked on them so I altered it slightly. The PNG should now be boffo with just about any dang scheme.--Rosicrucian^Talk 16:26, 6 May 2008 (UTC)

So...

So, no moves towards a better colour scheme? - SanityOrMadness 01:07, 16 May 2008 (UTC)

After looking at the TFA packaging, I've made this:

Now, the Monaco customization page says if we were to implement this, it would be the following added to the CSS:

#background_strip {
   background-color: white;
}

#accent_graphic1 {
   background-image: url(http://images.wikia.com/transformers/images/6/6b/TFA_style_ziptone_bg.gif);
   height: 155px;
   width: 300px;
}

If we were to use that as the top strip, and somehow get rid of the sandy colors and the brown, I'd say we'd be doing pretty well.--Rosicrucian^Talk 16:29, 12 June 2008 (UTC)

Strip's going now, remember... - SanityOrMadness 16:41, 12 June 2008 (UTC)

Well, the wide masthead is going. The design document states the background strip will still be available for further customization. Personally I'd love it if we emulated TFA's packaging a little more. It's got a pretty clean look, and it's based around a white background. Perfect for our needs in that the admins don't want things looking too busy.--Rosicrucian^Talk 17:19, 12 June 2008 (UTC)

• puts the code in his wikia css file*

Huh, that doesn't look half bad. it's hard to see what it'd look like on our site though. Um... *noodlesin photoshop*

there! Something like this. -Derik 17:57, 12 June 2008 (UTC)

Ah keen, glad to see it works out well. That's almost exactly what I was aiming for.--Rosicrucian^Talk 18:04, 12 June 2008 (UTC)

Hi -- I don't want to butt in, just to clarify if you need it. The background strip will still be there, but most of it will be hidden behind the edit bar and the article area. You can see how it works on Communitytest -- that logo is transparent, and then the white behind it is the background strip.

There's some css trickery that'll allow you to move the article space back down, to reveal the background strip. But that means you lose some article space, so it's up to you guys how you want to handle it. Let me know if you want to know the details -- I don't know how to do it myself, but I could find out. -- Danny<staff /> (talk) 18:07, 12 June 2008 (UTC)

Yes, thank you Danny, we have actually ported that test over to our wikia global.css files to see it on communitytest. -Derik 18:16, 12 June 2008 (UTC)

Well, this one's designed to be mostly white space with some accent color. Very much intended to look good in both Monaco-1 and Monaco-2.--Rosicrucian^Talk 18:15, 12 June 2008 (UTC)

Playing with the color scheme.

Toyed with the customization suggestions a bit more, and so far this seems to work quite well:

.color1, .color1 a {
   background-color: darkblue;
   color:            White;
}

.color2 {
   background-color: #000077;
}

#wikia_header {
	border-color: #FFF;
	color: #FFF;
}
#wikia_header {
   background-color: darkblue;
   background: url(http://images.wikia.com/transformers/images/f/fe/Allsparkstripblue.gif) bottom left repeat-x;
   border-color:     white;
}
#header_username a {
	color: white;
}
.headerMenuButton dt, .headerMenuButton dd {
	background-image: url(http://images.wikia.com/help/images//d/dc/Whiteheaderbutton.png);
}
* html .headerMenuButton dt, * html .headerMenuButton dd  {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.wikia.com/help/images//d/dc/Whiteheaderbutton.png', sizingMethod='crop');
}
.headerMenu, .headerMenu a {
   background-color: white;
   color:            black;
   -moz-opacity:     .95;
   opacity:          .95;
}
#wikia_logo {
	background-image: url(http://images.wikia.com/help/images//b/b2/Whitelogo.png);
}
* html #wikia_logo {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.wikia.com/help/images//b/b2/Whitelogo.png', sizingMethod='crop');
}

#background_strip {
   background-color: white;
}

#accent_graphic1 {
   background-image: url(http://images.wikia.com/transformers/images/6/6b/TFA_style_ziptone_bg.gif);
   height: 155px;
   width: 300px;
}
#search_box {
   background-color: darkblue;
   background: url(http://images.wikia.com/transformers/images/f/fe/Allsparkstripblue.gif) bottom left repeat-x;
}

#search_button {
   background-image: url(http://images.wikia.com/transformers/images/a/ad/Ancient_autobot_search_button.png);
}
* html #search_button {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://images.wikia.com/transformers/images/a/ad/Ancient_autobot_search_button.png', sizingMethod='crop');
}

#link_box {
   background-color: #efefff;
   color: black;
}

.widget dt {
   color: white;
   background-color: darkblue;
   background: url(http://images.wikia.com/transformers/images/f/fe/Allsparkstripblue.gif) bottom left repeat-x;
}
.community_details {
        background-color: #efefff;
        border: 1px solid #9f9fff;
}

#page_bar {
   background-color: #dd0000;   
   background: url(http://images.wikia.com/transformers/images/5/5c/Allsparkstripred.gif) bottom left repeat-x;
}

Thoughts? This is of course in keeping with the background strip above.--Rosicrucian^Talk 19:20, 12 June 2008 (UTC)

Too bright. I liked the subdued Dirge-themed color scheme. It was relaxing.

(For anyone playing along, just copy the code Rodicrucian is proposing to you User:Derik/monaco.css user CSS page, then you can see what it would look like!) -Derik 20:24, 12 June 2008 (UTC)

Fair enough. I tried to keep the blues a bit darker, but I'm still emulating TFA packaging for the most part.--Rosicrucian^Talk 20:36, 12 June 2008 (UTC)

I thought the Dirge colors were intentional. Perhaps we shouldn't choose a design aesthetic whose purpose is to "jump off the shell and scream 'buy me'"? -Derik 20:38, 12 June 2008 (UTC)

Nah. Walky picked that out of the blue one day after we were initially on Monaco Sapphire, and then everyone complained about the sandy bits and brown bits. Is it the reds that are too bright? Because that's easy to tone down.--Rosicrucian^Talk 20:47, 12 June 2008 (UTC)

Some of the sandy text is a bit stubborn, and the documentation is not too forthcoming on what governs it. The background blue still clashes with everything else, which bugs the snot out of me. Going all the way from red to darkred on the page bar seems a bit too dark, so I'm trying some shade in between. Should have a screenie of my latest mockup soon.--Rosicrucian^Talk 21:22, 12 June 2008 (UTC)

Hmm. #dd0000 is looking like a happy medium.--Rosicrucian^Talk 21:29, 12 June 2008 (UTC)

#d0000d is a hilarious hex value. I recommend it.

...and Runamuck would be all- "Man, I got so hammered last night... I can't even find my car!" And Runabout would be all like- "#d0000d, you are your car!" -Derik 21:35, 12 June 2008 (UTC)

Aha! They're defining the background background as color2 rather than any sort of useful or intuitive name. Nearly there...--Rosicrucian^Talk 21:43, 12 June 2008 (UTC)

Oh, that is extra stupid. If you set color2 too dark, latest activity is unreadable. If you set it too light, the Wikia text at the bottom is unreadable. One section uses black text, the other white, it's all higgledy-piggledy.--Rosicrucian^Talk 21:50, 12 June 2008 (UTC)

The conclusion I'm coming to is that there appear to be a sparse few settings that are determined solely by the skin you are modding off of, which are prominent enough to be fairly annoying. Either that or the documentation is woefully incomplete.--Rosicrucian^Talk 21:56, 12 June 2008 (UTC)

*previews* Still too high-contrast. It's stressful on the eyes. What areas are you stuck in setting the colors of? Title text on the left collumn? -Derik 22:17, 12 June 2008 (UTC)

The sticking points are pretty much artifacts of whatever the underlying modded skin is:

• Username on Wikia header
• Header titles on sidebar boxes (Community, Wikia Spotlight, Languages, Related Communities)
• The Wikia footer

Any clues?--Rosicrucian^Talk 22:21, 12 June 2008 (UTC)

Alright, I have just beat the everloving snot out of Wookieepedia's Monaco.css, and come up with something I'm mostly pleased with. The titles on the sidebar are still eluding me, but I figured out how to color the latest activity box separately from color2, and that solved the issue of the footer. The header's username now looks very happy indeed. I think this is almost ready for primetime so criticism is welcome.--Rosicrucian^Talk 00:14, 13 June 2008 (UTC)

Aha! Success! The above code now produces the below picture.--Rosicrucian^Talk 00:41, 13 June 2008 (UTC)

*tests here &@ communitytest*

The red-on white dottiness feels a bit... clobbery on the eyes, in all honesty. The navy's better than the beach shade of blue, but although I didn't like the dark beige, the dark red vs. white feels harsh. - SanityOrMadness 01:06, 13 June 2008 (UTC)

I dunno. I guess to a certain degree I did straightjacket myself a bit with the color scheme and what I was aiming for. The ziptone wipe is meant to just be accent color, and I did tone down the red page bar a bit, but if it was too light it looked a bit garish and if it was too dark it didn't look truly red. I kind of felt like I needed some red in there to keep the blue from taking over.--Rosicrucian^Talk 03:04, 13 June 2008 (UTC)

I really like that RW&B, personally. It feels TFey. --Sntint 03:28, 13 June 2008 (UTC)

So where's this documentation of the skin controls you mention? It seems like a fun starting point.

I started at Customizing Monaco and found it to gloss over some of the details, though it's great for simple mods. From there I browsed Examples of customized Monaco skins which took me the rest of the way after I figured out how Wookieepedia's was put together (after some frustration). By the by, the code above now also alters the search box's icon.--Rosicrucian^Talk 03:23, 13 June 2008 (UTC)

I have to say, I'm rather fond of the way this elf guy's head break the bar on top. here -Derik 03:31, 13 June 2008 (UTC)

Certainly agree, but I avoided tweaking to that level because you just know the admin of that wiki is going to be crying bitter bitter man-tears come the 17th when the skin changes.--Rosicrucian^Talk 03:37, 13 June 2008 (UTC)

For display purposes, I've ported the above code to Monaco 2 for a spin.--Rosicrucian^Talk 14:43, 13 June 2008 (UTC)

I overloaded what I see when I test your code there (with the Wiki.png with Image:Teletraan corner.png from here). Note the way the edges of the zip clash with the logo, and that the links in the top bar are mostly illegible (they're okay here on the Monaco v1). [The split down the middle is just to remove redundant stuff.]

And I still don't like the red vs. white. - SanityOrMadness 15:32, 13 June 2008 (UTC)

I ran into that too. It's because the Wikia test box defaults to "Sapphire," while ours defaults to "Beach." If you undo the "admins override skin preference" and toggle to Monaco "Beach," it should display correctly.--Rosicrucian^Talk 15:34, 13 June 2008 (UTC)

Okay, Beach DOES leave the top bar legible (it's easier just to use Preview than to overwrite the defaults, BTW). The other stuff, naturally, still stands. - SanityOrMadness 15:37, 13 June 2008 (UTC)

I really wish there was a way to fully left-justify the logo (or even just the Teletraan console) without any margins. It'd make it work a lot better. Any ideas? Derik?--Rosicrucian^Talk 15:43, 13 June 2008 (UTC)

Tried to do it by separating out the console, but apparently transparency is not preserved the way the accent images are layered.--Rosicrucian^Talk 16:06, 13 June 2008 (UTC)

DVD scheme?

ideas?

Just looking at the back cover of the T&RO DVD (see right) . I think it looks good and I'd like to see that scheme tried out, with the red curve and shades of blue... - SanityOrMadness 15:41, 13 June 2008 (UTC)

Hmm. Could work. I'd pondered a bit of that as there is a good deal of light blue on TFA packaging too. I'd initially tried the ziptone dots because the toy packages are covered in 'em. There's a fairly decent light blue Detroit cityscape featured in the packaging that seemed like fun too.--Rosicrucian^Talk 15:48, 13 June 2008 (UTC)

Testing on Monaco2...

Uploaded an image to test the colour scheme (the blue area's just a deliberately-faded version of a random image I had lying around), and I quite like it. It softens everything out a whole lot, and the gradiented red fits a lot better with the other reds hanging around, like the Edit/History/etc bar colouring.

Image itself is at Image:TFWiki_top_test.png, CSS to test it is:

#accent_graphic1 {
   background-image: url(http://images.wikia.com/transformers/images/d/dc/TFWiki_top_test.png);
   height: 158px;
   width: 1023px;
}

In place of the equivalent #accent_graphic1 section from Ros' version, and

#wiki_logo{
background-image: url(http://images.wikia.com/transformers/images/b/b6/Teletraan_corner.png) !important
}

to force Image:Teletraan_corner.png for use as the logo. - SanityOrMadness 17:58, 13 June 2008 (UTC)

Derik's test

I experimented with using this hiorzontal pan of Cybertron's landscape to see what it'd look like as a page background. And I've concluded that there's just not enough vertical landscape to play with unless we want to push the article window back down to where it is now. (And I don't thing we do, the higher article-- displaying more of the content above the fold- is the only nice thing in MOnaco 2.0.) You can see the results of my experiments here (Still kidna fugly with some test colors, but whatever.)

I think that we might have /more/ success playing with the vertical space on the left. I think it's be /very/ possible to make the widget bar on the left partially transparent without becoming distractignf or those who want to access the controls. Maybe doing something using this image.

(These kidna backgrounds are very... old-fashioned style, but there's so little space for us to /work/ with in the new layout- and the controls are so visually dense, that I don't see a lot of options.)

Oh, and the color on any and everything can be changed. Often on individual elements. (all the orange headerbars could be 12 different colros if you liked- or a background image, or... ) Not a problem.-Derik 04:59, 13 June 2008 (UTC)

Definitely pretty dang awesome if it can be accomplished in Monaco 2.0. I'm just not seeing where the normal Monaco elements (Wikia logo, menu box) go.--Rosicrucian^Talk 14:01, 13 June 2008 (UTC)

Eh? That is Monaco 209. at least the HTML code is. The wikia box just disappeared because Iw as fiddlin with stuff. All the changes are laid on top of it by an external CSS file that I wrote, that loads in the same 'order' as the one we get to set. That.. is completely do-able. -Derik 13:48, 14 June 2008 (UTC)

Mockup #2

A photoshop mockup this time, having proven to myself what's possible. Take a look!

This isn't even ambitious. If this was a fantasy site- well- it'd be pretty easy to make all the windows look like parchment scrolls, complete with weathered edges. I'm just at a loss for what kind of perturbation edge makes SENSE for this wiki. -Derik 13:48, 14 June 2008 (UTC)

Ooh, allsparky. I might suggest taking a page from Sanityormadness above and coming up with a repeating background in light blue of the allspark pattern.

Incidentally I have all my source images at better resolutions (and with layers) if you'd like to play around. Can't upload the PSDs right now as I'm at work, but I'd be more than happy to plunk 'em someplace public when I get home. Of course, the Teletraan console bank isn't that hard to reproduce as it was just colorizing the nice high resolution one we have on its article here.--Rosicrucian^Talk 13:54, 14 June 2008 (UTC)

*confused* You mean like this?

I'd need your original if it was a final- but it's a mockup so I don't mind if the logo is a bit messy. -Derik 14:11, 14 June 2008 (UTC)

Actually, I more meant the movie allspark texture on the top bar, to tie it in better. Or perhaps the same for the light blue background with the red bit. Just the color scheme doesn't quite seem unified with the allspark being in its natural color, which is the same reason I ended up colorizing the Teletraan console. It also does kind of bug me that there's an obvious seam on the allspark pattern, so perhaps blending it into itself would alleviate that, and colorizing it and flattening it a little would likewise make it not as obvious. The relief is a little too deep for a neutral element like the Wikia header bar.--Rosicrucian^Talk 14:27, 14 June 2008 (UTC)

Oh, you want a blue Allspark pattern. That can be done. What blue, the same as the TT1 console in the logo? (I'm not worrying about a clean tile at this point since it's a mockup, a final would obviously have to title politely.) -Derik 14:38, 14 June 2008 (UTC)

Might work. Depends on text contrast, I suppose. Presently nearly all the Wikia header text is illegible, which is why I was saying the relief was a bit too deep, as it makes picking a text color with enough contrast tricky.--Rosicrucian^Talk 14:41, 14 June 2008 (UTC)

I'm not terribly worried about that, I mean- you can enclose it in a box or something if that' becomes an issue. Version 3? -Derik 14:57, 14 June 2008 (UTC)

You know, I'm not fond of the faded-back texture, what about boxes? Version 4? -Derik 15:10, 14 June 2008 (UTC)

I dunno. The admins seem to have placed a fair bit of emphasis on keeping the skin fairly clean looking. We might be getting too busy here. Textures are alright, but if a texture is too deep it gets a bit distracting. I may play a bit with a simplified version of the allspark texture when I get home and have access to a graphics editor other than MSPaint.--Rosicrucian^Talk 15:59, 14 June 2008 (UTC)

And allspark is fighting witht he clean lines of the Animate-style logo, I agree.

It's not a lot of space to play with I'd be interested in, um... maybe the silhouettes of TF characters? (Like US#1 when they all stand and watch Sky-spy's report.) Silhouettes can remain VERY identifiable even when small (Heavy Metal War does TINY icons of 'em) and they're still readable even if it's gray-on-gray. Plus clean. -Derik 16:09, 14 June 2008 (UTC)

Like I said, I've got some ideas but it's getting hard to express them so I'll churn out some stuff this afternoon. Shift's almost over here so soon I'll be able to focus on this without needing to placate customers who come to me with inane technical problems. I'm probably going to simplify/halftone the snot out of the allspark pattern and see if I can't get it into a two-color dealie that will fit the scheme a bit better.--Rosicrucian^Talk 16:17, 14 June 2008 (UTC)

And after a short search, this certainly seems useful.--Rosicrucian^Talk 16:25, 14 June 2008 (UTC)

And I've finally done what I said I would. The product of my labors are the two textures Allsparkstripblue.gif and Allsparkstripred.gif, which I have already introduced into the code sample I included above. I think they're much less distracting like this, and the images are pared down to only ten colors, so they load extra-fast.--Rosicrucian^Talk 22:18, 14 June 2008 (UTC)

The blue one works better than the red, by far. I don't know if the contrast is too high on the red, or where its' used (notably, the blue is used against bold, and in more out-of-the-way places), but it feels "busier" than the blue, and the text behind it is harder to read. - SanityOrMadness 22:32, 14 June 2008 (UTC)

I really don't like the Movie All Spark texture as a dominating theme - it doesn't shorthand to "Transformers" at all for me. More thoughts later - SanityOrMadness 19:48, 14 June 2008 (UTC)