Forum:Monobook Theme

Okay, so, this week I decided to try my hand at tweaking some .CSS and .JS, and came up with Monobook themes for two wikis I edit at. MarioWiki with some help from another user Rappy on the boxes for the sidebar and the base of the search bar image. And on Green Day Wiki which was not really fun with four hours in front of a computer. Thing is, if we did this, what would we do for the colors. I know it'd most likely be Green/Yellow, or else we'd have to change the forced skin Oasis color scheme. But would the green/yellow be in the sidebar and the page tabs and behind the search bar? A few other things would be would the searchbar stay in the sidebar, or be moved to be a vector/oasis feel.

I personally think this could be a very good idea. It might take roughly a week or longer like with MarioWiki, since there's more than one editor. But I think given enough time and care, it could come out pretty well. -- B a s s  J  apas  16:26, April 3, 2011 (UTC)
 * Getting rid of this plain white and returning to are old monaco green gold. I definitely support that. I'd like to see the same shades and swril style we had back in the times of monaco if thats possible. Oni Dark Link 16:30, April 3, 2011 (UTC)
 * As a monobook user, I can say for myself that plain white makes the logo look kinda like an island in a huge sea. We're Zeldapedia, let's be all we can be. I support an upgrade.--RedeadhunterRedead.pngContributions Edits 16:38, April 3, 2011 (UTC)
 * Monaco background strip.png? That one? Wasn't aware it was still on the site. I could possibly work with that if we do agree on changing the monobook theme. -- B a s s  J  apas  16:40, April 3, 2011 (UTC)
 * If it can be done right (and I know you've the skill needed to do this), I've no objections against sprucing up this old boring white. --Auron  Kaizer <font color="#3ba0c5">!  20:11, April 3, 2011 (UTC)

First Stage
Okay, so going off the Monaco.css theme, I made a theme that is pretty rough but has all the colors and the background strip. The reason I say it is rough is because it was made by me, and I only started tweaking .css last week. The first stage of the theme is located <font color=#00BFF3>at my test wiki. It has the monaco colors, and the monaco swirl thing. A few points are the blue links in the sidebar's first box, but that should be fixable if I find the correct syntax to fix those links. But as of this point, I think it's pretty good for the first stage, and yes, it is atypical for me to say that since I did that, but I've had some pretty bad attempts for the first one, and I think this came out pretty well for the first try. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  19:29, April 4, 2011 (UTC)

Ready for input from other users
http://images1.wikia.nocookie.net/__cb20110404224328/jazzitest/images/d/d9/Test.png The potential theme is now ready for input from other users. Before you ask what happened to the swirl background. There was one issue with it. It wouldn't loop, and if you flip them, they connect, which, well, looks like that (illustration on the right). Which doesn't look good in the least bit. The link is <font color=#00BFF3>right here if you are having any trouble viewing something, please please PLEASE, I can not stress this enough, clear your cache, or it will not be viewable. If you do not know how to clear your cache, the information is here:
 * Internet Explorer: hold down the Ctrl key and click the Refresh or Reload button, or press Ctrl+F5.
 * Firefox: hold down the Shift key while clicking Reload; alternatively press Ctrl+F5 or Ctrl-Shift-R.
 * Opera users have to clear their caches through Tools→Preferences
 * Konqueror and Safari users can just click the Reload button.
 * Chrome: press Ctrl+F5 or Shift+F5

If the cache is not cleared, it's just going to look bad. Now, aside from that.

Input from other users is GREATLY APPRECIATED, meaning, comment in the comments section on what you would like to see (Not the Monaco swirl background, and unless you can provide a good background with a good swirl, it will have to be made by yourself and should loop), or what you would like removed, just add it in the comments section.

'''Nothing major will be changed, the color scheme is going to stay the same, since it was the colors when we had monaco and it is the oasis color scheme. The green, dark green, and yellow are staying.'''

The background color, however, can be changed lighter or darker (please provide hex colors if you have a specific) and I personally think the page color is a good neutral between a darker gray and white.

Sorry this was so long and a slight ramble... --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  01:35, April 5, 2011 (UTC)

Comments
E = Exceeds Expectations. It might even be an O = Outstanding if problems you are already aware of such as the background and potential page style/colorization clashes are sorted out. --<font color="#3ba0c5">Auron  Kaizer <font color="#3ba0c5">!  01:45, April 5, 2011 (UTC)

I think it looks great. I really like how you used a slightly softer color than the rather harsh white that's default on monobook. It's somewhat easier on the eyes without being somehow distracting.--Redead'hunter'Contributions Edits 23:32, April 5, 2011 (UTC)

Terrific. Love it. Far better than the bland scheme(or lack thereof) we've got right now. ~<font color="#3EB489">~ <font color="#3EB489">Sir   Real 

Logo Issue
There is a slight issue that is more noticeable in the test skin than the default monobook. The logo touches the content border. <font color=#00BFF3>The test wiki and <font color=#00BFF3>default monobook. If this is truly an issue. It would need some resizing (down to possibly ~140) to not touch the content border. I personally think it's fine. Comments? --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  00:45, April 6, 2011 (UTC)

Comments
Odd, it has space on my computer. I think my computer might see a lot of things differently though. As far as what you're showing though I don't think it's a huge deal, but making them not touch is probably better. Oh, and good job on it by the way, it looks SO much better than the default.--<font color="Green">Fierce <font color="SaddleBrown">Deku 01:08, April 6, 2011 (UTC)
 * Looks pretty good so far. And like FD, I have an adequate amount of space between the logo and the border. Jedimasterlink (talk) 07:09, April 6, 2011 (UTC)
 * A friend of mine had <font color=#00BFF3>uploaded a slightly thinner one. And that's the one currently up. The only problems are 1. I'm really not comfortable messing with the logo since it's well the logo. And 2. If we change the logo for one, how would it look for others.


 * If you don't mind the weird question, could you tell me the screen resolution you have on your computer so I can figure this out? --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  13:22, April 6, 2011 (UTC)
 * My resolution is 1366x768. Jedimasterlink (talk) 20:12, April 6, 2011 (UTC)
 * The logo touches the content box for me. -<font color="#B0E0E6">Minish  <font color="#003366">Link  21:21, April 6, 2011 (UTC)

It just grazes it for me, no overlapping but not much room. I'd also like to see a bit more yellow, our old monaco had yellow for everything except the background which I think complemented the background very well but if I'm the only one that feels that way or if it can't be done thats fine, this is still way better then the plain old white <font color="#66FFFF">Oni <font color="#7F007F">Dark <font color="#007A00">Link 21:26, April 6, 2011 (UTC)
 * Of course it can be done. It's still being made since it needs input from the community. Just tell me where you'd like to see the yellow, and I can fix it. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  21:32, April 6, 2011 (UTC)
 * Mainly where the dark green is now, in the sidebar on the left, thats my opinion anyway everyone might not agree with me <font color="#66FFFF">Oni <font color="#7F007F">Dark <font color="#007A00">Link 21:40, April 6, 2011 (UTC)

I like the checkerboard theme, but I think I found a way to get it to loop better. I uploaded it here and want to know what everyone thinks of it compared to the current image. EDIT: Nevermind, guess its fixed already.--Redead'hunter'Contributions Edits 23:32, April 6, 2011 (UTC)

Logo and Background Concerns
Since there hasn't been word on the logo issue for a couple of hours, I'm going to go ahead and post this bit since I've gotten further.

Although there's still the "Logo-touching-content-border" issue, there's that issue in default monobook, and we've all lived with that so I think we can all live with the logo touching the content box in the new one, considering there are some computers that aren't touching.

Sadly, I can not tessellate the swirly image, or any swirls for that matter. So I used boxes. It creates a checkerboard pattern, and they're quite big boxes so it's not too out there.

I personally think it's pretty good, but of course, I did make it...

I also added more yellow like Oni suggested, just not in the sidebar, but in the searchbar.

The link is <font color=#00BFF3>here. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  02:10, April 7, 2011 (UTC)

--<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  14:03, April 12, 2011 (UTC)

Comments
I legitimately have no issues or concerns with this theme. The square design works, the colors work, everything works in my opinion. - McGillivray  227  02:19, April 7, 2011 (UTC)

While the squares are an improvement, I think that you should try the swirly version of the logo on that. Then it might be implementable (or more so, anyway). <font color="#663300">T <font  color="#996600">h <font   color="#CC6600">e  ™  23:03, April 7, 2011 (UTC)
 * As I've told you, making it swirl is basically impossible. If somebody can make a swirly one with tessellation and the right colors, then great. But in complete honesty, I can't make it tessellate or look good. It's pretty much basic shapes that can tessellate. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  23:06, April 7, 2011 (UTC)
 * No, I meant the logo being swirly and the background being squares. <font color="#663300">T <font   color="#996600">h <font   color="#CC6600">e Mask-Mimic.gif ™  23:09, April 7, 2011 (UTC)
 * I can try that, no guarantee it'll look good though. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  23:19, April 7, 2011 (UTC)

No issues with it for me, as far as the design goes. But in the experience of anyone reading, how long will the cache (not an individual's, but the Wiki's) take to load? This considering we have an upwards of 4,000 articles. If there's any significant expected time to load, let's say something like "it may take x time (or just a while if we're not sure) to load the cache" if we're not already planning to do so.--Redead'hunter'Contributions Edits 23:17, April 7, 2011 (UTC)

I think the Monobook skin itself is the problem. Can't really fix that. I actually like it, it is a very good alternative to Oasis.-- C  2  / C C  01:21, April 10, 2011 (UTC)

It works for me. -<font color="#B0E0E6">Minish  <font color="#003366">Link  21:53, April 11, 2011 (UTC)

I like this design. Unless someone proposes a major change in the next few days, I think we should implement this. Jedimasterlink (talk) 03:28, April 12, 2011 (UTC)

Looks good to me.--<font color="Green">Fierce <font color="SaddleBrown">Deku 04:18, April 12, 2011 (UTC)

I agree let us abolish this suppressing whiteness <font color="#66FFFF">Oni <font color="#7F007F">Dark <font color="#007A00">Link 08:49, April 12, 2011 (UTC)

Cool, I'll go tonight and check to make sure everything is good and that all the colors work good. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  10:49, April 12, 2011 (UTC)

Hey.... I bet I could work something up with the background thing to where it could be tessellated if you wanted.— Triforce   14 Triforce4.png 13:45, April 12, 2011 (UTC)

There's no way to tessellate the monaco swirl background strip. I've tried various times. Internet tutorials, photoshop, trying a completely new image. It won't work. If you can get a swirl background to tessellate, then we can test it. I'd just prefer the theme to be done soon, as I have a lot coming up and won't be able to tweak the skin as I could've before. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  14:03, April 12, 2011 (UTC)

I'm not just talking about fipping it or rotating and such, I'm repairing/completing some of the swirls as we speak so it would work properly.— Triforce   14 Triforce4.png 14:08, April 12, 2011 (UTC)
 * If you could upload it to that wiki, it'd be much appreciated, and I'll see what I can do. I just might not be able to add it to the .css now, as I leave at 10:46, but I come back around 11:37-12:28, so I'll be able to add it then and then that bit to the forum to see the opinions. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  14:12, April 12, 2011 (UTC)
 * Alright. I'm still working on it a little bit, but It should work when I'm done. Are there any specifications for the file dimensions or will any reasonable one work?
 * The current one is 1,116×744 but that was just because the previous background picture didn't tessellate well, and any smaller squares would cause headaches and potential dizziness. As long as it's larger than ~300x300 I think it'd be good. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  14:18, April 12, 2011 (UTC)
 * Check this out.— Triforce   14 Triforce4.png 14:52, April 12, 2011 (UTC)

Triforce 14 Background
I imported the background T14 made into the monobook.css and I personally think it looks pretty good. And I think it works perfectly. We have the colors from Monaco/Oasis and the swirl from Monaco, and we have new colors and got rid of the bleakness. I feel as if we're now in the final stages of this skin, and might even be done. If there are any issues/complaints/comments on this, now is the time to voice it or forever be stuck in Oasis. And thank you to Triforce for getting this image to work. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  15:02, April 12, 2011 (UTC)

Comments
Glad I could be of service!— Triforce   14 Triforce4.png 15:06, April 12., 2011 (UTC)

I have a background where triangles tessellate into a triforce if you want to try that.EDIT: A second version.--Redead'hunter'Contributions Edits 15:15, April 12, 2011 (UTC)

I personally enjoy the swirl better. As the squares and the triangles are really really basic elementary school shapes. The only reason I threw the square option out there was because I couldn't tessellate any swirls I attempted at, and couldn't go through the process of attempting to tessellate any images. So I settled on the square so that it wasn't a solid color background. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  15:32, April 12, 2011 (UTC)

I like the new swirly one. That's the kind of thing I was talking about in the IRC, it's a pain to tessellate wired shapes themselves, but you can put them in a box and "tessellate" that. Nice work T14.--<font color="Green">Fierce <font color="SaddleBrown">Deku 17:41, April 12, 2011 (UTC)

I only see the squares, nothing's changed for me... -<font color="#B0E0E6">Minish  <font color="#003366">Link  17:44, April 12, 2011 (UTC)
 * I'm still seeing squares as well. Jedimasterlink (talk) 18:34, April 12, 2011 (UTC)
 * Clear the cache. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  18:44, April 12, 2011 (UTC)
 * After seeing this one, I'm definitely all for it. I like it a lot. -<font color="#B0E0E6">Minish  <font color="#003366">Link  18:45, April 12, 2011 (UTC)

Could we do this for Oasis as well? I'm a fan of all users getting the same experince, but if people believe this should only be for Monobook users, then I'm okay with that. Edit:Look at it this way, if we give everybody a nice visual experince, then it would make our wiki look better for everyone, and make it more attractive for people to use to it, be it on Oasis or Monobook.-- C  2  / C C  18:16, April 12, 2011 (UTC)
 * If the monobook coding and oasis coding are relatively compatible (which may not even be a problem, I wouldn't know), then I think we should apply this to both skins. Jedimasterlink (talk) 18:34, April 12, 2011 (UTC)
 * And yes, it's a pretty simple thing to get the Oasis one like the Monobook one with ThemeDesigner. And sorry for the wait, had classes and couldn't make it back to a computer till now. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  18:44, April 12, 2011 (UTC)

A Slight Issue
There is just one slight problem with the skin, and it's when viewing preferences. I'm working on fixing this right now, but just to let you guys know there there is a slight problem in this. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  19:12, April 12, 2011 (UTC)
 * I didn't see any problems. -<font color="#B0E0E6">Minish  <font color="#003366">Link  19:27, April 12, 2011 (UTC)
 * It was really dark compared to the rest of the skin. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  19:27, April 12, 2011 (UTC)

Possibly the Final Stage
The issue in the preferences is fixed. And there's a Oasis theme made through theme designer. And a good background. This is possibly the final stage. If you need to voice anything about how it looks, voice them now. Any complaints/comments in the comment section. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  19:32, April 12, 2011 (UTC)

Comments
I must say that both the Monobook and Oasis themes look really good. The only complaint I can think of is that the background could be a little whiter. I like how it isn't white but it just seems to have too much of a blueish tinge in my opinion. I think that making it slightly whiter could improve the overall look. --Birdman5589 (talk) 15:21, April 13, 2011 (UTC)
 * If you ask me, the darker skin you mean is easier on sensitive eyes such as mine than what's default, and definitely easier on a laptop/iPod/iPhone/DSi/whateveryouhave's battery, if only by a little bit. But, if you find it distracting or hard to read, I guess I can see where you're coming from. I guess you saying slightly will allow a compromise.--RedeadhunterRedead.pngContributions Edits 16:28, April 13, 2011 (UTC)
 * You could always copy it to your personal .css and tweak it to your liking.— Triforce   14 Triforce4.png 16:51, April 13, 2011 (UTC)
 * I personally don't want it copied to personal .css and tweaked when it's something like the background, search bar is fine by me. But I spent hours working on this, and it's not done because I want other's opinions. Which is why it's good Birdie mentioned that. --<font color="#00BFF3"> B <font color="#000000">a <font color="#000000">s <font color="#000000">s <font color="#00BFF3"> J  <font color="#000000">apas  18:29, April 13, 2011 (UTC)