Options
| 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 |
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. |
|---|
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
thelement only if it is a "row header". We would only needtable.greyandtable.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)
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;
}