Table of Contents

  1. Introduction
  2. Requirements
  3. Installation
  4. Configuration
  5. Upgrade Slavlee Package V8 to V9
  6. Upgrade Slavlee Animations to Animate.css
  7. Upgrade
  8. Frontend Plugins
  9. Other Features
  10. Predefined Templates
  11. Changelog
  12. Sources and Credits
  13. Privacy Statement
  14. FAQ


Slavlee Package is a TYPO3 CMS distribution package based on Bootstrap 4.

This documentation explains the requirements and all configuration settings that are possible. You can also visit our YouTube channel for video footage explaining how to install and use Slavlee Package. We have created a playlist for Slavlee Package for you.


Slavlee Package runs below TYPO3 8 and TYPO3 9. Because of the differences between these two TYPO3 versions, it is necessary to separate the extension into two. The file contains two folders. The name of the folder reflects the supported major TYPO3 version. Use the inside the TYPO3 V8 folder for TYPO3 Version of 8.7.x and use the TYPO3 V9 folder for TYPO3 version of 9.5.x.


You can install this extension with the Typo3 own extension manager. Simply go to

After that you have to include the Static TS. To do so, go to the page that holds your root template. In most cases this is the root page, which has the globe icon.

You access the template with the Template module.

  1. Web
  2. Template
  3. Click on the page that holds the root template
  4. Select "Info/Modify" on the selectbox at the top
  5. Click on the "Edit the whole template record"
  6. Go to the "Includes" tab
  7. In this screen you have to select the following items:
    1. Content Elements (fluid_styled_content)
    2. Content Elements CSS (fluid_styled_content)
    3. Slavlee Package (slavlee_package)

If you already using a distribution package for the target domain, then you have to remove this. It is not possible to use Slavlee Package with other distribution packages.

That is literally all you need to do.


Slavlee Package has several things to configure. You can find those parameter in the constant editor.

You can find the constant editor inside the Template module:

  1. Template module
  2. Choose "Constant Editor" in the dropdown menu

There you can see several options for the Slavlee Package:

  • Google
  • SEO
  • Template
  • Language
  • Debug
  • Compression


You can set the robots settings, if you want to be indexed or not, and also the Google custom command to translate or not translate your website.

Here you can set the meta fields inside the <header> - tag of your html document. An important field is the description, because it controls you appearance inside the search results of the search engine websites.

The keywords is common to set, but has not such importance for ranking anymore.

As a serious and trustful website hoster you should always set the copyright and also the author.



The layout field is a simple text input. Here you can specify the css class for the header container element. You can set your own css class and make your own design or you can set one of the Bootstrap 4 classes for certain header designs.


The header has an altering mobile version. This will appear when the width of the viewport passes a certain amount. This amount can be set with this classes with one of the Bootstrap designed breakpoints. Valid classes are:

  • sm (576px)
  • md (768px)
  • lg (992px)
  • xl (1200px)

Additionally to the layout class, you have the opportunity to alternate the style of the header. The layout is for drastic changes. The style parameter is more for minor changes like alternating colors. Again, Bootstrap has a few defined classes or you put your own in here.


If you want to change the background color of the header, then you can do that with this input field. You can enter the Bootstrap 4 color scheme classes as well.


If you want rounded corners of the header bar, then enable this checkbox.

Disable footer navigation

It is intended that every page has a footer navigation. If you want to exclude a page from this, then you can disable the whole footer navigation with this checkbox.

Show children of this page

There you can specify one Typo3 page that reflects the parent of all navigation items you want to show inside the footer. The parent itself won't be shown.

Comma separated list of page ids that are exluded from the footer menu

If you want to exlude a few pages that are children of the parent you have given above. Then you can enter here a list of page ids of pages that won't be shown in the footer navigation.


The default behavior of the site is that it's max width is 1200px. If you want to expand the website to 100% of the viewport, then enable this option.


In this section you can enter the language information inside the <header> - and <html> - tag.


Toggle the Typo3 debug setting inside the config typoscript object.


These settings is for the production enviroment. It minify and merges css and js files. This will speed up your website.

In some cases one or all of these settings will cause errors on your website. Please, test these settings with caution, but ones it's working you gain better performance and better ranking results.


Before following any of the following instructions, please do a full backup of your website. This backup should include all files and all database tables.

Slavlee Package is easy to upgrade. Go to the Extension Manager and choose to upload an extension. Make sure you have clicked Overwrite before you press Upload!

Upgrade Slavlee Package V8 to V9

If you used Slavlee Package in TYPO3 V8 and want to upgrade Slavlee Package for your TYPO3 V9, then read carefully these instructions. If you are new to Slavlee Package and using Slavlee Package V9, then you don't need to to the following steps.

Slavlee Package V8 does not work for TYPO3 V9. There is a new ZIP - file in the download package called:
This ZIP - files needs to be extracted first. There you will find two folders:

  1. Typo3 V8
  2. Typo3 V9

You need to install the ZIP - file inside the Typo3 V9 folder.

After you have successfully upgraded Slavlee Package (see instructions above), then you need to run the Upgrade Wizard.

To run the Upgrade wizard, do the following steps:

  1. Login to TYPO3 Backend
  2. Go to Admin Tools -> Upgrade
  3. Click on the Button: Run Upgrade Wizard
  4. Run the Wizard called: Slavlee Package Typo3 V9 Upgrade Wizard

This Upgrade Wizard makes important changes in the database.

Slavlee Package has dropped the support for the field: Hide In Frontend.

If you want to hide duplicated appearances of elements inside Slavlee Package Container elements, then you need to choose the new column: Container elements.

There you go. You have successfully upgraded Slavlee Package and you are ready to use.

Upgrade Slavlee Animations to Animate.css

Before following any of the following instructions, please do a full backup of your website. This backup should include all files and all database tables.

The Slavlee Package for V9 has been dropped Slavlee Animations. I replaces it with the known Animate.css library. I do this step to achieve smoother animations and to concentrate more expanding Slavlee Package overall features. Animate.css is CSS based only and much more efficient in using resources.

If you used Slavlee Animations settings, then you may see errors in the dropdown selection.

The reason is, that the Animation classes has been changed and the old ones are obselete. But don't worry, Slavlee Package has a built in downgrade support and it will automatically transform the old classes to a corresponding one of Animation.css. So your animations will still be working, but it is possible that they differ a little. I recommend to try the different new options to adjust the animation to your taste. This is everything you need to know about upgrading Slavlee Animations to Animate.css

Frontend Plugins

Slavlee Package comes with several different frontend plugins. They are all located under the Slavlee tab:

Slavlee Columns

Slavlee Columns gives your the option to create up to 4 columns. In each column you can add as many content elements of any type you want. Those colums can react responsively.

Grid Layout

The grid layout defines the column sizes. There are 3 predefined layouts. If they don't fit your use case, then you can define a custom layout. 
The grid size are following the Bootstrap grid.

If you decide to customize the layout, then for each column with assigned content elements will appear a new tab.

After assigning the items and saving the form, you see the new tabs 1.Column - 4.Column (if you assigned to all 4 columns). Each column has several settings:

Here you can set how the column shall behave inbetween Bootstrap 4 breakpoints. Please, read the documentation of Bootstrap to understand how it works. I will also add YouTube Tutorials for Slavlee Package in the future. So, you may follow me there.

The default value: "-" means that the column behavior is not changed at all and its present like usual. The prefixes: sm, md, lg and xl are the 4 breakpoints of Bootstrap. You can see the viewport width inside the round brackets. The number after these prefixes are the width of the column in this breakpoint. The width is percentage from the available total width. This value is always between 1-12, because Bootstrap 4 is a 12 column grid.

If there is a case you want to do something different, then you can choose the last option of one of these breakpoint dropdown fields: custom.

If you do so and hit the save button, then a new input field will appear below the dropdown field. 
Here you can add any css class(es) you want. You can also use Bootstrap classes to hide this column. In this example the correct hide class would be: d-sm-none.

Adjust gutter and margin/padding for each breakpoint

You can adjust the grid behaviour for Slavlee Columns.

You can enable or disable the gutter and adjust the margin and padding for each breakpoint. There is no custom css necessary to adjust the gaps between elements for the breakpoints anymore.

Slavlee Carousel

Slavlee Carousel is a content slider based on Bootstrap 4 Carousel. The usage in Slavlee Package is very easy. After you placed the frontend plugin you see the following flexform:

All you need to do is the add as many content elements that you want2

All you need to do is the add as many content elements that you want. At the moment Slavlee Carousel supports the following content types:

The other content types can be placed, but will not be taken into account of any css optimizations.

Slavlee Accordion

Slavlee Accordion works almost identical to Slavlee Carousel, but lets take a look at the flexform:

An accordion is a list of elements, where only one item is visible and all other are collapsed. 
For this plugin all you need to do is to add as many content elements of any type as you want to. Simple use the "Create new" - button.

Slavlee Tabs

Slavlee Tabs works exactly the same then Slavlee Accordion. Simply add tab items with the "Create new" - button.

Slavlee Jumbotron

Slavlee Jumbotron is a frontend plugin that is used for content that needs to be highlighted and need big space. It's an eye catcher like a good image or content slider, but it's static. 
It has a title, lead text, normal text and a call to action button.

The flexform is very self explaining, let's take a look:

You can define the header and header(layout) tag (h1-h5) of the Jumbotron. The header layout defines the structure and design of the header. If the Jumbotron is the first element, then you can think about using layout H1. Keep in mind that there should be only one H1 element per page. The header is supposed to catch the readers eye.

The lead text ist right below the header and also a bit more highlighted than casual text. A Jumbotron should have at least a lead text, but you are not forced to enter one. The lead text is supposed to give the reader enough information to explain the header a bit more and give him the interest to click the call to action button.

The separator is only needed, when there is a normal text too. That's because the separator separates the header + lead text from the text.

The text field is also optional. You can take if your target of the call to action button needs a bit more information.

Button link und label is the mentioned call to action button. Your goal with the fields above is, that the reader click on this button. It's smart to give it a verb as label, so that the reader is unconsciously forced to click it. 
You can type the url of the target page in this field or you can use the link editor to do so. The link editor makes it more easy to link internal or external and I recommend to use it. To use it simply click on the link Button at the end of the input field of the "Button link".

Plenty of options to adjust appearance

Slavlee Jumbotron has received a lot of properties. These properties gives you the opportunity to adjust the appearance of each field individually, especially for the responsive behavior.

Slavlee Jumbotron can now have a background image

Slavlee Jumbotron can now have a background image. This can be set inside the Images - tab.

Slavlee Jumbotron can adjust these properties for each breakpoint:

Add Slavlee Cardgroup to Jumbotron

You can add a Slavlee Cardgroup to a Jumbotron:

For example you can reach a Jumbotron that looks like this:

NEW in Version 1.90.155

There is a new option available to enable the parallax effect for the background image.

Slavlee BlogPost

Slavlee BlogPost is a frontend plugin to give you the opportunity to build the Bootstrap 4 blog post.

Each blog post has the following properties:

  • Title
  • Date
  • Author (can be a frontend or backend user)
  • Text

The flexform looks like this:

Slavlee Card

Slavlee Card is a frontend plugin to give you the opportunity to build the Bootstrap 4 card component.

Each card has the following properties:

  • Header
  • Image
  • Title
  • Subtitle
  • Text
  • Button link
  • Button label
  • Footer

Properties that are not filled, won't be shown. There are several option to influence Slavlee Card. 
You can also change several spacings, paddings and font sizes for each breakpoint

Slavlee Card plugin consists of 7 tabs

If you decide to use the breakpoint setting, then the smallest breakpoint: XS (<576px) will be the default settings made inside the Styling tab.

For several select fields exsists a value called: custom. If you choose and save the plugin, then a new input field will be shown.

In this field you can enter a custom css class for your purpose. Feel free to enter mulitple css classes separated with a blank space.

Slavlee Card group

Slavlee Card group is a frontend plugin that gives you the opportunity to group Slavlee Card elements. The card group implements the Bootstrap 4 card group.

The card group is available in 3 layouts:

  • Group
  • Decks
  • Columns

Slavlee Card element can be added with the flexfrom IRRE element


Use the Group layout to render Slavlee Card elements as a single, attached element with equal width and height columns.


Use the Decks layout to render Slavlee Card elements as a single with equal width and height. These elements won't be attached.


Use the Columns layout to render Slavlee Card elements into a Masonry-like columns.

Slavlee TextImageAside

Slavlee TextImageAside is a frontend plugin that has the following properties:

You can change the appearance of each field inside the Config - tab. The image and it's alignment can be set in the Images - tab.

Slavlee Language Change

Slavlee Language Change display a dropdown to let the user change the language. This extension automatically display the list of all created and enabled languages.

Because TYPO3 threat the default language different then all other languages, you have to configure it with TypoScript.

By default Slavlee Language Change configure the default language as English. If your default language is not English, then you have to extend your TypoScript configuration with this settings with adjustments to your default language:

plugin.tx_slavleepackage_languagechange.settings {
	defaultLanguage {
  		uid = 0
  		title = English
  		language_isocode = en
  		flag = en

This plugin will be automatically be included in the footer of your page with the predefined template Company Layout 2.

Other Features

Slavlee Package offers more than new template and 5 frontend plugins. Slavlee Package also offers you tooltip and shortcut support. To use one of these features, we don't need to place a new frontend plugin.


The Tooltip is available for the following content types:

  • Text
  • Text & Images

For those content types you will see in the flexform a new tab called: Tooltip

In this tab you have several options to define a tooltip.


If you want to use a tooltip, then you have to enable it.


There are currently two tooltip types. The type: "Header" express that the tooltip will appear, when the reader hovers over the header of this content element. To make this work, you have to display the header element of this content element. 
The second type is "Tag". If you choose this type, then Slavlee Tooltip search for a shortcode inside the bodytext. The shortcode ist:

{ss:tooltip-header}Text you want to trigger the tooltip{/ss:tooltip-header}



The placement triggers the position of the tooltip related to the triggered anchor.


This is the actual content of the tooltip.


FontAwesome 5 Free icons

Slavlee Package supports all icons from FontAwesome 5 Free. The shortcode can be placed anywhere you want for instance:

  • Header
  • Bodytext
  • Table editor
  • even in TypoScript definitions that adds content that are displayed in the frontend

The shortcode for Slavlee Shortcodes is:

Instead of "..." you need to add the FontAwesome class for your desired icon. You can find all available icons here. Choose your icon and copy the CSS class:

In this example the CSS class is:

fab fa-500px

copy this text and replace it with the "..." from the Slavlee Shortcodes shortcode like so:

That's it.

Bootstrap 4 Components

Slavlee Shortcodes also supports the following Bootstrap 4 components:

  • Alerts
  • Badges
  • Progress


The shortcode for Alerts is the following:

{ss:alert ...}

Instead of "..." you can add custom CSS classes for your own styling or you use one of the following predefined Bootstrap CSS classes:

  • primary
  • secondary
  • success
  • danger
  • warning
  • info
  • light
  • dark

The complete example would look like so:

{ss:alert primary}


The shortcode for Badges is the following:

badge content


The shortcode for Progress is the following:

progress label

The style - parameter can differ and reflects the CSS class. You can enter your own class or use one of the Bootstrap classes, which are mentioned above.

The min - parameter is the lowest value of the progress bar, the start value so to say.

The max - parameter is the highest value of the progress bar, the end value so to say.

The now - parameter is the value that shall be displayed.

You can see all features in action in the official preview page.


When you have need a newline in input fields where no HTML is allowed, then you can add the following shortcode:

Predefined Templates

Company Layout 1

First of all, if you have the previous version of Slavlee Package installed, then you may need to reassign the Include static file. In the c) Installation part is an explanation how to do this.

Include the Static Template Slavlee Package: Company Layout 1 (slavlee_package) and move it straight below Slavlee Package (slavlee_package):

Make sure that no other predefined layout is included.

This static template is optional and enable a complete new template. It bring:

  • 3 new backend and frontend layouts
  • new web design made for little companies
  • Responsive navigation
  • Fixed header

This is an example, how a webpage can look like with Slavlee Package: Company Layout 1. You can see it live here.

You need to add this static template and put it directly after Slavlee Package.

Then all new features are available to you and the new CSS file will be loaded in the frontend.

The static template set several Slavlee Package constants to the correct default value. If you have already installed the Slavlee Package, then make sure you have the following settings: = company-layout-1
page.fluidtemplate.header.background = company-layout-1		

You can also delete your overwriting of the mentioned constants and Slavlee Package: Company Layout 1 will make all the hard work for you.

The layouts

The Company Layout 1: Home and Company Layout Sub 1 is a template with a fluid container for the content. 
That means, that its content will spread to the full width of your browser. This is useful for content elements that shall use the full width.

By default all content elements will now spread to the full width for these two layouts. 
To Avoid this, you can find two new layouts for content elements.

For those elements that shall use the max container width for the certain breakpoints, you can choose: CPL1H: Container
The layout CPL1H: Container Fluid will add the container-fluid class to the element and will (again) spread the content element to the full width.

Example Fluid:

Example not Fluid:

Contact and Address

Company Layout 1 has two new template position inside the template. These areas are left and right from the logo inside the header.

In the constant editor category: SLAVLEE PACKAGE: TEMPLATE you will find the corresponding input fields. These expect the content element uids of the elements to show.

Social Media

In the footer is also a new content position available. It's meant to place the social media links in it. You will find it directly below the contact and address fields in the SLAVLEE PACKAGE: TEMPLATE category.

Company Layout 2

Include the Static Template Slavlee Package: Company Layout 2 (slavlee_package) and move it straight below Slavlee Package (slavlee_package):

Make sure that no other predefined layout is included.

This template is used in

You can use all frontend plugins from Slavlee Package. This template comes with two page templates

  1. Company Layout 2: Home
  2. Company Layout 2: Sub 1

Assign them as backend layouts and it will be activated for the frontend as well.

Fashion Blog Layout

Include the Static Template Slavlee Package: Fashion Blog (slavlee_package) and move it straight below Slavlee Package (slavlee_package):

Make sure that no other predefined layout is included.

The live preview of this template is here Fashion Blog Live Preview.

You can use all frontend plugins from Slavlee Package. This template comes with three page templates

  1. Company Layout 2: Home
  2. Company Layout 2: Sub 1
  3. Fashion Blog

Assign them as backend layouts and it will be activated for the frontend as well.

OnePage Layout

Include the Static Template Slavlee Package: OnePager Layout 1 (slavlee_package) and move it straight below Slavlee Package (slavlee_package):

Make sure that no other predefined layout is included.

The live preview of this template is here OnePager Layout 1 Live Preview.

You can use all frontend plugins from Slavlee Package.

After you have added the Static TS you need to do the following steps:

  1. Insert a section menu in the Section menu column.
  2. Create one subpage per section you want to create in the OnePage
  3. Fill each subpage with content
  4. Create the new content element: Slavlee OnePage Section on the OnePage page itself and assign the subpage that to embed.

Watch the free video instruction on how to do this.

New Features

We have added new features that are not part of the video yet. Please read carefully the following lines.

Expand section height

You can expand the section height to the full device height. This way you can reach to fill the whole device with one section.

This is a classic feature for landing pages.

To enable this feature just enable the checkbox in the flexform:

Enable Full Height Scrolling

We also impement a feature that connects to the feature to expand sections.
This new option is to enable full height scrolling, when scrolling with your mouse wheel.

This means, that you will scroll down a full device height size down or up, when using your mouse wheel. This way you navigate from section to section easily and very smoothly.

You can also toggle the header from static to fixed.

To enable these features just enable the checkboxes in the constant editor:

Background color and image

You can add a background color or background image to the section.

You will find a new background tab in the flexform to choose the background settings.

There you can choose between two types:

  1. Color
  2. Image

You can enter the color code with a colorpicker for an easy selection.

If you decicde to choose an background image, then a new field will appear.

There you can also enable a parallax effect.

How to include sections into the section menu

The section menu will automatically add menu item for each content element that you place on this page, when they have enabled the following checkbox:

Changed Features

Important news: The animation settings for section has been removed.

If you still want to use animations for sections, then you can use now the animation settings in the appearance tab. Unluckily you have to reassign all existing sections. We are very sorry about that. ;(


Version 1.90.155

Version 1.88.152

Version 1.76.137

Version 1.65.123

Version 1.64.121

Version 1.57.113

Version 1.47.101

Version 1.44.96

Version 1.44.95

Version 1.43.94

Version 1.42.93

Version 1.41.92

Version 1.40.91

Version 1.39.90

Version 1.38.89:

Version 1.37.88:

Version 1.37.87

Version 1.37.86

Version 1.37.85

Version 1.37.84

Version 1.37.83

Version 1.37.82

Version 1.36.81

Version 1.3.80:

Version 1.2.41:

Version 1.0.38:

Sources and Credits

I've used the following scripts and codes as listed.

Privacy Statement

Slavlee Package does not create any cookies or store any personal data inside the TYPO3 session.


Duplicate elements in frontend

If you are using Slavlee Container Elements like:

Then you may notice, that the elements that you are putting in are shown twice in the frontend.

To Avoid that, you need to edit the elements.

Slavlee Package V8

In the version for TYPO3 V8, you need to go to the tab: Access and enable the field: Hide In Frontend

This will avoid that this content will be shown in the main content column twice (frontend and backend).

Slavlee Package V9

In the version for TYPO3 V9, the field: Hide in Frontend is dropped. Here you need to assign these elements to a new column (colPos).

The new column is called: Container elements.

This will also avoid that these elements will be shown twice in frontend and backend.

Thank you

Thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugin, you might consider visiting the plugin page or contact myself on my webpage.