Forum:Color change and gradients

Forums → Ten Forward → Color change and gradients (reply • watch)

This forum discussion has been archived

This forum discussion has been archived and should not be added to. Please visit the Forums to begin a new topic in the relevant location.

Options

Only Modzilla and WebKit browsers will display the gradients!

---

Sidebar gradient

Base color (Red)
Current color.

Table gradient option 1	Table gradient option 2
...	...
new option	closest to what we use now

Sidebar gradient

Base color (Blue)
Proposed new color.

Table gradient option 1	Table gradient option 2
...	...
new option	closest to what we use now

---

All formatting we currently use would be retained, only the color would change. These gradients are "placed over" the image gradient we currently use, and that, or something similar, would still be used "under" these gradients for users whose browsers don't support this.

Combination test

The following is a test to see whether the combination of background image and CSS gradient works error-free in all browsers. If you are using a browser that is able to display gradients in the above example tables, but the below table looks red/black instead of blue, please add a note to the discussion below, stating which browser you use.

Combination of background image and CSS gradient overlay.

Opera test

The page http://projects.korrelboom.com/gradient-generator/ claims that cross-browser compatible gradients can be achieved by adding a filter (for IE browsers) and a Base64 encoded image (for Opera) to the CSS. The below table is a test of the Opera gradient. It's also supposed to be arranged in the way that is suggested below for "row headers".

Yet another test.

Note: Doesn't work when placed in the wikicode - the parser replaces it with a comment stating that this style is "insecure input". It may still work when placed in the CSS file itself, which I'm testing below.

Yet another test.

IE test

IE7 test (row)
IE8 test (col)

Integrated Test

Red gradients in a "natural" table environment - current table.grey style

	Column header 1	Column header 2	Column header 3
Row header 1	Content 1 1	Content 2 1	Content 3 1
Row header 2	Content 1 2	Content 2 2	Content 3 2
Row header 3	Content 1 3	Content 2 3	Content 3 3

Same gradients in a slightly modernized table style

	Column header 1	Column header 2	Column header 3
Row header 1	Content 1 1	Content 2 1	Content 3 1
Row header 2	Content 1 2	Content 2 2	Content 3 2
Row header 3	Content 1 3	Content 2 3	Content 3 3

---

Real world Test 1

Rank progression
Federation Rank	Ensign	Lieutenant	Lieutenant Commander	Commander	Captain	Rear Admiral, Lower Half	Rear Admiral, Upper Half	Vice Admiral
Klingon Rank	Warrior	Lieutenant	Lieutenant Commander	Commander	Captain	Brigadier General	Major General	Lieutenant General
Level	1	2-10	11-20	21-30	31-40	41-45	46-50	51

Tier	Lieutenant Commander	Commander	Captain	Rear Admiral (Lower and Upper Halves)	Vice Admiral
Cruisers	Cruiser Constitution (re-fit) Excalibur Vesper	Heavy Cruiser Cheyenne Stargazer Dakota Advanced Heavy Cruiser Excelsior	Exploration Cruiser Galaxy Celestial Envoy	Assault Cruiser Sovereign Noble Majestic Imperial** Dreadnought Cruiser Galaxy X* Star Cruiser Avenger Vanguard Emissary Nomad** Advanced Heavy Cruiser Retrofit (with transwarp drive) Excelsior (re-fit)**	Exploration Cruiser Retrofit (with saucer separation) Galaxy Celestial Envoy

Real world Test 2

Rank progression
Federation Rank	Ensign	Lieutenant	Lieutenant Commander	Commander	Captain	Rear Admiral, Lower Half	Rear Admiral, Upper Half	Vice Admiral
Klingon Rank	Warrior	Lieutenant	Lieutenant Commander	Commander	Captain	Brigadier General	Major General	Lieutenant General
Level	1	2-10	11-20	21-30	31-40	41-45	46-50	51

Tier	Lieutenant Commander	Commander	Captain	Rear Admiral (Lower and Upper Halves)	Vice Admiral
Cruisers	Cruiser Constitution (re-fit) Excalibur Vesper	Heavy Cruiser Cheyenne Stargazer Dakota Advanced Heavy Cruiser Excelsior	Exploration Cruiser Galaxy Celestial Envoy	Assault Cruiser Sovereign Noble Majestic Imperial** Dreadnought Cruiser Galaxy X* Star Cruiser Avenger Vanguard Emissary Nomad** Advanced Heavy Cruiser Retrofit (with transwarp drive) Excelsior (re-fit)**	Exploration Cruiser Retrofit (with saucer separation) Galaxy Celestial Envoy

Discussion

A past discussion about the same topics has been held on MediaWiki talk:Common.css before being started again here instead of being moved. Its content should be taken into account before commenting here. -- Cid Highwind 22:34, March 10, 2011 (UTC)

Colors

I'm for the new blue option as I feel it looks better overall. - Archduk3 21:47, March 10, 2011 (UTC)

As has been stated in the other discussion, the dark red color of table headers has been an integral part of the "Memory Alpha identity" since the very beginning of this site (about 7 years now). Not only should this not be changed unless there is a very wide and clear consensus among the long-term contributors for it - it also brings up the following question: why is there a choice only between the current color and a single other one? Why not put up a full rainbow of colors - or put other key elements of the design up for voting, too?

Realistically, the answer has to be - because designing by consensus, both the process itself and its outcome, are a nightmare. A nightmare that we probably shouldn't approach, or if we approach it, do it right through the end. Just bringing up two colors for voting is neither here nor there. FWIW, I also think that red headers "looks better" than having yet another blue&gray website that looks just like any other. -- Cid Highwind 22:52, March 10, 2011 (UTC)

"Voting"? This is a discussion, and every option can be explored. There are only two options right now because no one has realistically suggested any others, and if someone has a better idea for some other feature, why shouldn't we hear them out? - Archduk3 23:01, March 10, 2011 (UTC)

I strongly dislike the blues. Too bland with the grey background. The reds are a part of our look, and have been for ages. (Continued in section "Gradients".) -- sulfur 23:44, March 10, 2011 (UTC)

Gradients

I'm for option one. I think it looks better when used vertically. - Archduk3 21:47, March 10, 2011 (UTC)

I've checked the suggestions using [1] now. The "sidebar gradient", if not done just like the "table gradients", needs to show more color and less black - either by "ramping up" the gradients not from 0-50% but from 0-35% (or some similar value, if such is possible at all), or by not using pure black as the border color.

Regarding the "table gradients", the black-color-black ones ("option 1") look like piping - especially when vertically stacked, but even when used for a single table header. The one that just goes from color to black ("option 2") has a much cleaner look. Here, too, the black should be made less prominent. -- Cid Highwind 00:11, March 11, 2011 (UTC)

---

(Continued from section "Colors".) Having said that, having the gradient running through the table looks terrible. I don't see the gain here. -- sulfur 23:44, March 10, 2011 (UTC)

See the tables at Star Trek Online. - Archduk3 23:54, March 10, 2011 (UTC)

Make the examples above better. Show what a proper table would look like, not just the one column. That suggests that the whole table would like like what is shown above. -- sulfur 00:01, March 11, 2011 (UTC)

Adding them below would probably be better, since that is where discussion on the gradients is suppose to be. - Archduk3 00:07, March 11, 2011 (UTC)

The STO tables are not the best example, though - or at least not the one we should optimize our generic styling for. First of all, it uses a table header (markup:"!") where a table caption (markup:"|+") should be used. Changing that would remove one of the colored bars, making the table look less cluttered already. Second, all gradients, both the existing image one and the suggested CSS ones are obviously designed for a "column-oriented" table (headers on top, values below). If the table is "row-oriented" (headers in the first column, content in rows to the right of it), every styling designed for the other orientation will necessarily look less than optimal.

What we need to fix that is a separate styling for row headers than for the standard column headers (and, following that, a slap on the wrist for everyone who tries to use row formatting for columns and the other way around)... -- Cid Highwind 12:11, March 11, 2011 (UTC)

Are you suggesting having twice as many table options ("table column grey" and "table row grey") or is there some other markup we could use to differentiate between columns and rows? - Archduk3 19:46, March 11, 2011 (UTC)

I thought about that at first - but it wouldn't work because a very specific table could have both row and column headers (I guess an example could be found among our uniform or rank insignia articles). So, what I suggest is to consider one type of headers to be the standard (preferably those on top), and add another class to the th element only if it is a "row header". We would only need table.grey and table.grey th.rowheader, or, in wiki code:

{| class="grey"
|-
! This is a standard header, no need for additional css classes
|-
! class="rowheader" | This is a non-standard row header, needing an additional class
|}

-- Cid Highwind 00:37, March 12, 2011 (UTC)

That seems like it would work, and it could be added to all the tables pretty easily. I also assume we would try to use a rotated version of the image gradient as well. - Archduk3 00:48, March 12, 2011 (UTC)

Yeah. Whatever we do, MA should look the same in all browsers, as far as possible. If what we do includes a rotated CSS gradient, it should include a rotated gradient image as well.

For what it's worth, I had the chance today to check this page using a Safari browser. While the Wikia ribbons have a gradient, the examples above don't - so there's probably something to add to the example CSS. -- Cid Highwind 22:20, March 12, 2011 (UTC)

The style shown in section "Integrated Test" is my preference for now. It combines a red gradient (slightly brighter start value than before, to make up for the earlier "color decay" when compared to the image gradient) with a uni-color fallback (for those few browsers that don't implement any of the gradient styles used now). It also fixes the until-now buggy Webkit gradients, so that those users can now see some gradients as well. :) -- Cid Highwind 23:59, March 14, 2011 (UTC)

As it is right now, the Intergrated Test doesn't work in Firefox, and neither do the IE examples above it, since I haven't had the time to devote to that yet. I should be able to poke around with them soon. Checking the IT in IE8, I would say that #880000 is way to bright when compared to the #660000 we use now. Since I can't see what Opera users see, is #770000 too dark still? I don't think we should go much brighter than one "shade" of red if we're trying to maintain the look as much as possible, and I'm not seeing a big difference between the image and #660000 as is. - Archduk3 01:50, March 15, 2011 (UTC)

Yeah, there's a slight problem with Opera as well - row header gradients are oriented like those of "standard" headers, although the CSS has been properly copied, and the other row header gradient (the test above) works well. The difference between my and your Webkit CSS seem to be that Webkit does not use a webkit-linear-gradient but a webkit-gradient (linear ...) syntax.

Regarding colors, the thinking that went into that decision is that a gradient from #600 to #200 has an "average color" of #400, while the original uni-color header had a brightness of, obviously, #600. I then experimented with some values and found that starting at #800 would be the best value between "too bright" and "too dark" for me, so I'd like to keep it as my preference for now. However, differences between the non-calibrated monitors of various users are most likely bigger than the objective difference between #800 and #700, so if a majority of users will favor #700 over #800 (perhaps in a later, fine-tuning step of whatever gets decided before?), that could still work, too. Let's just keep it alive as a variant of the red gradient suggestion for the moment, though. -- Cid Highwind 11:17, March 15, 2011 (UTC)

Slight addition: Got the headers working properly in Opera, by adding a table.grey to the selectors in the test CSS. Maybe it now works for other browsers as well. With the orientation of row headers now changed, they (being much longer in the direction of the gradient than perpendicular to it) do indeed look brighter than they should. Perhaps the row headers could start at #600 while the column headers start at #800, so that they are being perceived as the same color. I'm going to change that in my suggestion. -- Cid Highwind 11:34, March 15, 2011 (UTC)

So I've played around with these for a bit, and I can say I rather like the new style option without the breaks for cols or rows.

That said, the brighter color may make the cols look similar to the rows when they are only one text row high, but they clearly look brighter when the col gets any taller than that. Since the image gradient is pretty close to #660 - #220 when only one text row high, which most are, I would go with that for both. This is because any row gradient will be squeezed to the smallest width possible, which is generally smaller than the example, because of the wikia enforced 680px fixed width, and the most likely expansion of the gradient, the cols, will makes the two look different from each other anyway. - Archduk3 17:31, March 18, 2011 (UTC)

If you're adding several "real-life" examples, please make them realistic. A table with a single content line should not use row headers. There would need to be 2+ columns AND 2+ rows to make both types of headers necessary in the first place. Also, if a table has both headers, the top-left table cell (both in the header row and header column) is not a valid header and needs to be blank.

Last but not least, the example shows that the additional full-width header aren't sensible. They should be turned into a "|+" table description. -- Cid Highwind 11:27, March 19, 2011 (UTC)

Well, I've removed the initial test since you seem more concerned with berating me for not imposing your personal format on the minutia of the suggestions, instead of replying to the points raised. I'll make sure that the next time I pick a table at random for something like this to spend hours combing the site for one that's "realistic" enough. That leaves just the sampling of the most predominate examples of row headers on the site that I'm aware of, and I don't think it's particularly necessary to have multiple rows in the example since the only restriction is on the width of the content space, not the height. Highlighting that restriction and its effect on tables in relation to differences in the shades of color was, of course, the whole point of those examples anyway. - Archduk3 12:03, March 19, 2011 (UTC)

Combination test

The combination test isn't working because the Common CSS sheet is overriding the local style for some reason, which is why the text isn't centered. The test here (bottom of page) shows it works from the CSS sheet with the following. - Archduk3 01:33, March 11, 2011 (UTC)

table.combo {
	border: 1px solid #666;
	background-color: #222222;
	color: #FFFFFF;
}

table.combo tr th, table.combo thead tr th {
	color: #FFFFFF;
        background: -moz-linear-gradient(bottom center , #0E1519 0pt, #123d68 100%, #0E1519 50%) !important;
        background: -webkit-linear-gradient(bottom center , #0E1519 0pt, #123d68 100%, #0E1519 50%) !important;
	background: #000000 url(http://images.wikia.com/memoryalpha/eo/images/f/f7/MA_page_bar.png) repeat-x;
	text-align: left;
	font-weight: bold;
}

table.combo td {
	border: 1px outset #888888;
}