Website Project

Styles you can use

The following gives an overview of the css styles to be used to make the pages look less boring :-) - note: to use those styles from within the editor in the CMS, you very likely have to clear your browser's cache.

Note that these are not final, not officially "approved" yet and might be changed or removed at any time - please follow the website@global.libreoffice.org mailinglist for current status.

Greenbox

The "greenbox" style creates a paragraph within a green box - nice to remember, isn't it?

Bluebox

The same is available in blue

Orangebox

and also in "reddish yellow" :-)

Yellowbox

And more yellow, people might mistake the color for orange, but that's not the point, is it? :-)

Purplebox

purplebox, don't you think there's a color for every situation?

Intro

Intro paragraphs have a slightly more prominent appearance, their use is of course not restricted to intros, but that's where you usually put a short summary of the following content, so it won't hurt to use it as such

This is again a regular paragraph. If you're curious on how to remove the formatting, don't only use the style dropdown, but also the "type" dropdown. Switch style to the first-entry "--Styles--" to clear formatting, nothing will happen yet, assign a heading style, then switch back to paragraph and the format is cleared.

Excerpt ("Attention-Quote")

The trickiest to enter, as the quote must appear above the text that appears left

If you don't remember how to switch between formattings, then please see above. If everything else fails, you can also use the HTML-Sourcecode view and manually remove all unwanted formatting. Remember to not just close the HTML-source dialog, but to use the "insert" button at the bottom, otherwise your changes will be lost, and you surely don't want that.. Now the paragraph should be long enough to demonstrate the text-flow around the paragraph, so enough of this and on to the next...

Variations of the styles above

The styles below require you to edit the HTML-sourcecode to add the corresponding classed

Tick

Tick will display a tick-image next to the paragraph But as you cannot assign two styles at once using the UI, you have to add the classname "tick" to the class. It is meant to be combined with the greenbox for example. Whether you add it as greenbox and then add the tick or do it the other way round is just a matter of taste.

standalone use doesn't need modification of the source, but make sure your paragraph is two lines high, add a line-break if necessary (otherwise the image will be cut)

The standalone use applies to the following as well, but won't be mentioned separately, you get the idea...

Information

An information icon, that fits with the bluebox, as with the tick, you have to manually add the second class using the HTML-sourceview. add the classname "information"

Warning

Warning, fits with the yellow box - add "warning" to the class attribute

Error

Error, fits with the orange box, add "error" to the class attribute

Image-boxes

Again this requires manual edits to the code, to add a surrounding div tag with class "box", to use it, first insert an image with height of 80 pixels (otherwise the image would be scaled out of proportion)

the paragraph below 

 

Then go to the sourcecode view and surround the img and paragraph with <div class="box">[img and p goes here]</div>

Social media icons

Google plus icons are from http://www.seriftuts.com/free-resources/google-plus-icon-set-png/ and are available in two variants once as "g+" and once with only "+" (and also available in sizes up to 512x512 in Shared/Icons/gplus)

example (class gplus):
link with plus-only icon - for the "g+" variant use class gplusg:
link with g and plus
Simiarily, for facebook use class facebook: 

and for twitter use the class twitter
,
for identi.ca (icon from http://paulrobertlloyd.com/2009/06/social_media_icons/) class identica
link with identica-icon - straightforward, isn't it? :-)