Forum:Site design update

In the next days, I'll start fixing the templates which have suffered most from the FaceWikiShack skin. No matter whether we like it or not, it's the default skin for anons and therefore the skin 95% of the site's visitors have to endure.

As I already mentioned in the last community conference, this requires certain templates to lose some "weight", i.e. to become slimmer, due to the reduced content area width in comparison to fixed-width Monaco (aside from usability, we've lost around 50px). In particular, my plans are:
 * Reducing the standard infobox width from 275px to 240-250px
 * Some navboxes (like Navbox overviews FO3) will need to be rearranged since they now take up more than half of the content area's width.
 * Intro-based templates may lose their images. While the images are a nice touch (in my opinion at least), they make the text next to them appear squeezed, especially if there's a navbox next to the intro template.
 * If the infobox width is reduced, Interactions-based templates can be made wider by the same amount. The same applies to, Creature stats/Creature stats gamebryo, Inventory and basically every other template which leaves a margin for the infobox. We'll have to see whether that suffices; if they still look cramped, we may have to make these templates full-width and find ways to make sure they do not collide with infoboxes in articles (such as modifying their placement), or redesign them from the ground up (although that's going to be tricky for  at least).

Along with that, I'm planning to switch all of our main templates (and the CSS for "normal" tables) to a new design. I've made showcases at User:Porter21/sandbox1 - please let me know what you think about them, and which of the three table designs would be the best to use in your opinion. -- Porter21 (talk) 15:33, October 30, 2010 (UTC)
 * Table Design 1 suits me. I like the bit more contrast. My biggest concern is when Interactions or somesuch butts up against the infobox and so shifts down the page leaving large chunkc of empty space. We have similar problems on pages like Poster and Bottle cap, but that's a different issue... And, thanks, Porter.--Gothemasticator 15:43, October 30, 2010 (UTC)
 * EDIT: Hmmm... I guess we no longer have a space problem on Bottle cap since the pics are no longer there. Too bad.--Gothemasticator 15:45, October 30, 2010 (UTC)
 * Yeah, the collision issue is why these templates currently always leave enough space for an infobox beside them. As I said, we'll have to see whether it's bearable when the infobox space has been reduced and these templates have a little more room. If it's still cramped, I'll have to redesign them from scratch so they use less horizontal but more vertical space - that's not possible for some of them though (e.g. ).


 * Number one for me. Looks good. I don't like the lack of outline one number three. 15:51, October 30, 2010 (UTC)

I also agree Table 1 is the best design, for the rest, I have faith in what you do Porter :3 -- Light Daxter -  Talk  16:12, October 30, 2010 (UTC)


 * -webkit-border-radius looks good in general on compliant browsers mainly for the info box. But where table data is concerned then it looks nasty, especially tables with mass columns. Which brings up the issue that in compliant browsers and none compliant, the effects are totally different and therefore the end results differ. And thanks Gothemasticator for the link to bottle caps, reminded that I think the quotation template has way to much padding to sit in the current constrained div, which might want to be looked into in this overhaul as well. As for the colour pallet used, yeah really don't like pastel colours. I just don't think I could live with it on a permanent basis. GhostAvatar 16:45, October 30, 2010 (UTC)


 * I haven't used only used -webkit-border-radius; the only current browser which does not support any of the border-radius derivatives I've applied is Internet Explorer. The rounded corners display fine in e.g. Firefox, Chrome, Opera and Safari; they will also display fine in Internet Explorer 9. In other IE versions the boxes will simply not have rounded corners and no shadows; I doubt that's a major usability issue.
 * The color palette is the same as the one currently used by the navboxes and portals. Feel free to come up with a different 4-color-palette which fits the site's overall color scheme (that's not meant sarcastically - I'm always open to suggestions).
 * I'll add Quotation to my list of templates to look at. A slightly reduced padding certainly won't hurt, although the problem will also become less prominent once the infobox width has been reduced.
 * Regarding the usage of rounded corners in tables - well, different strokes for different folks I guess :) -- Porter21 (talk) 18:16, October 30, 2010 (UTC)


 * Yeah I noticed, I really need to get up to date with Gecko,WebKit and CSS3 lolz. But my concern was more to do with IE8 and down as that would consist of a large portion used to view pages, which means a large portion having a different viewing experience.
 * As for the colour palette you may be right as I have not looked into that in detail, but it does seem like they are pastel shades of the originals currently used.
 * As for the Quotation template, I didn't mess around with that insite as it is locked so I could not use preview. So I messed around using Firebug on FF quickly and found that no padding on the two side TD and padding on the centre of :10px 0 20px 0; with the removal of line height as well, found it worked well especially with quotes as the top content crammed in next to a info box. But that is only in FF, have not messed around to see it cross platform as such, but I doubt it would be to dissimilar for such basic attributes.
 * With the tables I have a idea that I will mess around with and get back to you, but I have a feeling that what I have in mind might be to complex to implement in a template.
 * GhostAvatar 19:12, October 30, 2010 (UTC)


 * Now that the server is working, this is what I had in mind User:GhostAvatar/sandbox1
 * On a side note another little thing that annoys me but probably not noticed by most others, is the seam with the tiled background, so I uploaded a version that should take care of the seam Background old.jpg
 * GhostAvatar 00:28, October 31, 2010 (UTC)


 * Usually I share your view that a design which looks differently in various browsers is not a good one. However, with IE people already have a different viewing experience from the new skin alone since Wikia heavily uses CSS gradients and border-radius for the skin, neither of which works in IE (there are also a few other minor things like them using display:table-cell for the site navigation, but there are the most noticeable).
 * The colors are exactly the same as used by the current navbox and portal designs; I have made no changes there.
 * I've been adjusting the quotation template a bit, and although I have removed/reduced the inner paddings, I have left the outer padding around the quotation marks since I find having the template indented helps setting it apart from "normal" page content. To compensate for the reduced width, I've made the font smaller and reduced the line-height (by the way, Wikia's most recent change to the overall line-height was quite a bit overdone in my opinion.
 * I've also started making width adjustments to various templates such as the infoboxes, navboxes, interaction charts, inventory tables etc. I've not adjusted Creature stats and Creature stats gamebryo yet because these will require a more extensive rework if we want them not to have collision issues with infoboxes. Not sure whether I'll fix these or whether I'll first wait and see what comes out of Wikia's promises to improve the situation regarding infoboxes (not that I expect to come much of it, but you never know). Overall, it'd be worth considering finding other ways to deal with possible infobox collision (through page layout, for example), as the current approach makes another ~260px unusable for templates, in addition to the 300px already occupied by the Wikia rail.
 * Regarding your design, it resembles one of my older ones :) The problem is, neither for infoboxes nor navboxes you can have different designs for the last row as you don't know which row is the last for a specific infobox (hope that makes any sense, kind of hard to explain). For the navboxes you also have to deal with 1) the navbox being collapsible and 2) it possibly having collapsible sections. To see what I mean, simply add the class "collapsible" to the navbox design - since only the header remains, its lower corners run into the rounded outline. While that could be addressed for the header, it becomes rather tricky for collapsible sections (which we'll also have to take into account for the improved infobox template I've been working on). Finally, I think the table design's content cells should be lighter. The color is fine as long as the text on it is bold, but with non-bold text there's not enough contrast, at least on my screen.
 * After some more consideration, I don't think the rounded corners suit the new skin; maybe I (or someone else) will be able to come up with a better design later. Since the time I can work on the issues caused by the new skin is limited to tomorrow (I'll be gone from Tuesday until Sunday at least), I'll likely put the "aesthetics" redesign on the back burner and focus on fixing templates for now.
 * In any case, it's nice to have someone else making suggestions for CSS design as well - that usually doesn't happen much around here :) -- Porter21 (talk) 18:48, October 31, 2010 (UTC)


 * First of..... Wikia sucks =( agreed on the compatibly thing now I fully understand your dilemma, again Wikia sucks.
 * And yeah I got the thing about the attributes being applied to the bottom corner cells, that's why I said the idea I had might be impossible to implement.
 * The solution I have come up with which I am not to sure on how to implement as such (I don't fully know the limitations of Wikia), would be to add a bottom bar to the table that basically serves no purpose except to close off the table with the rounded corners. Therefore you will not need to apply any rounded edges to any of the table cells that require user content (except the header of course), maybe attach this bottom bar to the |}. But with the collapsibility issue that was something I didn't foresee, but if you are able to implement the bottom bar for style purposes, then have it still showing even on collapsed view it would also solve this issue. Plus internal collapsibility since all the internal cells have no round edges. Probably best done with nested tables as I have done in my updated style as a example (see navbox section), just need to get around the padding of that annoying white bar grrrrr this is why I hate tables, give me divs any day. User:GhostAvatar/sandbox1
 * As for the color scheme I now know where you are coming from, most of the boxes at the moment have background images, which is something I cant get to work in my sandbox =(
 * But I hear you on the redesign aspect, seems like they don't make things easy. As for CSS etc I am just a noob to be honest lolz
 * GhostAvatar 21:33, October 31, 2010 (UTC)
 * P.S. Fix the annoying background pleaseeeeeeeeeeeeeee =D

I've uploaded your background - it may take a while to appear because the graphics used by the skin are heavily cached. By the way, I never noticed the graphic is 120kb, seems a bit over-the-top for a background image. Anyway, regarding the design, I have a different design (without rounded corners) in mind I'll start playing around with once I get back - it should hopefully require less changes to the templates themselves than adding the bottom bar would.

Regarding the issues with duplicate paddings due to nested tables, those only start getting really bad once you have to account for a variable amount of cells per row or the ability to nest navboxes :) I've had more than my share of them when I created the navbox template (nested tables is how both the "real" infoboxes and navboxes are set up - the examples in my sandbox were just simple imitations).

Finally, "background-image" not working on most pages is a normal MediaWiki restriction. It does work in both the site-wide and personal CSS files (Porter21 (talk) 20:24, November 1, 2010 (UTC)


 * LOL the new background is only 2kb larger than the original. All I did was take the original, turned it inside out and then textured the joins to merge them before turning right way back again. I can scale it down to 70kb with no discernible loss in image quality if want, but that would only save 9 seconds for a user with a 56k modem to cache it initially.
 * But I look forward to you new designs GhostAvatar 21:10, November 1, 2010 (UTC)


 * I know your version is only a bit larger than the previous one, I was just saying that I never noticed before how huge the old one was ;) I guess every little bit helps considering how slow Wikia is in general, so a bit of optimization wouldn't hurt :) -- Porter21 (talk) 21:26, November 1, 2010 (UTC)

Here you go, 71kb version =) probably a few more out there that could be scaled down as well

removed broken image link

GhostAvatar 23:55, November 1, 2010 (UTC)

Thanks - I've moved it over. -- Porter21 (talk) 00:24, November 2, 2010 (UTC)

I personally think that the background for images in the infobox is a little dark. The style looks good but for certain images like those of weapons that have transparency, it can be slightly hard to see them. BrentH27 01:10, November 2, 2010 (UTC)


 * You know, the background image never updated (can still see the join lines) and it still annoys the hell out me grrrr. ☣Avatar☣ 20:05, January 30, 2011 (UTC)
 * EDIT: and I just found out why, the CSS points to background.jpg?1, the ?1 denotes which version of the image file (in this case the original uploaded version). So it either needs to be removed or changed to ?3. ☣Avatar☣ 20:11, January 30, 2011 (UTC)


 * I've re-uploaded it with a different name. Thanks for notifying me, I'd likely never have noticed (browser window set to a size which shows next to no background). -- Porter21 (talk) 21:24, January 30, 2011 (UTC)


 * Thanks, it makes a lot of difference as I can afford to use full screen while browsing (dual screen set up) ☣Avatar☣ 01:38, January 31, 2011 (UTC)