Teletraan I: The Transformers Wiki
Teletraan I: The Transformers Wiki

Colour scheme

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... --RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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 (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.--RosicrucianTalk 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.--RosicrucianTalk 16:26, 6 May 2008 (UTC)


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:

TFA style ziptone bg.gif

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(;
   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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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 (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.--RosicrucianTalk 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( bottom left repeat-x;
   border-color:     white;
#header_username a {
	color: white;
.headerMenuButton dt, .headerMenuButton dd {
	background-image: url(;
* html .headerMenuButton dt, * html .headerMenuButton dd  {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop');
.headerMenu, .headerMenu a {
   background-color: white;
   color:            black;
   -moz-opacity:     .95;
   opacity:          .95;
#wikia_logo {
	background-image: url(;
* html #wikia_logo {
	background-image: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop');

#background_strip {
   background-color: white;

#accent_graphic1 {
   background-image: url(;
   height: 155px;
   width: 300px;

background-image: url( !important

#search_box {
   background-color: darkblue;
   background: url( bottom left repeat-x;

#search_button {
   background-image: url(;
* html #search_button {
   background-image: none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod='crop');

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

.widget dt {
   color: white;
   background-color: darkblue;
   background: url( bottom left repeat-x;
.community_details {
        background-color: #efefff;
        border: 1px solid #9f9fff;

#page_bar {
   background-color: #dd0000;   
   background: url( bottom left repeat-x;

Thoughts? This is of course in keeping with the background strip above.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 21:22, 12 June 2008 (UTC)
Hmm. #dd0000 is looking like a happy medium.--RosicrucianTalk 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...--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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?--RosicrucianTalk 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.--RosicrucianTalk 00:14, 13 June 2008 (UTC)

Aha! Success! The above code now produces the below picture.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 03:37, 13 June 2008 (UTC)

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

Tfa skin monaco2.jpg

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.--RosicrucianTalk 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?--RosicrucianTalk 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.--RosicrucianTalk 16:06, 13 June 2008 (UTC)

DVD scheme?


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.--RosicrucianTalk 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(;
   height: 158px;
   width: 1023px;
In place of the equivalent #accent_graphic1 section from Ros' version, and
background-image: url( !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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 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.--RosicrucianTalk 16:17, 14 June 2008 (UTC)
And after a short search, this certainly seems useful.--RosicrucianTalk 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.--RosicrucianTalk 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)

Monaco 2.0 Rolled out

Now that the new look is officially rolled out and we get a see what ti actually feels like... I want to replace the square logo Wiki seems to be suggesting with our old rectangular one, just scaled to fit. The toolbar feels weird that far down. -Derik 10:19, 17 June 2008 (UTC)

Code sample:
background:url( no-repeat;





(Logo isn't clickable here- we'll have to upload over wiki.png for that.)

Thoughts? -Derik 11:03, 17 June 2008 (UTC)

Background Strip

Since there's no way to absolute position wiki.png, two background strip proposals are below. Both are rather optimized for quick load time.--RosicrucianTalk 14:22, 17 June 2008 (UTC)

Ziptone with console.gif Swoosh with console.gif

And of course this is all rendered somewhat moot now. Nice idea while it lasted. Then again, I suppose I can learn how to mod Monobook.--RosicrucianTalk 20:12, 17 June 2008 (UTC)
Er- there's not? -Derik 20:45, 17 June 2008 (UTC)
Remember that any odd-shaped Wiki.png will affect people who override their settings to use Monobook for as long as it lasts... - SanityOrMadness 20:52, 17 June 2008 (UTC)
Derik: Ah, saw that. Still, my workaround turned out a bit more elegant I think. For me, at least. It's above if you wanna try it. Otherwise, I'm not worried. I'm boning up on Wikipedia's documentation on skinning Monobook now.--RosicrucianTalk 20:54, 17 June 2008 (UTC)
Of course, global CSS changes make modders sad.--RosicrucianTalk 21:34, 17 June 2008 (UTC)
And Wikia has modified it's global css file no fewer than 3 times today. (Fixing display bugs in obscure circumstances). They've actually changed the entire way the page files are floated. I think they've reached maturity, but if the Monaco page structure whangs out... well, nothing should be offset enough to inhibit functionality. We can revert and fix.
Hey Rosicrucian- have you figured out where Monaco-only css changes go? monaco.css doesn't work. Everything seems to have to go in common.css, which is also loaded for monobook. (It doesn't matter much, they use different ID structures, but I want to know how to direct changes just at Monaco.)
Also, if you work up a nu-style logo in Monobook's width (change the skin in your prefs,) I'll work out make the CSS changes to make it work.
My next project, (should take ~30 minutes,) is the creation of a 'Monaco 2.0 testbed' file. Basically a HTML rip of an example page you can test css interactions with on your hard drive- much faster. -Derik 22:16, 17 June 2008 (UTC)
Well, all my above modding is based off of other wikia wikis' monaco.css file. So I thought that's where Monaco-only stuff went, because that was how Wookieepedia etc. did it. As for future mods, I'm probably just going to cool my heels until I know which skinbase I'm coding for. I'm likely just giving myself headaches trying to get a stable skin while other folks are still tinkering. I do have some Monobook tinkering I'm working on, but I think I'll just keep my head down and save discussion on that for after the eventual migration.--RosicrucianTalk 22:23, 17 June 2008 (UTC)
What wiki's Monaco.css files? Got an example? (It's been a source of continual bafflement for me that we don't seem to load a Monaco.css file. Especialyl since that's where monorail Guy dumped our code and expected it to work. I'm open to the possibility that something is Screwed Up, but if that's the case it ought to get Fixed.) -Derik 23:25, 17 June 2008 (UTC)
My first successful build was based wholecloth off of Wookieepedia's monaco.css, and went from there. I literally copy/pasted the thing to my local Teletraan file and started changing stuff until I got the code above.--RosicrucianTalk 23:32, 17 June 2008 (UTC)
Yeah, but if you look at the HTML- where wookiepedia loads a copy of monaco.css off of their own server- they load the copy they csn edit- we load a copy we can't edit off (Specifically the 'beach' sub-profile.)
Maybe you can't customize once you choose the sub-skin Beach. Maybe we have to be set up as vanilla Monaco for it to load our monaco.css file, or as customizable or something. But equally likely, maybe something is Screwed Up.
I also remember reading somewhere that 'all of monaco.css has migrated to common.css' (or was that the .js's?) And really- Wookiepedia isn't a good example. They're big enough that they have custom code and their setup may not be representational. (The big wikis didn't convert right away because their under-the-hood base was different from most other wikias.) -Derik 23:46, 17 June 2008 (UTC)
Hard to say. Their customization wasn't even as extensive as, say, WoWWiki's. I do know that what I copied over was solely interface elements. They may have other customizations in their other CSS files.--RosicrucianTalk 00:01, 18 June 2008 (UTC)

Emulating package design

I'm not fond of the TFA skin Rosicrucian has been puttering with, the colors are bright and eye-catching, but it also makes it tiresome to read in the long term.

More to the point, the problem is... it still looks like crappy-ass Monaco in different colors. Wikia's "hey check out these rad skin customization under Monaco!" page... all look exactly like Monaco in different colors. Maybe with an accent graphic thrown in.

Wookiepedia used to have a very unified, elegant look that extended from their skin to their templates and internal iconography. Now they have... a tiny star destroyer in the black bar on top. And their site looks like Monaco. Monaco's design looks nice in many colors- but nothing you do to those colors will ever make it not look like Monaco.

I wanna move the discussion away from "what values in Monaco can we tweak?" to "What do we want our site to look like?" Pretend you didn't have monaco- pretend you could implement your own skin. What would we want it to look like? What /does/ "Transformers" look like? What says or feels like Transformers?

In my experience, ~98% of what you can imagine like that can actually be implemented. So start with the horizon, find something you love, and then let's talk about implementation. Dont' start with Monaco- it's a big box and a toolbar covering 95% of the window. There IS nothing to customize in Monaco except the logo. Let's think bigger. (This has the added merit of not confining us to Monaco's worldview if we switch servers. Let's top talking Monaco and start talking design.)

So, um, I guess throwing elements up on the 'mood board,' I like TF movie packaging.

  • Tf Movie packaging. If not in that specific look... I think it has several worthwhile elements to it.
    • I like the surviness to it, and the edges that are not straight- but also not just jaggy- they are not-straight-with-purpose. They feel sci-fi in a good, happy way, and the little odd-shaped peekaboos breaking up the viewing bubble are a lot of fun. I think the missing corner when viewed from the back is a happy design element, it feels like a place you hold that's not pointy, like the bottom corner of a PADD or PDA. I like the current 'power dots' method of displaying tech-specs (I'm not sure where we'd use that, but the mechanism itself is easy- we have one on the front page for stars.) The faux 'glossy plate' Exac's bio is presented on it a neat design element- it makes me think of the clear plastic windows of the boxes and bubbles. I think the bottom-right corner's "Also available" element with the \___ shaped accent snuggling the text would be a good starting place for redesigning our message box templates to actually be something other than just boxes. (Maybe use the same sort of element, but in Teletraan-orange instead of red?) And I think the right edge, with those rounded openings, might be an interesting starting place for redesigning our sidebar. (turned 90 degrees, of course.)

-Derik 15:42, 20 June 2008 (UTC)

The problem with saying "this looks/feels like Transformers" for me... is that there is NOTHING about Transformers which has remained visually constant through its' twenty years. I can think of five major logos and variations thereof immediately (The "classic" logo [tweaked for the movie], the late-G1 logo as seen on the latter Marvel G1 issues, the G2 logo, the Armada-era logo, and the TFAnimated logo - not counting BW & BM, which relegated the word "Transformers" to a tiny subtitle). No design element in the major character design (even Optimus' windows & mouthplate), etc, etc. Solid colours in G1 & Animated, cartoony-CGI grading in BW/BM, a rather subdued palette for the movie... With that level of inconsistency comes a difficulty in saying "yup, that's IT."
Actually -- that DOES bring up something I'd like to see, but I don't think could be implemented* (even without the Monaco straitjacket) - partially for technical reasons, but mostly because I think there would be... resistance to the idea: Era-specific design. By which I mean, the G1 characters would have their pages designed to a G1 style. The BW/BM characters would have their pages designed to a BW/BM style (and so on, for UT, Movie, etc - with a generic "everything" fallback for pages that fall outside that, like the con-exclusive characters, I suppose)
(* - well. maybe with a MAJOR change to the article naming schema, to go from XXX (G1) to namespacing them (eg G1:XXX) - but, again, I'm fairly sure there wouldn't be support for that, and there'd be a hellvalot of (bot)work to implement it).
- SanityOrMadness 23:14, 20 June 2008 (UTC)
One of the things I think I realized towards the end of my design process is that it's darn hard to get most of the wiki interested in this when they're still stinging from the lousiness of the ad situation. So I think it's going to be hard to reach consensus on this for now, until the situation of the ads and possible move is settled. Not only will that get us a stable CSS codebase to base our work from, it will free up the headspace of the userbase once the ad angst is no longer hanging over us. I can certainly acknowledge that Monaco itself was the sow's ear I tried to make a silk purse from, and it may well be that if we run our own server we can offer several custom skin choices from different eras. It'd be a little schizophrenic to have it automatically change based off of character continuity (not to mention I don't have clue one as to how we'd go about it) but it'd be pretty keen to offer a few choices.--RosicrucianTalk 23:43, 20 June 2008 (UTC)
I am very much in support of making franchise-specific designs. Maybe not huge variations between them, but enough so you can tell at a glance what "era" the page is talking about. Reason being, I got in a debate a while back about our section-headers, which I think are currently too vague. It's very common to see sections like "DW comics continuity," which is technically wrong - there is no one DW comics continuity. When I make my headers more correctly specific (Like "DW Generation 1 comics"), they tend to get changed to the vague version, the argument being, "The continuity note at the top has already told the reader that we're talking about G1." But the problem is, where the headers are big and bold and dominant, the continuity note is like a polite cough. I, as a reader who should know better, still have to make myself notice it. So if our new design could blow the continuity-note out into an element as dominant or more so than the headers, I think we would be communicating our information much better. - Jackpot 17:45, 10 July 2008 (UTC)

Monaco 2.0 Testbed file

To make your life easier: Monaco 2.0 Testbed

contents: A strategically 'broken' Monaco 2.0 page with various internal css fixes to load mostly-locally. (it actually loads several files by remove, but let us not dither.)
Purpose: Rapid css prototyping. Edit testbed.css. It loads in the same 'priority' as a user css file. (Translation: last.) By refreshing the relevant HTML file in your browser you can see the affect your css changes have on site layout in realtime, without hammering the recentchanges page with your monaco.css changes. You may find it useful to sniff through the html file at the same time. Being able to edit both files makes sussing out tricky inheritance questions much easier.A Derik Smith joint. -Derik 23:25, 17 June 2008 (UTC)

Template/UI concept + proposal

I have a concept for milestone-markers in a fiction section over at Template:Mort. You'll need to install the CSS changes to make it work.

This is kinda a proof of concept piece, I think it might be more worthwhile to work up a set of icons for TF milestones. 'New Body.' 'Changes sides,' 'Dies,' etc. Functionality not-present (but possible) includes tooltip text to explain the icons if you hover. This example is a link, but it doesn't have to be. I think it's at least worth looking at, I'm a bit worried about making the text too busy... but these milestone would normally be spaced a bit further apart than this.-Derik 11:33, 19 June 2008 (UTC)

Custom Monobook skin

A picture of a customised monobook skin

I had some time to play with today, and spent a chunk of it on-and-off doing a monobook version of Rosicrucian's monaco-Animated skin. It's far from perfect, but I thought I'd throw it out for public mockery (image on right, code in my monobook.css file (this revision is the one shown in the image. And I know the Vehicon symbol's anachronistic, but, hey.). - SanityOrMadness talk page 00:36, 3 July 2008 (UTC)

Looks rather nice. I like it.--RosicrucianTalk 00:42, 3 July 2008 (UTC)

Another custom monobook skin in a similar vein.

Puttered about using your example as a base, and produced something similar. As with SoM's, mine is at my monobook.css file. I may have overdone the red a bit, methinks.--RosicrucianTalk 03:02, 4 July 2008 (UTC)

Yeeeeah. Switching back to the more blue-dominant Monaco I use, it was like dialing my eyestrain back five notches.--RosicrucianTalk 03:09, 4 July 2008 (UTC)
Oh, are these are for Monobook? Bah. I was still working in Monaco.-Derik 05:40, 4 July 2008 (UTC)
Well, I saw SoM working in Monobook, and he'd done some decently solid stuff. Besides, if the move does happen (which seems increasingly likely once Walky gets out of moving-fugue) we won't have access to Monaco. Monobook itself is actually insanely customizable in ways that a lot of wikis don't even try. Hence why I've been scattering notes and references here and there, for my own benefit as much as for others.--RosicrucianTalk 16:35, 4 July 2008 (UTC)
Ah, there we go. The blue makes all the damn difference. Still a little rough at the transition bottom-left, but I'll fix that later.--RosicrucianTalk 17:27, 4 July 2008 (UTC)
Fixed the bottom-left thing, did a minor tweak with the user bar for better accent color.--RosicrucianTalk 20:48, 4 July 2008 (UTC)
There are things I'd like to swipe ( :) ), but I've got three main problems with it:
  • The use of the movie All Spark backgrounds. They "feel" messy and out-of-keeping with the rest of the scheme - which is very flat, moreso than Animated itself - and the watchlist/contribs bar is kinda hard to read.
  • The amount of white. Dropping so much red helps, but I'm not a fan of the white-on-white.
  • The choice of Arial Black for the sidebar h5s. That's a font that only works when it's BIG (36pt+), because of its' weight, too-high lines (relative to letter height) and poor anti-aliasing.
- SanityOrMadness talk page 21:32, 4 July 2008 (UTC)

Another version

A picture of yet another customised Monobook skin

Based on some of the elements from Rosicrucian's last version. The relevant CSS version is here. Thoughts? - SanityOrMadness talk page 23:41, 4 July 2008 (UTC)

I know I'm the one that keeps sticking the big blue Teletraan console bank in the upper left, but I think the swoosh looks kind of empty without it. Also, I tend to include it just because it offers some continuity with our original masthead, and the notion that we're a repository of Transformers knowledge. If you want it, I have at least one image of just the console here as well as bigger versions if needed.--RosicrucianTalk 23:48, 4 July 2008 (UTC)
Been busy with other stuff for the past few days, and haven't had the time to think about this. The reason I've been avoiding the Teletraan bank is threefold (Even besides the thought that we might not be able to call the wiki Teletraan I post-move. I'm sure Wikia would object):
  1. It's an Animated-based skin, and that's G1-Teletraan I. The Animated Teletran-1 banks are really very different (See "Transform & Roll Out" (part 1) for a good look at the the Animated T1 consoles - dark-grey, banked consoles, with big green lights and the viewscreen/window on top).
  2. It doesn't really look much like the previous masthead - if you start picking away at it line-by-line you might see the resemblance, but at best it's the difference between something drawn by Geoff Senior & "Pat Lee", and coloured by EJ Su vs Nel Yomtov. One's a slightly subtle red/black, the other's uniformly smothered in some mid-blue. The continuity really isn't there.
  3. It breaks up the "swoosh" :). Since there'll probably be an ad banner between the personal bar and the edit-bar tabs post move, I would rather see the console fixed in the gap which will exist at the top RIGHT when that happens...
I also took a wee while earlier to frame-by-frame the Animated title sequence, and two things leapt out at me - an odd shape the Autobot & Decepticon sigils appear from that I'd like to work in, and a "ribbon" (with two shades of red around an unfortunately ugly shade of mid-blue for the Autobots, and green/purple for the Decepts) motif. Plus white angled grids on black, but I think that's better avoided. - SanityOrMadness talk page 22:38, 9 July 2008 (UTC)

1280+ width

I noticed you uploaded another version of your background there. It seems very narrow once you get beyond 1024x768. [Incidentally, I zoomed in on something else while I was taking these screencaps - the All Spark background doesn't respect the curved corners - it's noticeable around the personal bar in particular. And yeah, I forgot to enable JavaScript for the Search images to appear.]. - SanityOrMadness talk page 16:03, 10 July 2008 (UTC)

For me, this was a band-aid fix for something that was bugging me - the transition of my backdrop into the greater dark blue field. As such, it was mainly just intended to improve that until I get some time to do my next set of tweaks. I do have some ideas in mind, but my time at home this week has been limited thus far.--RosicrucianTalk 16:12, 10 July 2008 (UTC)

To date:

Derik's monaco changes

(Add to the top of your CSS file);

@import "";

and for your Monaco Javascript file (User:Derik/monaco.js)

function doStuff(){
	var searchArea = document.getElementById('searchform');
	searchArea.innerHTML += '<input name="go" id="fullGoButton" id="searchGoButton" value="Go" type="submit"> <input id="fullSearchButton" type="submit" value="Search" name="fulltext"/>';

setTimeout("doStuff()", 1000);

Thoughts? It's still a bit rough. -Derik 05:40, 4 July 2008 (UTC)

[Not allowed (site-wide, anyway).
To me it seems a bit like polishing a turd, if you'll pardon the expression, at this point anyway - you might take some of the more objectionable aspects away, but at the end of the day, monaco's still crap. - SanityOrMadness talk page 19:38, 4 July 2008 (UTC)

Floating the sidebar.

Seemed like a nifty feature when I read about it. However, it mangles the everloving shit out of the edit toolbar and the user bar.

/* Fix the sidebar's position while you scroll */

div[id=column-one] {  /* Using the attribute selector hides this from IE */
    position: fixed;
    height: 100%;     /* If you shrink the browser too small, the side column will */
    overflow: auto; /*   become scrollable, so stuff is always accessible, albeit ugly */
    z-index: 2;

#p-lang .pBody ul{    /* Sets the language box to a fixed height and scrollable if too long to fit */
    height: 10em;
    overflow: auto;

body {                /* Fix the background image, too, so it looks nice as you scroll */
    background-attachment: fixed;

#footer {             /* Fix the footer so it looks nice and doesn't overlap the sidebar */
    margin-left: 13.6em;
    border-left: solid 1px rgb(250, 189, 35);
    /* Uncomment this if you use rounded edges: */
    -moz-border-radius-topleft: 1em; 
    -moz-border-radius-bottomleft: 1em; 

Monobook code unceremoniously swiped from elsewhere, if anyone can figure out how not to make it kill everything.--RosicrucianTalk 23:15, 3 July 2008 (UTC)

Aha! Nevermind. Apparently this is a kludge of the highest order, and thus requires you to make the user toolbar a sidebox and mangle up monobook.js a bit too. Looking like more alteration than it's worth, as you have to change stuff I'd rather keep.--RosicrucianTalk 23:27, 3 July 2008 (UTC)
I loathe sidebars that follow me. :~( I keep trying to flick them away and they COME BACK! -Derik 01:07, 4 July 2008 (UTC)
I'm with Derik on this one. No, no, no. - SanityOrMadness talk page 14:43, 4 July 2008 (UTC)


I have this fear about making the page look too.... well, nice. There may be a line in design that, when crossed, makes us indistinguishable from, say, an official Hasbro site. At that point, Hasbro may consider us potentially confusable with an official page. And that's not so very great to them, I imagine, with all our swearing and Kissplay. So while the "Animated" skin looks absolutely fantastic, and I very much desire to see it in use, my fear still exists. Making the site look like an actual Hasbro product may not be such a smart idea. --ItsWalky 18:41, 10 July 2008 (UTC)

As a matter of clarification, would putting the word "unofficial" somewhere in the logo help?--RosicrucianTalk 18:50, 10 July 2008 (UTC)
Right now, the skins aren't too close to the DVD packaging, which doesn't have a two-part swoosh - just red over dark blue.
If there's worry about confusion of that sort, I think the biggest and most obvious step to take would be to do a logo that ISN'T directly based on an official logo (as the current one is based on the TFA logo). I really think that "making it too nice" isn't really a concern - in the event Hasbro ever did an OFFICIAL wiki, they'd probably do what Marvel's done with theirs, and make a completely custom skin based on the rest of their site rather than on Monobook. - SanityOrMadness talk page 18:59, 10 July 2008 (UTC)
I think that this is largely a non-issue. Though if you worry... strengthening the "by-fans, for fans" thing on the frontpage couldn't hurt. -Derik 19:18, 10 July 2008 (UTC)


I love Rosicrucian's skin to death- but the blue and red are SO intense on my monitor (which admittedly has always been a bit oversaturated) that it hurts my eyes.

I'd like to see the soothing blue of the console itself, and a deeper red. (None of this woudl have to be done until the skinr eaches maturity, but I'm throwing it out for consideration.)

I DO love how the layout 'hugs' the page though, it's so adorable! Talk to Walky- we're gonna have ads on the new server. Will the be below the login bar and above the article, on in the right sidebar? I'm not sure how a banner above the article woudl affect the flow of the layout.

Oh also- the monobook collumn width is set in ems, but we set our toolbar in pixels. (I think I actually wrote the code that does that, whups!) As a result the page gets a bit funny if you increase the text size. That's nto a big deal, but add it to the 'needs to be fixed before we go live' file. I'll help ye track it down. -Derik 07:34, 15 July 2008 (UTC)

*snicker* -Derik 07:50, 15 July 2008 (UTC)
Could certainly live with a dialed-back version if it comes to that. As for banners, I definitely think there's room for a top banner, and a left or right skyscraper depending on tastes.--RosicrucianTalk 14:21, 15 July 2008 (UTC)
Or heck, nothing stops us from offering the skin in multiple color variations (or even one with a Decepticon logo for budding Rakshas).--RosicrucianTalk 15:21, 15 July 2008 (UTC)
Or more to the point, the hastily thrown together deceptibook.css file that I cooked up as proof of concept.--RosicrucianTalk 16:04, 15 July 2008 (UTC)

Stepping away

Honestly, the working look has moved far enough away from what I'd like to see now that I don't think I've got any more contributions to make to this debate. GL :) - SanityOrMadness talk page 16:39, 15 July 2008 (UTC)