Installation
You can install this extension with the Typo3 own extension manager. Simply go to
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 slavlee_packages.zip file contains two folders. The name of the folder reflects the supported major TYPO3 version. Use the slavlee_package.zip 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.
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:
There you can see several options for the Slavlee Package:
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:
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.
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.
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.
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!
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: slavlee_packages_UNZIP_FIRST.zip
This ZIP - files needs to be extracted first. There you will find two folders:
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:
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.
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
Slavlee Package comes with several different frontend plugins. They are all located under the Slavlee tab:
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.
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.
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 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 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 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 works exactly the same then Slavlee Accordion. Simply add tab items with the "Create new" - button.
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".
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. This can be set inside the Images - tab.
Slavlee Jumbotron can adjust these properties for each breakpoint:
You can add a Slavlee Cardgroup to a Jumbotron:
For example you can reach a Jumbotron that looks like this:
There is a new option available to enable the parallax effect for the background image.
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:
The flexform looks like this:
Slavlee Card is a frontend plugin to give you the opportunity to build the Bootstrap 4 card component.
Each card has the following properties:
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 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:
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 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 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.
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:
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.
Slavlee Package supports all icons from FontAwesome 5 Free. The shortcode can be placed anywhere you want for instance:
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.
Slavlee Shortcodes also supports the following Bootstrap 4 components:
Alerts
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:
The complete example would look like so:
{ss:alert primary}Badges
The shortcode for Badges is the following:
badge contentProgress
The shortcode for Progress is the following:
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.
Newline
When you have need a newline in input fields where no HTML is allowed, then you can add the following shortcode:
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:
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:
page.fluidtemplate.header.style = 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 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:
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.
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.
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 www.slavlee.de:
You can use all frontend plugins from Slavlee Package. This template comes with two page templates
Assign them as backend layouts and it will be activated for the frontend as well.
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
Assign them as backend layouts and it will be activated for the frontend as well.
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:
Watch the free video instruction on how to do this.
We have added new features that are not part of the video yet. Please read carefully the following lines.
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:
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:
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:
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:
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:
I've used the following scripts and codes as listed.
Slavlee Package does not create any cookies or store any personal data inside the TYPO3 session.
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.
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).
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 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.