Forum:Connections boxes standardisation

Ten Forward → Connections boxes standardisation (Reply | Watch)

Background

The doctor recently raised an issue on the Vulcan ambassadors to Earth template talk page, which is, that we currently have two systems in use for the connections boxes. This style which has been in use for a couple of years:

And this style which was the dominant style previously:

The doctor argues that the newer style is more appropriate when the templates are dealing with multiple fields and large volumes of information, such as those you find on the Star Trek: The Original Series page, but for small templates with a single or very few fields and a limited umber of links in the template the old style is more appropriate. I agree with this to a degree, because the templates are in fact very similar in design, the major differences in the newer design are that the title bar does not have a line around it, and the listings are divided into boxes, dark grey on the right showing the sub-title for the listing, with a corresponding light grey box with the links - while typically the older style uses a white background, with emboldened text in the same block to give section titles and lines use to divide up the information.

Examples

I feel the old style should be phased out in favour of the newer which is much clearer to read and more visually attractive. I offer the following examples as evidence of this.

Example 1

For a large and quite complex template such as:

...we get with the old system a single block of text, it can be quite difficult to pick a name out of that list. I would suggest something along the lines of the following adaptation of the newer style to more clearly sort this information:

Example 2

Now for a much simpler version and the one that sparked this discussion. The Vulcan ambassador template as it currently stands:

And how I would suggest the newer format would tackle it:

Note, this also tackles an issue of bias: Why should the new universe, if we treat it with equal value, be marked as originating from that universe while the other links in the current template simply assume dominance of the prime reality.

Example 3

And finally the simplest type of template we have, with one section of information:

Which would be modified only slightly:

Discussion

Now I imagine some of you might ask why bother, this is all a bit fussy, the changes are quite minor, etc. However, the new format is undeniably much better at handling large volumes of information (see {{Headsofgovernment}}, {{Ships named Enterprise}}, {{Klingon birds of prey}} for examples). It is also not actually very different from the old format, but having these two formats is a bit messy and inconsistent, so I'd say trying to make all the templates work under one unified style is preferable. --8of5 18:34, 3 June 2009 (UTC)

I have no problem with adapting the problem templates to new layouts as suggested -- the only reason I don't work with the layout is because I have no patience for writing manual code with all the color-type-((gr3294-text-align: boxes. There should be a "table class" code for the newer style written into the site style sheet (which is why the older tables only require one parameter -- they have a table class written into the site).

I'd go ahead and get writing, but code frustrates me and I'm just dabbling right now -- i'm swamped with real life worries so i only pop over and edit randomly when i need a break from my RL work. -- Captain MKB 18:48, 3 June 2009 (UTC)

sidenote -- the table class of the older templates is called "toccolours", it provides the code for the proper bolding of the headline fields (those that use the "!" rather than the "|" automatically become headlines when you use the tables) and for the silly little things we can tweak once and have it affect every coded table on the site like the line around the headline box, etc. -- Captain MKB 18:52, 3 June 2009 (UTC)

Are you saying the we could do something to the code the old template uses to magic all the old ones into something along the lines of the new style? (and presumably tweak any/all the old and new ones to work best with that new coding?)--8of5 18:57, 3 June 2009 (UTC)

It might not be magic where the images are concerned, that would need edits because some of them are jammed into odd spaces to save space. But we could set the headline color to not have an outline automatically, and work with the arrangement of gray space and border white space in those to be more similar. -- Captain MKB 19:02, 3 June 2009 (UTC)

I've noticed wikipedia use a template to generate their boxes, with optional fields for text below the list sub-boxes, and images to appear on one of or both sides. It wouldn't "fix" our current crop of boxes, but it could make it much easy (and code hiding) for new box making to create a template for box generation, and also mean we would then have the means in future to update all boxes with just one or two edits should we change style again at any point. --8of5 19:14, 3 June 2009 (UTC)

For me, I dislike the grey backgrounds of the "new" style. This is such a minor comment, though. What I believe the push towards the newer style is involves its apparent use of a tabular format, which creates the rows and column division that things like the Enterprise staff templates almost need. --Captain Savar 19:57, 3 June 2009 (UTC)

I'm a little worried about turning all the content boxes gray too, both from a coding perspective and from (my opinion) a stylistic one. while it is nice to have the white gridlines among gray boxes, is it negotiable to have the reverse?

By the way, did some magic, removed the tableheader border outline and differing text sizes from "old" templates as soon as your browser recaches the site. -- Captain MKB 20:18, 3 June 2009 (UTC)

Wow, nice work Mike that's a dramatic improvement I think!

The current line around each box area system works quite nicely indeed (looks much more modern and stylish than either former version), but I think some colouration to the section really helps define it, especially on the templates where there are other white boxed out areas for images or additional information at the bottom. How about lighting our standard lighter grey to something almost imperceptible, but just enough to pop those boxes out from the rest of the white areas (like the test colour I've added to the Enterprise-E senior staff box).

Also, the text in the subheading boxes appears to be a bit bigger than the text in the corresponding lists, and the same size as the title bar text. I think it would look better if that was shrunk down to the same size as the list text but still emboldened; it's a little dominant at present (I've tested that on the Enterprise-E senior staff box too to show you what I mean)

However those quibbles aside, great job Mike, they look amazing! --8of5 23:35, 3 June 2009 (UTC)

One more thing: I noticed when testing this out on the {{mirror universe stories}} template, the standard colour for the top bar seems to be dark grey, rather than the standard blue used throughout the site. --8of5 23:47, 3 June 2009 (UTC)

Thanks! My issue right now is making the text in the "headline" boxes be the right size having to add any conditional text size code. Also, if we make all the text boxes light gray, the images that are currently included will all continue to have white backgrounds floating around them -- thoughts?

As to the "neutral" header, unfortunately we can only pick one automatic header color. I was thinking we use the dark grey as the "Automatic" color and then when we need the standard blue we call the color template with a null variable.. -- Captain MKB 23:53, 3 June 2009 (UTC)

Per the white background images, that's fixed easily enough by moving them into a separate side bar like the Enterprise-E senior staff template has it. And I'd be happy to go through and fix them if we implemented the grey background - That's if we do, of the three people to speak up here two have objected to adding the colouration.

I'd of thought using the standard blue as the standard header colour would make more sense? Both being the standard it means we'd only need to modify it for specifically affiliated boxes, rather than every box (modifying either to an affiliation, or to standard blue – the grey as standard would never show up?). --8of5 00:01, 4 June 2009 (UTC)

I've found a potential issue, since the modifications {{timeline}} (both the new and old versions) seemed to have lost its grey colour in the central column. I found a fix, but it might indicate a similar problem cropping up unoticed elsewhere is possible. --8of5 00:40, 4 June 2009 (UTC)

Those templates should probably use the center column fields as headline "!" rather than content "|".. Now the dark grey will become bluegray, and match the top headline bar. Is that awful?

I've added the standard blue gray to the site style, along with the light gray.

I hit the headline fields with smaller text -- but this gives us small text at the top headline also -- since its at the top, it doesn't read less clearly -- you still know its the headline. It also means space will be saved, so I like it. Thoughts? -- Captain MKB 15:39, 4 June 2009 (UTC)

The standard blue for the section headings is different, but I quite like it, has a bit more zing.

Am I right in thinking then, that the title bar and any section headings have to have the same formatting (as default at least), and all other sections similarly have the same formatting? If so I guess that's why the additional sections (the sidebar with images and such) are showing with a light grey background too? But that's easily fixed (getting rid fot he white box effect you previously referred to) by customising just those few boxes that would be better in white.

I think I would prefer the title bar text to remain bigger, I can understand your reasoning, but for templates such as {{mirror universe stories}}. I think the title needs that extra punch, as even though it's clear the title it gets a little lost in the sheer mass of the rest of the template. I don't think it's a problem for the default template settings, but for our default style standard I think adding that extra bit of code to each template to enlarge the title slightly would be better. --8of5 16:54, 4 June 2009 (UTC)

As much as I hate the HTML "big>", it might be good to use it in cases where there are multiple headers or a weak top header that needs punching up. for the small ones, it being small isn't as much of a handicap and doesn't look bad -- like the USS Baker template -- the whole thing is small, so it doesnt hurt that the headline is too.

Same thing for image sections, we'll have to manually white them. Another workaround would be to require "logo images" site wide have to use the light gray background color and replace them, but that could be tricky as a make-work issue. -- Captain MKB 17:01, 4 June 2009 (UTC)

Selective use of the ol' <big> thing works for me, as does selective whiting; editing all the images to grey just to include them in templates would be far to much effort me thinks. --8of5 17:04, 4 June 2009 (UTC)

Another image workaround might be to have the tables automatically border images with the same medium gray as the field outlines, so that they look like a panel within the fields they exist in now (as in "us not recoding every template on the site") -- Captain MKB 17:11, 4 June 2009 (UTC)

If I understand the suggestion I don’t see how that would avoid the white box effect, it would just make a different shade of grey around the image wouldn't it? --8of5 17:35, 4 June 2009 (UTC)

It would make the image itself appear as a separate field, even though it was floating in the other field. It would have its white background, but have a darker gray border between the white of the image and the light gray of the field, making it seem less like it was anomalous for a white background to be there. -- Captain MKB 17:40, 4 June 2009 (UTC)

Sounds a bit odd to me, have the icon float on an all white background works for when we have more than one icon on the template because it hides the fact we might have to size them to different heights or widths or that the boarder of background on the actual image varies. Having them with a box right around the image would really highlight those inconsistencies. --8of5 17:46, 4 June 2009 (UTC)

Suggestion

Hi, you've both done a great job with the template upgrades and they definitely look a whole lot better now. However, I have one tiny suggestion/question. On the templates where the dominant {{color}} is used the text/links can sometimes become muted by the color, especially the links on the "fed" color. My suggestion would be to change the text to a white or other lighter color to prevent this. Now the span parameter would work for this, but is there a way of incorporating it into the style sheet?

Example

The original template as is:

The suggested template would be:

Obviously, a bit of tweaking would be required color wise, but this is just a suggestion. --The Doctor 03:05, 5 June 2009 (UTC)

Submitted for your approval: changes (refresh your cache to see new styles)

edits to {{color}} may be required to accomodate light text. -- Captain MKB 08:20, 8 June 2009 (UTC)

tests:

I was noticing this and was going to suggest changing the colours. But the white text looks fantastic, good thinking! --8of5 19:05, 8 June 2009 (UTC)

It certainly looks great and makes the text a whole lot clearer. Thanks for sorting that out Mike, while I do have some familiarity with the coding, I didn't want to mess anything up, as the new style is one I certainly agree with :D --The Doctor 22:21, 8 June 2009 (UTC)