NIWA Community Forums
NIWA Community => The Lounge => Topic started by: Tina on November 08, 2010, 11:52:36 PM
-
I've been meaning to get around to touching up WikiBound a lot more when it comes to designs, and making the place more fun and colorful than just boring ol Vector/Monobook. I tried my hand at making my own skin, since I had modified monobook before and I have basic CSS knowledge... but that didn't go quite well. XD;
So I figured I would post a topic here asking if someone would be willing to volunteer with creating a skin? I'm not really sure where else to ask- I don't know anyone specifically who has wiki/CSS experience, and I would rather try to see if anyone from NIWA would be able to help before moving on to more outside sources for assistance. D:
I have a vague idea of what I would like... something bold, colorful, or pastel-y, and oriented with mostly light colors. Something very Earthbound-esque. Something fun! And... that's about it. I wish I didn't suck so much at web design.
-
Wait, a skin or a modification of the monobook css?
I've been playing Earthbound lately. What about using something similar to the battle backgrounds as the actual background?
-
Probably a modification of monobook- anything would do, though. Obviously not a skin from scratch because that would be a pretty big pain. XD
I think using the battle backgrounds would be too distracting, though. That's what I've been having a lot of trouble with... getting a nice background, but something not really distracting. Blerrghh.
-
I just googled "Earthbound final boss" and a lot of pyscedelic-trippy images showed up. I'd go with that if it were mine :p
-
I don't want to scare visitors away with having Giygas as the background ;_;
A backup plan of mine was to draw a background instead of trying to figure out a pattern/plain color that would work well... except for the fact that I wasn't sure how big I would make it, and that it would probably be covered up anyway. (Unless we were to do a semi-transparent background...) Har har.
Argh. I have no idea. I don't know what colors to go with or what theme to go with... I'm pretty braindead right now. :v (I'm sure I'm not helping much right now, seeing as I don't think many people around here have played the Mother games very much... blargh.)
-
I don't want to scare visitors away with having Giygas as the background ;_;
A backup plan of mine was to draw a background instead of trying to figure out a pattern/plain color that would work well... except for the fact that I wasn't sure how big I would make it, and that it would probably be covered up anyway. (Unless we were to do a semi-transparent background...) Har har.
Argh. I have no idea. I don't know what colors to go with or what theme to go with... I'm pretty braindead right now. :v (I'm sure I'm not helping much right now, seeing as I don't think many people around here have played the Mother games very much... blargh.)
are there any other pastel colors?
-
Something along the lines of this, I guess:
(https://dl.dropbox.com/u/3784170/morefreakingcolors.png)
Not necessarily those same exact colors, just an idea of it. Pastelly ideas on the top and then the bold ideas on the bottom. I spent about 5 minutes coming up with those colors, though, so I didn't really put any effort into coordinating them. :V
-
Something along the lines of this, I guess:
(https://dl.dropbox.com/u/3784170/morefreakingcolors.png)
Not necessarily those same exact colors, just an idea of it. Pastelly ideas on the top and then the bold ideas on the bottom. I spent about 5 minutes coming up with those colors, though, so I didn't really put any effort into coordinating them. :V
if you get me the color numbers, i want to run experiments with my in house wiki and See what i can come up with.
-
Pastel ones:
[spoiler]Red-orange gradient thing:
#f49b9b
#f4959b
#f4b09b
#f4bf9b
#f4d49b
Purples:
#e2caef
#e8d3f4
Blue/green:
#bfdff7
#bcf3ca[/spoiler]
Bold ones:
[spoiler]From left to right:
#f2d374
#f0c669
#e28766
#9166ad
#8b89ea[/spoiler]
Obviously you don't need to use *all* of the colors, or those exact ones, but there you go. XD
-
I'd go with the pastel ones. It goes great with EarthBound.
They resemble a battle, even if you're not using a battle theme itself.
-
So, here is what i think: Since none of us have experience, no knows anybody else with experience, how about we make it collaborative? we each pick at it a little, and bring to hear our results.
Here is what i got so far:
/* Framework */
html, body
{
font-family: courier, sans-serif;
}
body
{
background-color: #8b89ea;
}
/* Content */
#content
{
background-color: #e2caef;
}
/* Head */
#mw-page-base
{
/*background-color: white;*/
background-color: #f4959b;
}
#mw-head-base
{
background-color: #f4b09b;
}
#mw-head
{
position: absolute;
top: 0;
right: 0;
width: 100%;
background-color: #f4bf9b;
}
/* Personal */
#p-personal
{
background-color:#f2d374;
}
/* Navigation Containers */
#left-navigation
{
background-color:#e8d3f4;
}
#right-navigation
{
background-color:#e28766;
}
/* Namespaces and Views */
div.vectorTabs
{
background-color: #bcf3ca;
}
div.vectorTabs
{
background-color:#9166ad;
}
/* OVERRIDDEN BY COMPLIANT BROWSERS */
div.vectorTabs ul li
{
background-color: #e2caef;
}
div.vectorTabs li.new a,
div.vectorTabs li.new a span,
div.vectorTabs li.new a:visited,
div.vectorTabs li.new a:visited span
{
color: #8b89ea;
}
div.vectorMenu ul
{
background-color: #bcf3ca;
}
/* Panel */
#mw-panel
{
background: #f49b9b;
}
/* Footer */
#footer
{
background-color:#8b89ea;
}
/* Categories */
.catlinks
{
background-color: #f4d49b;
}
Keep in mind, 2 things:
1) This is butt-ugly.
2) The purpose of this is too isolate usable CSS classes.
Remeber to implement this on your user/vector.css pages only.
-
Actually, I may have got someone to do the skin.. XD;;; I was just talking with a friend on AIM tonight and he said he would try taking a shot at it. This is awkward. It... just kind of came up in conversation. orz
A group effort with something like a skin I think would be really hard to do, anyway- different tastes in design styles and it just seems like it would be difficult to settle on a final product.
Of course there's always the matter of having different completed skins to choose from, and then have a vote on which would be used/default? '-' I still wouldn't rather do the collab idea, though, no offense.
-
eh. Not a problem. It was still fun to pull apart the css.
-
Okay I am almost in tears attempting to do this myself, so I'm throwing in the towel and hoping that a godly skin designer or something comes along and sees this. ;-;
I really, really want a custom skin for WB: this would also make coordinating colors on the wiki much easier, figuring out set styles, and so forth. And it would be so much sparkly than just having boring ol Vector as the default. Sparkly things are nice!
Anyway. There's only a couple things I was hoping for in a skin. This (http://fc09.deviantart.net/fs71/f/2010/333/5/f/i_can_see_the_stars_by_platinatina-d33vvyy.png) as the background, aligned to the top right - if someone actually responds I'll find the more background oriented version I made. Colors... red/light blue and whatever you think would go best with that. And in general a star/planet motif. That's all, really. But I can't come up with anything I like myself, and it's frustrating me to no end, so... can someone else try? Please? *puppy eyes*
-
Hmm, I'm going home for 4 weeks of holiday today, so I might be able to find time. I have no Mother/EB experience (though I watched a speedrun once...), though. Is there anything in particular you're struggling with, or is it just that it's slow going trying to work each thing out?
Disclaimer: I'm not much of a designer in the graphics sense, mostly because I don't like how long it takes me to put anything together, and I'm colour-blind, so...may need guidance in that respect.
-
Tina.. would you like me to take a go at some of it? lol
-
Is there anything in particular you're struggling with, or is it just that it's slow going trying to work each thing out?
I really don't know anything about web design, myself-- I can't figure out a layout nor do I know where to look for MediaWiki skins as a starting point. Plus I can never seem to get a good color scheme that clicks. :( (Also I am CSS-retarded. Hahaha.)
Tina.. would you like me to take a go at some of it? lol
If you could, that would be awesome :eekdance:
-
Is there anything in particular you're struggling with, or is it just that it's slow going trying to work each thing out?
I really don't know anything about web design, myself-- I can't figure out a layout nor do I know where to look for MediaWiki skins as a starting point. Plus I can never seem to get a good color scheme that clicks. :( (Also I am CSS-retarded. Hahaha.)
Tina.. would you like me to take a go at some of it? lol
If you could, that would be awesome :eekdance:
woo! :eekdance:
-
I can try to get you the right colors, and I know a bit about CSS. Hope I can be helpful! (woohoo snow day)
-
I can try to get you the right colors, and I know a bit about CSS. Hope I can be helpful! (woohoo snow day)
I'd recommend talking with Dillion or Tina on it, as i am sure any feedback would be helpful.
And thank you for the offer!
-
I'd recommend talking with Dillion or Tina on it, as i am sure any feedback would be helpful.
And thank you for the offer!
I would be that Dillion taco refers to.
If you have any suggestions with colors, then please, by all means make them. I can make a design out of most anything but... I'm typically not that great with inspiration/colors/actual design. lol (give me a pretty pic of what you want, and I can probably get there.. otherwise.. eh... lol)
-
Going into more detail as to what specifically I'm having trouble with when it comes to colors here.
(https://dl.dropbox.com/u/3784170/colorsample.gif)
So this is pretty much what I like so far- a light blue, and a deep red, and some shades in-between the two. It's what I used in this background (https://dl.dropbox.com/u/3784170/backgroundwb.png), and I'd reaaaaaally like if that were to be used in the final product.
However, I'm having a really difficult time coming up with a compliment that goes well with the blue and the red. I had gone with a brightish yellow earlier, but I didn't really like how that came out. I was trying to go for a brightish... well, maybe bright's not the word. Not like "#ff0000 on #00fffff action" bright, but something eyecatching and playful. Something that'd suit Earthbound. Unfortunately I have a habit of muting things a ton, so that didn't work out very well. XD
Of course pastels would also work! Nothing against pastels, I like them quite a bit. Using brighter colors was more of my own personal experimentation. I'm not sure where to go from here, though.. something light? Dark? Warm? Cool? ???
-
Some color suggestions:
Red-yellow gradient
F7977A
F9AD81
FDC68A
FFF79A
A bit brighter:
F26C4F
F68E55
FBAF5C
FFF467
Earth
C4DF9B
6ECFF6
-
I would be that Dillion taco refers to.
Oops, sorry about that.....
-
Okay another change of plans. I got fed up with trying to work with the cold red/blues, since a compliment was being way too difficult to make it work, and just the red and blue looked bland... so after some fiddling, I came up with.... this!
(http://dl.dropbox.com/u/3784170/colorideas.png)
Obviously not going to incorporate every single color listed there.
And the full mockup using those colors is right here (https://dl.dropbox.com/u/3784170/thelastmockupiswear2.png), although looking on a different monitor now I need to redo the border colors. Disregarding some obvious blips, though, does this look.... I dunno. More like everything clicks better. Also, yay for pastels. <3
[spoiler=hidden]
(*cough*whatlucasandclausobsessionidontknowwhatyou'retalkingabout*cough*)[/spoiler]
I still want to adjust the background, though. I just slapped some blue stripes in the background. Going to clean that up later or something. :V
-
Whoa! That looks pretty nice! ;D And the drawings at the top are cute too. Did you make those yourself? :o
-
Whoa! That looks pretty nice! ;D And the drawings at the top are cute too. Did you make those yourself? :o
Yeah, I drew the Lucas/Claus at the top. :P Thanks!
-
I... I think I'm pretty satisfied with this, actually. I don't feel the need to touch it anymore! :O Which is weird because usually I go "AUGH OK SUDDENLY HATE THESE COLORS" or "NOPE GOTTA CHANGE THE TOP BANNER AGAIN".
Full mockup is here (http://dl.dropbox.com/u/3784170/thelastmockupiswear2.png)
Just the top banner is here (https://dl.dropbox.com/u/3784170/topbanner.png) (Which, by the way, it works with screens wider than 1024px -- just make the background #c4d8f3 and it'll be seamless! Magic!)
And then the color samples to draw more colors from is here (https://dl.dropbox.com/u/3784170/colorideas.png).
Thought I would post this here for reference and to more publicly announce that I'm done fiddling with the design. Dillion said he was start working on it more after Christmas, so yay! [/statusreport]
-
Looks amazing Tina! It's a good thing, because I've just started playing Earthbound too. Is that still Monobook under there?
By the way, who made your skin? Was it Dillion? We still need one over at ACWiki.
-
It technically hasn't been put into code yet- the image is just a mockup I made in Photoshop lol. It'll probably run under a slightly-modified Monobook, though.
And yeah, Dillion's going to put the CSS together for it. :P
-
It technically hasn't been put into code yet- the image is just a mockup I made in Photoshop lol. It'll probably run under a slightly-modified Monobook, though.
And yeah, Dillion's going to put the CSS together for it. :P
Can't wait! :eekdance:
-
It technically hasn't been put into code yet- the image is just a mockup I made in Photoshop lol. It'll probably run under a slightly-modified Monobook, though.
And yeah, Dillion's going to put the CSS together for it. :P
Can't wait! :eekdance:
neither can I! :eekdance: :eekdance: :eekdance: :eekdance: :eekdance: :eekdance: :eekdance:
-
heh, its making progress. as some already know. :D
-
heh, its making progress. as some already know. :D
sweet. Looking forward to it.
-
This should be exciting :)
Good luck!
-
Just to update/close the topic. The Skin has been completed, and it is the default skin for WikiBound!
-
Just to update/close the topic. The Skin has been completed, and it is the default skin for WikiBound!
Sweet.
Should i close the thread?