Webmastering

Add and select campaign banners for the frontpage

Written by   on  

We display campaign banners on the frontpage, to promote current campaigns or a donation campaign for FSFE. However, these banners are supposed to be changed depending on the timely context. For instance, it’s usual to add the banner for Document Freedom Day in January.

Add the campaign information for translators

It should be easy for translators to update the campaign information. All this information can be found in tools/texts-**.xml where “**” is the language code used by FSFE. Please make sure that an English version is always provided. Then find the information between <campaigns> … </campaigns>. If you want to add a new campaign, add this:


    <campaign id="new-campaign-id">
        <comment>You can add a comment in here like: please enable between January and April</comment>
        <photo>This will be a picture, like the campaign’s logo, or a person’s portrait if the picture goes with a quote for instance. Be careful, this is not the background image used for the box, this is done with CSS</photo>
        <text>This text will be displayed! Make it not too long!</text>
        <link>when-the-user-clicks-go-to-this-page</link>
    </campaign>
    

Probably none of these fields are mandatory (should be checked) but at least text (or photo) and link should be provided.

Select which banner to display

For banners showing up on the frontpage of fsfe.org, you need to edit index.xsl. Look for:


  <xsl:template match="campaigns">
    

Then add the campaign’s identifier at the end of this xsl code:


<xsl:for-each select="/buildinfo/textsetbackup/campaigns/campaign[@id='present-campaign-id' or @id='new-campaign-id']">
    

If you need help with XSL please ask the web team.

Style the campaign banner

Don’t forget to style the campaign banner any way you like. You can take inspiration from other banner’s styles. Find it in look/fsfe.less. For a basic style, add:


        #new-campaign-id {
            .campaign-box-center;
            background: url('/graphics/choose-a-picture.jpg')  center 33%  no-repeat #666;
        }
    

If you need help to edit the style of fsfe.org, see How to edit the CSS with LESS.