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 examples 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;
   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;
}

#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;
}
.community_details {
        background-color: #efefff;
        border: 1px solid #9f9fff;
}

#page_bar {
   background-color: #dd0000;
}

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)

Or to illustrate where I'm seeing the text color issues... --Rosicrucian^Talk 22:44, 12 June 2008 (UTC)

File:Csswtf.jpg

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)

From Teletraan I: The Transformers Wiki, a Wikia wiki.