Hi Christoph, all, On Sun, Jan 30, 2011 at 6:30 AM, Christoph Noack <[email protected]> wrote: > Hi Ivan, hi all! > > Thanks for the CSS (Creating Superior Styles). > > Am Samstag, den 29.01.2011, 07:53 +1300 schrieb Ivan M.: >> For general highlighting, the green (or blue) style >> should be used. > > Yep. And by the way, also for the links on the page :-)
You mean blue links? If so, sure! I think they'd add some nice color variety to the website. Would #1C99E0 be OK (middle blue from color table)? >> One option might be to use the relevant colorful box >> for pages pertaining to Writer, Calc, Draw, etc, but since they are >> shared with other styles (e.g. impress colors are used for an error >> notice), this might not be such a good idea from a UX point of view. >> Maybe Christoph can weigh in briefly? > > I can ... let's start with the criticism :-) I had a look at the styles, > and I consider them a bit dark (low liminance contrast) when it comes to > text vs. background. Is there any chance to make them a bit lighter? I > know, you seem to have use the lightest colors, but ... I could make them a little lighter (e.g. by putting a 10-20% transparent white rectangle over the screenshot in an image editor and taking the new color values) > And one CSS-newby question: is there any chance to apply a vertical > gradient to these boxes, or is a solid color required? Yes, but no in some cases. That doesn't help, does it? :) I'll start by noting that one of the advantages of these colorful styles is that they can be combined with an optional icon. However, this becomes a disadvantage if we want a vertical gradient. A few examples of HTML code with the current styles: <p class="Greenbox">Hello World</p> gives us a green box, and <p class="Greenbox Tick">HelloWorld</p> gives us a green box with a tick, and <p class="Tick">HelloWorld</p> gives us a paragraph with only a tick. For this to work, the background-image CSS property can only be defined once (i.e., no background image should be specified for Greenbox, Bluebox, etc) as most browsers (even many recent ones) can only display a single background image per HTML element. The background image is reserved for the (optional) icons. That means we can't achieve a vertical gradient through a background image (which would be compatible with most browsers) as well as having optional icons without adding extra HTML elements - e.g. <p class="Greenbox"><span class="Tick">Hello World</span></p> - this would be a small pain for content editors. In this example, the vertical gradient background would be assigned to the <p> element, and the icon would then be assigned to the <span> element. It is certainly possible to create a vertical background gradient with CSS3 [1], but it would only work in a few (mostly "cutting-edge") browsers. If you see this as an extra/optional enhancement (that is, you think the current single background color implementation, which is compatible with virtually all browsers, is OK), then I have no problem with adding some nice CSS3 stuff (as we did on the OOo website with rounded corners for the login box). Hopefully that made sense :). > Concerning the colors and the applications ... if we would use full > color coding for the applications, we might also run into trouble when > it comes to LibreOffice (the application, either gray or green) and Calc > (green). So if we use slight color coding, then I do see no problems. How about we lighten the colors (to improve display on older browsers) and then implement CSS3 gradients as an extra? > For example, having only dark strokes for the applications, or using the > (thanks to Paulo now great looking) document icons, then we don't run > into trouble. In this case, we also differentiate by intensity (intense > = application, slight = new CSS styles). Oh yes, definitely - I'd like to create some styles with the new icons. Unfortunately I won't have time to do this until Wednesday (if anyone wants to step in and do this, by all means go ahead) - but I hope we can come to a consensus regarding the things discussed above by then. After that, I'd like to make a second round of improvements to these new styles and hopefully make them final (for the short term at least). > You remember this? > http://picasaweb.google.com/lh/photo/tTTNPiZLsHQQ8pzpSGA6Iw?feat=directlink Of course :). Just as well we didn't implement that, otherwise it would have become out of date by 2010 (considering the OOo 3.2.1 icons). Regards, Ivan. [1] http://www.dynamicdrive.com/style/csslibrary/item/css3_linear_gradients/ -- Unsubscribe instructions: E-mail to [email protected] List archive: http://listarchives.libreoffice.org/www/website/ *** All posts to this list are publicly archived for eternity ***
