• Events

• LocalGroups

• Activities

• Teams

• KnowHow

• RecentChanges

Attention this page is under construction!

General information on working with the FSFE website source

Please, read the information on TechDocs/Mainpage/Editing, it is necessary for getting access to web pages and coordinating your work with others.

Image Slider

This page will help you modify or update the image slider on our front page. From time to time it is necessary to update the content shown on slides or change the order of existing slides.

Creating a new slide to appear on the Home page

1. First of all you will have to create/choose an image to be used as a background for the slide. You will find all the pictures currently used for slider here: ~FSFE/fsfe-website/graphics/. After background image new_image.jpg is ready it has to be added there also. Please consider using JPEG format to make images lightweight.

Note: if you would like your slide to contain text, it is best to add it as a separate item, which will allow the slide to be adaptable to different screen resolutions (mobile phones, tablets, etc.)

2. Current slides are to be found in ~FSFE/fsfe-website/tools/frontpage, they are numbered according to the order they appear in: 10_xxxx.en.xml, 30_xxxx.en.xml, etc. By creating a new file like this, you can specify the text you want to appear on the slide and link it will lead to. Like this:

<?xml version="1.0" encoding="UTF-8"?>
<campaigns>
    <campaign running="yes" id="newslide">
        <text>this is a new text</text>
        <link>/campaigns/newnew</link>
    </campaign>
</campaigns>

3. To edit the style of the text, it's position on the page, other design issues and to add a link to the image created in step 1, please update fsfe.less file, located in

~FSFE/fsfe-website/fsfe-website/look/. Here is the part of that documents, describing PMPC slide:

        #boxpmpc {
            background: url('/graphics/pmpc_slider.jpg')  left 33%  no-repeat #666;
            background-size: cover;
            text-shadow: 0px 1px 8px rgb(0,0,0);

            .text, .text2 {
                .quote;
            }
            .text, .text2 {
                display: block;
                padding: 1.25em;
                min-width: 120px;
                font-size: 1.25em;
                hyphens: none;
                text-align: center;
            }

4. After changing the fsfe.less, you need to compile your modifications into css, the whole process is described on this page and won't take long.

* First, you will have to install LESS if you haven't done so yet.

sudo apt-get install node-less

or

sudo apt-get install npm
sudo npm install -g less

* After that just follow the instructions given in the guide.

Please, remember if you modify style.less, you will need to compile all css.

5. If you decide to help with designing something for the website it always best to check your modifications before publishing.

* The test branch

The Git repository has two main code bases for the FSFE website, the master, which is used to build the production instance of the website at fsfe.org, and the test branch, which is used to build test.fsfe.org.

To work on major changes to the website, including debugging new features that could potentially break the site, you are encouraged to check out the test branch of the Git repository:

git checkout test

* Building locally

You can build the fsfe.org website on your own computer to make previews of single pages possible offline and without having to wait for an online website build. The process of building the FSFE website locally is described here: /TechDocs/Mainpage/BuildLocally

Please be aware that it might take a while to build FSFE website locally.