Since 2001 the FSFE has been enhancing users' rights by abolishing barriers for software freedom. For 20 years we have been helping individuals and organisations to understand how Free Software contributes to freedom, transparency, and self-determination.

For the next two decades we need your help. We want everyone to be able to control their technology. Free Software and its freedoms to use, study, share, and improve are the key to that goal.

Siden er endnu ikke oversat. Nedenfor ser du den originale udgave af siden. Kig venligst på denne side for at finde ud af hvordan du kan hjælpe med oversættelser, og andre ting.


A template article, to use the new webdesign

Skrevet af  den   (opdateret den    

So, you are publishing an article on Let’s have a look at this template page source code to see how you can make use of the many features at your disposal with this new design! 1 All code samples are pasted directly from the source file of this page.

Just like before, web pages are built from xml source files. You can actually see the source code directly by clicking on the link at the bottom of each page. So there’s no big change here, go on to read more about the website in genral if you want to know more (there’s a link in the sidebar, on the right).

Page styling and metadata

The first thing with the new design are the <body> attributes. This page has:

<body class="article" microformats="h-entry">

A file can have more than one class and more than one microformats (separated by a space), but a file can only have one id. These attributes are very useful to have different kinds of styling depending on what kind of content we’re showing.

For instance, the page About FSFE is not an article, but one of the four main sections of the website. It’s a way to get to other pages relating to what FSFE is about. For this kind of pages, there are some specific styling (using <body class="subsite">). In doubt, it’s always useful to find a page that’s as close as possible to what you have to edit, and see how this one is made. And of course, you can always get in touch with the web team. What’s more, all pages which are on have the wiki class, all pages on have the planet class, etc.

So, all articles should have an "article" class. However, it is optional for them to have an id. If you put an id, please choose it carefully. Id can be very useful to apply very specific styling. If you need to write new CSS style for a page, please make sure to put an id and then use that id for the rules in the CSS files.

Microformats attributes are both about style and about metadata of a page. To learn what microformats are, please read This page, as most articles, news entries, event items, should have proper metadata and use microformats. If you are not going to use microformats markup inside a source file, there’s no need to enable them, so remove the "microformats" information from the <body> element.

Articles should use the h-entry microformat. This page has:

<body class="article" microformats="h-entry" id="the-template-2014">
    <p id="category" class="p-category">
      <a href="/contribute/contribute.html">Contribute</a>
    <h1 class="p-name">A template article, to use the new webdesign</h1>

    <div class="e-content">

    <p class="p-summary">So, you are…



The rest of the metadata (author, date, etc.) should be taken care of. But do not hesitate to use other h-entry classes in the body of the article, and check their validity. If you want to know more about how deals with other metadata like tags, author, dates, etc. you can read the source code of this page. You should also read the how-to on tagging

The sidebar

<sidebar promo="about-fsfe">
    <div id="related-content">
        <h3>Get involved</h3>

        <ul><li><a href="/contribute/web/web.html">Webmastering</a></li>
        <li><a href="/contribute/editors/editors.html">Information for editors</a></li>
        <li><a href="/contribute/contribute.html">Contribute</a></li></ul>

        <h4>Ongoing campaigns</h4>
        <ul><li><a href="//">Document Freedom Day!</a></li></ul>

The sidebar is what’s showing on the right side of this very page (if your screen is large enough!). Articles should really have a sidebar and we encourage you to add things in it. They are useful to provide context to an article, and to give more things to read if somebody’s interested. So you should show related articles, and/or related campaigns if that makes sense. See the code above: you can write directly inside the <sidebar> elements.

However, the sidebar is not just another place to write, it’s also a useful tool where we can automatically put stuff. So if you are very lazy, or if there’s nothing to write in, just write <sidebar> without anything in it, and the build system will automatically decide what to show for you. Note: the sidebar element should be after the body element, not within. It’s at the same place as the tags and translator elements.

Sidebar options

You can also give parameters to your sidebar. This page has the following sidebar parameters:

<sidebar promo="about-fsfe">

The promo parameter is a paragraph promoting one important aspect of FSFE. This page promotes the "about-fsfe" paragraph, which is a general paragraph about FSFE which is going to invite the user to go read the about-page. If you don’t want to show any promotional paragraph, set promo="none". If you do not choose which paragraph to promote in your sidebar, the build system is going to default to one paragraph for you.

These paragraphs should already be ready for translation like other generic parts of the website. For now, you can choose to promote among:

  • about-fsfe (default)
  • our-work
  • support
  • donate
  • More to come… Do not hesitate to ask the web team to add one.

Table of contents

Right now, it’s not automated. But the sidebar should be very a nice place to add a table of contents, especially if you wrote a long article. More to come on that.

The follow-up

It’s important to help people engage and support FSFE and to make it easy for them. This is why we have the "followup" box. This box is the second section of each page on, which you can see below the license information of this page. Why is it at the bottom? The idea is that, if somebody reaches the end of an article on, it’s probably a very good sign that this person is interested! So we should engage with them, give them a way to follow up on that enthusiasm! By default, if you don’t put anything, the build system is going to insert a followup box for you. If you don’t want to show a followup box for some reason, then please write <followup>no</followup>.

This page chooses to help people engage by subscribing to our monthly newsletter. So, after the body element, it has:


These boxes should already be ready for translation like other generic parts of the website. For now, you can choose to follow up on:

  • "subscribe-nl" to subscribe to the newsletter
  • "support" to sign as a supporter
  • "donate" to make a one-time or recurrent donation
  • "join" to promote joining the fellowship


If you need to add a quote, proceed as follows:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.


You can even add an image of the person. In this example, we make it be on the right (with-image-right instead of with-image-left) and a bit smaller (small-img as additional class):

Olga Gkotsopoulou

My eleven months as trainee and part of the FSFE's international team, have been full with new things to learn, great people to meet, challenges to overcome and opportunities to grasp. There was never a boring day. I was involved in high-level legal and policy work as well as community building and awareness-raising activities. I was in the core preparation team of short and long-term campaigns.

Olga Gkotsopoulou, Intern 2017

Alternative, you can also quote an example inline (the quotation marks will vary depending on the language).

An article would not be complete without a picture!

group picture!
This is a picture from the Group coordinators meeting
Berlin, September 2013

This is the source code for the example picture above:

      alt="group picture!"/>
    This is a picture from the Group coordinators meeting<br/>
    Berlin, September 2013

For left aligned captions, just add class="text-left" to the figcaption element.

group picture!

You can also have figures left or right within the text flow. Just apply the classes float-right or float-right on them.

Code for the inline image above:

<figure class="float-right">
      alt="group picture!" />

General design

Please avoid adding inline css styles in your css. Use css classes instead. If you need new classes, create new classes, or try to see if the current design does not already solve what you want to do! Also check with bootstrap if there’s not something standard to use. To understand how to edit the stylesheets of the new design, head to the documentation.

The new design uses bootstrap. Visit for more information about that. This should allow you to have some nice things on pages now! However if you are doing something a bit out of the ordinary or if you are not sure of yourself, do not hesitate to get in touch with the web team.

Some notes on typography

Typography matters. Please, if you share my love for typography, letters, spaces and symboles, try to use curly quotes and real apostrophes. I know this article did not respect that rule and used "stright quotes" instead of “curly quotes” because I needed to imitate the source code in order not to confuse anyone. However, for most articles on there’s no need for this. Especially, since we use utf-8, there’s no reason not to put some utf-8 in our pages! ☺

Other examples to take inspiration from

This template should get you going for most articles, i.e. pages which are mostly about “content”. However, not all pages are like that. So here’s a selection of well designed pages that should help you to get some inspiration from.

If you have trouble producing the correct quotation marks for your language on your keyboard, look up the html escapes in the wikipedia article (or unicode table).


  1. This is just a footnote! Please read the source code of this page to see how footnotes should be made.