NS2 Wiki - Styling
Daworm
Join Date: 2009-06-22 Member: 67900Members
Join Date: 2009-06-22 Member: 67900Members
<div class="IPBDescription">Feedback and Opinions.</div><b>EDIT</b>: 10th September
The Wiki styling is largely redone and implemented, however things can go amiss or someone might have a better idea.
If you have any suggestions that are beneficial to the community, feel free to make a comment.
<b>Current Status</b>: Reworking the images and rotation timing. Please see (currently) bottom half of page 3 for updated screenshots.
-----------------
Hey all,
I'm assuming most / all of you are aware of the NS2 Wiki Flayra setup, well I've been messing about getting some skinning happening for the wiki.
Now that I have Sysop Access I can do a lot more with it (can't fix image uploads, that requires ftp access I obviously don't/won't have).
However as said above I've done some skinning, you can see it implemented here : <a href="http://www.unknownworlds.com/ns2/wiki/index.php/User%3a%44aworm/Sandbox" target="_blank">http://www.unknownworlds.com/ns2/wiki/inde...:Daworm/Sandbox</a>
If it looks normal make sure you do a force refresh on your browser (most people will be a CTRL + F5), if you have any suggestions / alterations that I could do, please do let me know!
If you would like to have your own littlel thing configured so you can mess about with some styling, let me know and I'll get something setup for you (let me know by posting what your Wiki Username is).
Anyway
/discuss
<b>Notes: </b>
It's not 100% some minor css hacks IE: quirks. Like no wiki logo in top left atm due to hiding the whole div. as a temp work-around. Will apply a transparent overlay there later, or a more appropriate Logo if I can get something from UWE so I can do it better :)
<b>Status - 10th July</b>
* At the moment I am "testing" a cycling header image system. Just load the page and press F5 a few times to make it load new images. There are three different banner backgrounds and three different "logos" for now (more will come as UWE release more images) I'll get a res-node up there too later.
* Feedback on the sidebar would be nice, leave it transparent or have it solid background. The background will be the same colour as the main content body, if you scroll down you'll see a screenshot of it with the solid background.
* I'll tweak the header images a bit later, IE: moving the NS2 logo down a bit.
* Image uploads currently disabled, will get Charlie to fix them later (<i>only he can fix it atm</i>)
* Happy to have suggestions for how to tweak it, but if the overall design is liked. I might set it up for the most part, just minus the header logo changes for now until that's fixed. However off-site hosting of header images might mean a speedier response time... if the UWE server is under load.
The Wiki styling is largely redone and implemented, however things can go amiss or someone might have a better idea.
If you have any suggestions that are beneficial to the community, feel free to make a comment.
<b>Current Status</b>: Reworking the images and rotation timing. Please see (currently) bottom half of page 3 for updated screenshots.
-----------------
Hey all,
I'm assuming most / all of you are aware of the NS2 Wiki Flayra setup, well I've been messing about getting some skinning happening for the wiki.
Now that I have Sysop Access I can do a lot more with it (can't fix image uploads, that requires ftp access I obviously don't/won't have).
However as said above I've done some skinning, you can see it implemented here : <a href="http://www.unknownworlds.com/ns2/wiki/index.php/User%3a%44aworm/Sandbox" target="_blank">http://www.unknownworlds.com/ns2/wiki/inde...:Daworm/Sandbox</a>
If it looks normal make sure you do a force refresh on your browser (most people will be a CTRL + F5), if you have any suggestions / alterations that I could do, please do let me know!
If you would like to have your own littlel thing configured so you can mess about with some styling, let me know and I'll get something setup for you (let me know by posting what your Wiki Username is).
Anyway
/discuss
<b>Notes: </b>
It's not 100% some minor css hacks IE: quirks. Like no wiki logo in top left atm due to hiding the whole div. as a temp work-around. Will apply a transparent overlay there later, or a more appropriate Logo if I can get something from UWE so I can do it better :)
<b>Status - 10th July</b>
* At the moment I am "testing" a cycling header image system. Just load the page and press F5 a few times to make it load new images. There are three different banner backgrounds and three different "logos" for now (more will come as UWE release more images) I'll get a res-node up there too later.
* Feedback on the sidebar would be nice, leave it transparent or have it solid background. The background will be the same colour as the main content body, if you scroll down you'll see a screenshot of it with the solid background.
* I'll tweak the header images a bit later, IE: moving the NS2 logo down a bit.
* Image uploads currently disabled, will get Charlie to fix them later (<i>only he can fix it atm</i>)
* Happy to have suggestions for how to tweak it, but if the overall design is liked. I might set it up for the most part, just minus the header logo changes for now until that's fixed. However off-site hosting of header images might mean a speedier response time... if the UWE server is under load.
Comments
Also the boxes at the bottom looks off on colours. The visited link colour is very light compared to the background here too. Personally, I would go the opposite direction and make the background colour a dark blue and leave the links as is and see how that looks. The gray headers look a little out of place, but not as bad.
Nitpicky comments, overall fantastic work.
I'm looking to see if there is a way I can have the header / background image cycle between a few different ones. I've seen it done, just gotta see HOW it's done on a system where I can't inject code into the core files for ezymode use :)
Anyone know some good .js I can possibly use?
EDIT: tweaked the css a tad. Will play more later. Get more overall feedback.
EDIT 2: Additionally, no image logo in top left atm, so you can't click on it. Just hid that box now as I need to replace the image itself with a transparent overlay when I apply the styling update.
Don't HAVE to keep the constant changing, but it's something interesting for the NS2 Wiki at least.
I'm gonna have to disagree here- I find the clean presentation of the nav portion of the page refreshing and visually pleasant. The color scheme inside the page area needs work.
The other things totally rock :) and especially if you compare them to the "original" ns2 wiki layout ... it made me shiver after I looked at yours.
Well done.
Does the picture in the upper left part change at random ? (It was an Onos head and after I clicked around and went back its now a Hive ...)
<!--quoteo(post=1716553:date=Jul 10 2009, 03:41 AM:name=CyberMantis)--><div class='quotetop'>QUOTE (CyberMantis @ Jul 10 2009, 03:41 AM) <a href="index.php?act=findpost&pid=1716553"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->I'm gonna have to disagree here- I find the clean presentation of the nav portion of the page refreshing and visually pleasant. The color scheme inside the page area needs work.<!--QuoteEnd--></div><!--QuoteEEnd-->
The sidebar DID have a solid background like the main nav, I was testing to see what it's like without the solid background. Mainly because of the hive image (refresh if you see the onos) with the tentacles stretching down into the box.
Trying to work it so that I CAN have a greyish background but make it semi-transparent... however that isn't working out too well for me just yet as the opacity settings change the WHOLE box (text and all).
<!--quoteo(post=1716602:date=Jul 10 2009, 07:48 AM:name=1mannARMEE)--><div class='quotetop'>QUOTE (1mannARMEE @ Jul 10 2009, 07:48 AM) <a href="index.php?act=findpost&pid=1716602"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->The red out lined yellow box shouldn't have a white text inside thats impossible to read, so you should change the yellow box filling to something else, maybe dark blue or something like that.
The other things totally rock :) and especially if you compare them to the "original" ns2 wiki layout ... it made me shiver after I looked at yours.
Well done.
Does the picture in the upper left part change at random ? (It was an Onos head and after I clicked around and went back its now a Hive ...)<!--QuoteEnd--></div><!--QuoteEEnd-->
It does yes, I'm "testing" that idea atm, don't know if I WILL do that. Can have it set so that it will change on a daily basis.
I was thinking of working things so that the image will cycle based on what category of page you're looking at. IE: Alien stuff showing for anything Alien related. Marines for anything Marine related, and just general over-view stuff for other pages.
As the wiki expands add in more customisations based on categories of pages, like modding and community pages etc. etc. But have them all themed NS2 style, it IS dooable, but will require some tricksy JavaScript work.
I was going to throw a third image up there as well for that too, just have to tweak a few more things to help improve load time (atm the whole header / background is a new image, not just the logo) so on slower connections people will notice the load time.
Keep in mind the main body of the page is yet to be properly themed yet though.
I think the access I need will be server-side file editing. I only have WYSIWYG access.
Look at the wiki, if you can find the right tags, then can style it. Otherwise tough (at this stage). Problem is the portlet's on the left are a little tricksy to skin seperately.
<img src="http://img248.imageshack.us/img248/6905/solidbackground.jpg" border="0" class="linked-image" />
By <a href="http://profile.imageshack.us/user/daworm" target="_blank">daworm</a> at 2009-07-09
*buys game*
*game launches*
*feature missing*
wtf. ?
So yeah, what I've done for now is I have 3 "logos" per se that will show (hive / onos / masc) and at this stage two header backgrounds.
They'll both come up randomly so you can have a hive / lab as header background or hive / corridor as header background
I haven't optimised the images yet for file-size so you may just see black initially as it loads, as I'm only testing.
If the idea floats and people like it, I'll look at implementing it more smoothly.
Additionally comments on making the sidebar solid or transparent too would be good. See image in earlier post.
We really need to get those image uploads sorted one day though :(
<!--quoteo(post=1716653:date=Jul 10 2009, 02:23 AM:name=Daworm)--><div class='quotetop'>QUOTE (Daworm @ Jul 10 2009, 02:23 AM) <a href="index.php?act=findpost&pid=1716653"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->So yeah, what I've done for now is I have 3 "logos" per se that will show (hive / onos / masc) and at this stage two header backgrounds.
They'll both come up randomly<!--QuoteEnd--></div><!--QuoteEEnd-->
How about having an alien header come up for Category:Alien, a marine header for Category:Marine, and a neutral one for other pages?
Hopefully you understand what I mean from that mess of words.
We really need to get those image uploads sorted one day though :(<!--QuoteEnd--></div><!--QuoteEEnd-->
That's going to need Charlie to fix atm though. I'll leave him alone for a few days before I pester him about it some more :)
For now the main thing is I can at least work on some styling for it.
<!--quoteo(post=1716687:date=Jul 10 2009, 06:43 PM:name=ljcrabs)--><div class='quotetop'>QUOTE (ljcrabs @ Jul 10 2009, 06:43 PM) <a href="index.php?act=findpost&pid=1716687"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Looking good.
How about having an alien header come up for Category:Alien, a marine header for Category:Marine, and a neutral one for other pages?<!--QuoteEnd--></div><!--QuoteEEnd-->
Tis my longterm goal, but that requires a bit more work on the API.
Most likely it won't show up until AFTER the page loads though, but without building and testing it, no way to tell.
Mainly, if the idea is "ok" with the community, then I'll look to build on it more. I'm wanting to keep in mind those on slightly slower connections. Atm they need to load 6 images for the header to cycle through them all, that's manually loading. But I can work around that by building in some pre-load code on the site to make it load all the images down when you access it, just the script that does the random image kicks in seperately.
<!--quoteo(post=1716692:date=Jul 10 2009, 06:59 PM:name=Tom Hoen)--><div class='quotetop'>QUOTE (Tom Hoen @ Jul 10 2009, 06:59 PM) <a href="index.php?act=findpost&pid=1716692"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->One thing what annoys me is that this "natural selection 2" logo is too high up. Lower it a little so it doesn't start from the top immediately. I always try to roll up and up with my mouse, and then realise that it is already at the top.
Hopefully you understand what I mean from that mess of words.<!--QuoteEnd--></div><!--QuoteEEnd-->
<!--quoteo(post=1716695:date=Jul 10 2009, 08:05 PM:name=Emoo)--><div class='quotetop'>QUOTE (Emoo @ Jul 10 2009, 08:05 PM) <a href="index.php?act=findpost&pid=1716695"><{POST_SNAPBACK}></a></div><div class='quotemain'><!--quotec-->Agree with Tom, the NS2 logo is touching the top of the screen, lower it down so its kinda in the middle of the top bar. But looks very good so far :)<!--QuoteEnd--></div><!--QuoteEEnd-->
Yeah, I can do on that. However I (stupidly) left the source files I was working with at work >.< So it'll have to wait until Monday for me to work on the header background image (<i>I suppose I can just do it better here at home with Photoshop... at work I am just using a freebie image editing tool</i>)
Also the boxes at the bottom looks off on colours. The visited link colour is very light compared to the background here too. Personally, I would go the opposite direction and make the background colour a dark blue and leave the links as is and see how that looks. The gray headers look a little out of place, but not as bad.
Nitpicky comments, overall fantastic work.<!--QuoteEnd--></div><!--QuoteEEnd-->
Still looks great, I like the black background on the side. Make sure you change that warning text like <b>Comprox</b> asks. It's pretty hard to read.
Edit: Nvm, you did it. Just wasn't in the screenshot.
You mean solid background?
Well, I can test it out and see how things go. I kinda like it without, but I can see how it goes with I guess.
If there are no other major objections I might put the new skin up Monday or Tuesday, allow time for Charlie to check it out (and according to the current twitter update, possibly move office).
Now sitting around 25-30K for the backgrounds, however the logos being PNGs sitting around 40-60K, will look at optimising them further when I can.
At this stage, waiting on Charlie to enable image uploads so I can remove the Skulk Eye properly, as that kinda ruins the whole skin...
On the other hand the contrast of the blue text in the boxes is a bit too low.
I think I might make the "header" sections white so that they stand out...
With the boxes and yellow background color. I plan to remove the bigger of the two, and stick with using the smaller one along the top of the screen.