This guide explains, how to add an upper widget bar and a lower widget bar to the Leggero theme family in FlatPress.

The three styles covered here are:

• FlatMaas Revisited
• Leggero
• Leggero v2
• Stringendo

After following this guide, your FlatPress site can show:

• a top widget bar above the main content
• a bottom widget bar below the main content
• style-specific visual formatting for:
  • FlatMaas Revisited
  • Leggero
  • Leggero v2
  • Stringendo

Before you copy any file, make a full backup of your FlatPress installation.

At minimum, back up these folders:

fp-content/
fp-interface/
fp-includes/core/

If something goes wrong, you can restore your original files.

Use this package if you want the top and bottom widget bar feature.

It contains the files that are needed for this feature.

Copy these files into your FlatPress installation:

fp-interface/themes/leggero/comments.tpl
fp-interface/themes/leggero/default.tpl
fp-interface/themes/leggero/footer.tpl
fp-interface/themes/leggero/index.tpl
fp-interface/themes/leggero/static.tpl
fp-interface/themes/leggero/widgetstop.tpl
fp-interface/themes/leggero/widgetsbottom.tpl
fp-includes/core/core.system.php
fp-includes/core/core.widgets.php

These files do the structural work:

• they add the top widget bar
• they add the bottom widget bar
• they make sure the bottom bar is placed below the main layout

fp-interface/themes/leggero/flatmaas-rev/res/common.css

fp-interface/themes/leggero/leggero/res/column.css

fp-interface/themes/leggero/leggero-v2/res/common.css
fp-interface/themes/leggero/leggero-v2/res/column.css
fp-interface/themes/leggero/leggero-v2/res/print.css

fp-interface/themes/leggero/stringendo/res/column.css
fp-interface/themes/leggero/stringendo/res/common.css
fp-interface/themes/leggero/stringendo/res/admin.css
fp-interface/themes/leggero/stringendo/res/widgets-under-main.js

The feature package also contains optional example files.

fp-content/content/static/topmenu.txt
fp-content/content/static/bottommenu.txt

These files are examples.

• topmenu.txt contains example content for the upper menu bar.
• bottommenu.txt contains example content for the lower menu bar.

Before you change anything:

1. Download a backup of your FlatPress installation.
2. Keep a copy on your computer.
3. If possible, also back up your hosting account before you upload new files.

1. Download the feature package ZIP.
2. Unpack it on your computer.
3. You will see the same folder names that exist in FlatPress.

Do not unpack the ZIP directly into your live website unless you are sure what it contains.

Using FTP, SFTP or your hosting file manager:

1. Open your FlatPress installation folder.
2. Copy the common files from the package into the same folders on your website.
3. Allow overwriting existing files when your program asks.

The common files are:

fp-interface/themes/leggero/comments.tpl
fp-interface/themes/leggero/default.tpl
fp-interface/themes/leggero/footer.tpl
fp-interface/themes/leggero/index.tpl
fp-interface/themes/leggero/static.tpl
fp-interface/themes/leggero/widgetstop.tpl
fp-interface/themes/leggero/widgetsbottom.tpl
fp-includes/core/core.system.php
fp-includes/core/core.widgets.php

Now copy the files for the style you use.

Copy:

fp-interface/themes/leggero/flatmaas-rev/res/common.css

Copy:

fp-interface/themes/leggero/leggero/res/column.css
fp-interface/themes/leggero/leggero/res/admin.css

Copy:

fp-interface/themes/leggero/leggero-v2/res/common.css
fp-interface/themes/leggero/leggero-v2/res/column.css
fp-interface/themes/leggero/leggero-v2/res/admin.css
fp-interface/themes/leggero/leggero-v2/res/print.css

Copy:

fp-interface/themes/leggero/stringendo/res/column.css
fp-interface/themes/leggero/stringendo/res/common.css
fp-interface/themes/leggero/stringendo/res/admin.css
fp-interface/themes/leggero/stringendo/res/widgets-under-main.js

FlatPress may still use older compiled template files.

After uploading the files:

1. clear the FlatPress cache
2. if needed, empty the temporary files in:
   • fp-content/cache/
   • fp-content/compile/

Be careful not to delete your own content folders.

If you are not sure, make a backup first.

In the FlatPress admin area:

1. go to the theme settings
2. choose the Leggero theme
3. choose one of these styles:
   • FlatMaas Revisited
   • Leggero
   • Leggero v2
   • Stringendo

Save your changes.

You have two choices.

This is the easiest way.

1. Copy the optional example files from the package to the matching places in your FlatPress installation.
2. The files are:

fp-content/content/static/topmenu.txt
fp-content/content/static/bottommenu.txt

This gives you:

• a top bar that uses the widget blockparser:topmenu
• a bottom bar that uses the widget blockparser:bottommenu
• an example top menu page
• an example bottom menu page

Use this if you already have your own widget setup and do not want to overwrite it.

1. Go to the FlatPress widget administration page.
2. Add widgets to the new positions:
   • top
   • bottom
3. Save the widget configuration.

A simple and popular setup is:

• top = one BlockParser widget for a horizontal top menu
• bottom = one BlockParser widget for a horizontal bottom menu

The easiest content for a top or bottom bar is a simple list of links.

The example files in the package use FlatPress BlockParser markup.

[list]
[*][url=?]Home[/url]
[*][url=?paged=1]Blog[/url]
[*][url=static.php?page=about]About[/url]
[*][url=contact.php]Contact[/url]
[/list]

[list]
[*][url=static.php?page=legal-notice]Legal notice[/url]
[*][url=static.php?page=privacy-policy]Privacy policy[/url]
[/list]

You can change:

• the visible text
• the link targets
• the order of the links

Open your website in a browser and check:

1. the top bar appears above the main content
2. the bottom bar appears below the main content
3. the normal right sidebar still works
4. mobile view still looks correct
5. the menu links open the right pages

With the provided common.css:

• the top and bottom bars become simple horizontal link bars

With the provided column.css:

• the top and bottom bars become simple horizontal link bars
• the bars follow the classic Leggero look
• on smaller screens the bars switch to a stacked layout

With the provided common.css, column.css and print.css:

• the bars are integrated into the more modern Leggero v2 layout
• the spacing changes at several screen widths
• the bars are hidden in print output

With the provided column.css, common.css, admin.css and widgets-under-main.js:

• the bars are integrated into the modern Stringendo design
• the bottom bar stays visually below the main content area
• Stringendo keeps its smart widget overflow behavior on wide screens

Even without editing CSS or PHP, you can still customize a lot:

• change the menu text
• change the order of the links
• add or remove links
• choose whether the bottom bar also shows the admin widget
• choose a different style: FlatMaas Revisited, Leggero, Leggero v2 or Stringendo

This guide avoids code work as much as possible.

However, these tasks still require file editing skills:

• changing colors in a custom way
• changing spacing beyond the included design
• changing fonts with CSS
• changing the exact structure of the widget bars

Check these points:

1. Did you copy the common template files?
2. Did you clear the FlatPress cache / compiled templates?
3. Did you add widgets to the new top and bottom positions?
4. Did you copy or create the content for topmenu and bottommenu if you use BlockParser widgets?

Check these points:

1. Did you copy the files for the correct style?
2. Did you overwrite the old files on the server?
3. Did your browser cache an old CSS file? Try a hard refresh.

For most users, the easiest and safest method is:

1. install the common files
2. install the files for your selected style
3. edit the top and bottom menu content to match your own site

You need:

• a working ≥ FlatPress 1.5.1 Stringendo installation
• the feature files from this package

widget_bars_feature_package.zip