Forum:Color change and gradients

Forums → Ten Forward → Color change and gradients

Options[]

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.

[test removed]

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 [link removed] shows it works from the CSS sheet with the following.

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;
}

- Archduk3 01:33, March 11, 2011 (UTC)

Opera test[]

The page "Cross-Browser Gradient Generator^(X) " 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".

[tests removed]

IE test[]

[test removed]

Integrated Test[]

[tests removed]

Discussion[]

Initial discussion[]

Color changes for the sidebars and tables to go with the other colors currently used by the default skin. As this effects thousands of pages, I would like to get some further input first. I'm fine with either of the gradient options for the tables. - Archduk3 00:51, March 8, 2011 (UTC)

So, you're suggesting that we take away the slight splash of red on the sidebar headers and turn it into a bland gray that will vanish into the background? I'm strongly against that. -- sulfur 03:03, March 8, 2011 (UTC)

Gray? That should be a blue color. - Archduk3 03:24, March 8, 2011 (UTC)

No gradients to see here, and the base color is some sort of dark duck-egg blue - which looks horrible. If you want to pimp the red headers by adding a gradient, we could talk about that, but not this color change. -- Cid Highwind 10:37, March 8, 2011 (UTC)

Only Modzilla and Webkit browsers will see the gradients, since only they support them. By using these gradients we get much smoother transitions then the image we currently use, and these can be used in conjunction with a image for other browsers. As for the color, I'm not just suggesting just this color, but a change to any color that compliments the rest of the color scheme, since red simply does not. - Archduk3 18:33, March 8, 2011 (UTC)

If that is such a big issue, we should change the Wikia color scheme to match ours, not the other way around! However, before we attempt a "unified color scheme" for the whole page - isn't it actually better if our content has a color scheme clearly separate from the non-content stuff our hoster surrounds our content with? -- Cid Highwind 21:36, March 8, 2011 (UTC)

Here's a question I have, why is an image used for a color of the sidebar/table "tops" (or headers, I guess it is) instead of coding it to be that color in the first place? Then there's no image that has to load, and it would seem to be that this would fix whatever potential change the site may need thanks to wikia. --Terran Officer 21:42, March 8, 2011 (UTC)

First, we've already changed the default wikia colors to match ours at the time of the skin change, and wikia's stuff already has a different background color, black. Since the wikia header is on every one of our pages anyway, we might as well have it match the rest of the site. Second, I can't find any old posts where our colors were discussed, so I don't feel especially beholden to the red if it was just some arbitrary color chosen a few years ago. I personally don't like the use of any warm color with so much gray, and red is about the most overused, cliche warm color out there. - Archduk3 23:59, March 8, 2011 (UTC)

Wow, now that's a good argument... I don't think the exact way some color scheme has been devised "a few years ago" matters much. What matters is that it is our standard color scheme now, and we shouldn't throw it away just because it is your personal opinion that it contains a "cliche color".

Re:Terran Officer - there seems to be a misunderstanding. These headers use an image instead of a simple color code, because CSS gradients weren't widely available back then (and still aren't a fully implemented standard, as it seems). I wouldn't mind adding a CSS gradient to the headers, although I'd hate to see a regression in browsers that don't implement them. The base color of the gradient, whatever way is used to display it, is at question here, and as far as that is concerned, Wikis is absolutely innocent. :) -- Cid Highwind 01:34, March 9, 2011 (UTC)

I certainly didn't suggest we take the color scheme and "throw it away," just that between the two most common colors in use right now we choose one. I'm clearly for some shade of blue, or another cool color, so is there some reason we can't have a discussion on the subject without being acrimonious? - Archduk3 02:18, March 9, 2011 (UTC)

I certainly considered you belittling a very much established design/layout as partially "arbitrary", "overused" and "clichéd" to be be acrimonious - so I may have reacted in kind. Sorry for that, I can stop if you can stop.

Back to the topic, I have to say that I still don't understand the exact reasoning for why the header color has to be changed - but this may have to do with your suggestion not being really exact, either. First it was some color you displayed while drwaing most attention to the new CSS gradient, then it was "any color that works with the color scheme", then it was "any color that is not a 'warm' color", and now it is "some shade of blue". What has not yet been clearly mentioned in all of this is that the color of both ribbons ("Wikia header" and "Tool bar") can be changed, and in fact may have been changed when this skin was new, and you came out of the Beta with a ready CSS to fix stuff that needed to be fixed. At that time, and up until now, I never gave much thought about how that ribbon color came to be, believing it to be just one of the Wikia-suggested defaults that you used because it matched our existing color scheme best. If this is not the case, and you chose it to be the seed for a new color scheme for this site, then the question is why that 6-month old color pick should be considered "less arbitrary" than the 7-year old color pick. -- Cid Highwind 10:19, March 9, 2011 (UTC)

I'm saying we should chose some color, while I'm for a shade of blue or some other cool color. I've tried quite a bit of colors before suggesting one, and I think the cool colors look best, with my particular choice being a blue. I don't really think that needed to be clarified based on what I've already said, and I certainly didn't have some nefarious design when I put up my suggestions, so suggesting that they were just to simply to "draw attention to the new CSS gradient" is disingenuous at the very least, especially since I knew you in particular wouldn't see those gradients. If you or sulfur had responded here with something constructive instead of caustic or dismissive retorts, maybe there would have been some other suggestions here for you to call into question other than my own.

As for the question of the current ribbon colors, yes, more or less, the current color was an arbitrary choice. The reason the color isn't red though, is that one of the other versions of MA, German most likely, had tried a red heavy theme at the time the skin came out and it had looked horrible. If I remember correctly, that wasn't just my assessment either. So the color wasn't red by choice, and a slightly tweaked version of one of the default colors was used instead. I also never suggested that blue was any less arbitrary then red either, just that red was ported over from the German version of MA awhile back without much, if any, discussion. That, by itself, is certainly reason enough to have a discussion now. - Archduk3 20:29, March 9, 2011 (UTC)

Dark red as the color for table headers has been a part of the color scheme since the very beginning of this site. Please check this revision (September 2004, called "Memory Alpha style v0.9.5") for #660000. -- Cid Highwind 21:20, March 9, 2011 (UTC)

Well, I guess that's one mystery solved, but still not a reason to dismiss out of hand a discussion about changing it now. I would actually very much like to hear from Dan about why he chose red, but I think it's about 5 years too late for that. So going forward, I take it that you are fine with a CSS gradient being used over the image we currently use, so long as they're red? - Archduk3 23:01, March 9, 2011 (UTC)

Did nobody ever consider... blue links, yellow borders, red backgrounds... wonder what colours those are...? :) -- sulfur 23:10, March 9, 2011 (UTC)

Actually, yes, I did. ;) Links seem to always be defaulted to blue though, so I figure that didn't factor in too much. - Archduk3 23:38, March 9, 2011 (UTC)

As I stated, I wouldn't mind the addition of a CSS gradient to headers in their "standard color", as long as no regressions appear. Has "image+gradient" been tried - does it work at all?

Also, I take it that all other CSS styling, as far as they are different from "current formatting" (I see alignment, font-weight and font-size) are not part of the actual suggestion but just used for the example? -- Cid Highwind 11:43, March 10, 2011 (UTC)

Short answers, yes and yes. I'm also moving this discussion to "Forum:Color change and gradients" so the rest of the community can get involved without having to read a bunch of non-constructive malarkey. - Archduk3 21:47, March 10, 2011 (UTC)

So, your very constructive way of dealing with a discussion that didn't turn out as you imagined it to be - is to start it anew in another place and on top of that having the nerve to advertise it as "Memory Alpha may be changing its look" as if it was anything more than an idea by a single contributor? Wow... -- Cid Highwind 22:19, March 10, 2011 (UTC)

Yes, I'm the giant asshole for wanting some community input and trying to get it, something that doesn't tend to happen when there's nothing but a pointless pissing contest between administrators. Very constructive retort there bureaucrat. - Archduk3 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 below.) -- 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 above.) 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)