Forum:The New New look
Moving this from the front page talk page to here, which is slightly better suited for discussions.
I've looked through User:Imperial Grand Survey/wikia.css and extracted just the changes to User:Tjoneslo/wikia.css in order to try them. I have the following comments:
- Pick a cleaner background image. The scratchy image is distracting.
- Because there is no gutter (white space) between the background image and edge of the article, the text in the background overlaps that of the article making it confusing to read.
- The WikiArticle and WikiRail must be side by side. This is one of the can't be changed rules from Wikia. I think this is because the rail holds advertising for the not-signed-in users. So you will need to make the two chunks work together.
- We may have to be careful of the black background with colored stripe. Mongoose has claimed the look as trademark for their Traveller line. I'm not sure how far we can push the look without getting in trouble, and I'd rather not find out the hard way.
- I like the idea of using percentage widths, as I don't like having my browser set to the full width of my screen. But my preferred browser width is too narrow for the default Wikia width.
I'm sorry if this sounds harsh, it's not supposed to be. Too much time testing software, not enough interfacing with real people. Tjoneslo 00:00, March 30, 2011 (UTC)
- Not harsh at all, just honest opinion which is all I could ask for. This was very much a first cut and I made multiple changes (without keeping perfect track of them, remiss of me I know but....) so some of your comments relate to things I still want to change or fine tune but time has conspired against me to get them done. I must sit down with the original version of the css file and document all my changes and see if I can get them sorted better before having another shot at getting things right.
- The image - yes it's scratchy - it is in fact a scan of the lid my original black box - purchased I think in 1979! The original is a lot scratchier, I did a bit of touch up work with PaintShopPro. I actually thought the slightly scratchy look made it look a bit "battle worn" a bit like Beowulf itself, but I can see how it might be distracting.
- Gutter. This will require a bit of work with the positioning of the article in the body part of the page. It seems there are about 4 or 5 places where this needs to be defined to get it to work correctly, I don't think I've set them all exactly the same in this version, something to work on.
- WikiArticle and WikiRail; I was unaware of this stipulation and I've actually simply made WikiArticle 100% of the centre panel, partly because I wanted a quick fix but mostly because there is no guide I can find to the actual layout from Wikia which means most changes are a matter of suck it and see. Easy enough to fix (when I can work out how I've changed it in the first place).
- Mongoose. Bugger. There are a number of options, including asking them for permission and finding a better image. I wanted an image that was quintessentially "Traveller" and I thought the original black books were about as quintessential as one could get. If anyone else has other suggestions for an image please speak up.
- Percentage widths. Frankly if you are doing CSS without them then you've obviously never heard of wide screen monitors or people like Tjoneslo who use reduced widths and you shouldn't be doing web design, let alone css. I'm surprised the supposed gurus from Wikia went to all that trouble to design Oasis and did it all in fixed width. The only real issue with it is when people have really narrow screens, but they have just as much trouble with fixed widths as percentage ones. The rolled gold solution is to have a test for windows under a certain size and have then default to a fixed width with scroll bars, but that is very, very hard indeed with such a complex css installation.
I'm open to any and all suggestions, hopefully this week I'll get a chance to have another play with the look and see if I can get it a bit better. Imperial Grand Survey 23:46, April 2, 2011 (UTC)
- Multiple changes. Despite all the changes to the UI, this is still a wiki run on the Wikimedia engine. If you scroll to the bottom of the page, there should be a black menu bar. One of the options is "My Tools", which displays a short menu, one of which is "history". This will display the history page for the current page. You can then see each of the changes you've made and in order. I used this to extract the changes you made to my wikia.css page.
- Mongoose. As long as you don't go completely overboard with the black text and color stripe motif it should be OK. It's something you need to keep in the back of your mind while doing designs.
- If you look through the pages, not all of them have the Article & Rail side by side. But the main articles and especially the front page need to be done correctly. Tjoneslo 17:22, April 3, 2011 (UTC)
'Much Better Now'
After a week of constant playing I have nutted out most of the required changes for the CSS look I have been trying to achieve. My first cut actually made too many changes, I now have it more or less right having pulled apart the original CSS file a bit more and got my head around what it was trying to achieve. I have also refined the background image. The main issue now is the header and the footer appear to wrap around the end of the main article space in the middle of the page. This gets more prominent as your screen gets wider and is an inevitable consequence of using the percentage widths. It actually doesn't look too bad, on a really wide monitor (1920 and up) the header and footer actually appear to scroll around as the curve that is built into the background becomes exaggerated. On standard width monitors it isn't noticeable and they look similar to the standard headers. To fix it would take some hard core work on re-doing all the background images for both header and footer which is a much more complicated task. Things mentioned above fixed (and other things):
- Background image cleaned up
- Gutter issue sorted
- WikiaRail displays correctly when present on the page
- Percentages tweaked so things display more evenly
- Overlay of small buttons and other things overflowing out of header and footer sorted
- Footer now correctly stays same width once bottom of article reached
- Search box no longer disappears or appears on funny spot on the page
- Wikia adds below article mow display across the page instead of one under the other
I'm happy this is close to as good as I can get without spending weeks and weeks. If people have other suggestions I'd love to hear them, if not then if people like it, then it's everyone's to use as they like. Imperial Grand Survey 12:47, April 28, 2011 (UTC)