Re: [libreoffice-website] CSS Styles for Website (Was: Problem with CSS)

Hi Christoph, all,

On Sun, Jan 30, 2011 at 6:30 AM, Christoph Noack <christoph@dogmatux.com> 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 website+help@libreoffice.org
List archive: http://listarchives.libreoffice.org/www/website/
*** All posts to this list are publicly archived for eternity ***