Documentation

Table of Contents

  1. Introduction
  2. Requirements
  3. Installation
  4. Configuration
  5. Upgrade
  6. Frontend Plugins
  7. Other
  8. Features
  9. Predefined
  10. Templates
  11. Change Log
  12. Sources and Credits
  13. Privacy Statement

Introduction

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.

Requirements

Installation

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

  1. "Admin Tools"
  2. Select "Extensions"
  3. Click on the upload button
  4. Select slavlee_package.zip

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.

Configuration

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

Google

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.


Template

Layout

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.

Expand

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)
Style

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.

Background

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.

Rounded

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.

Fluid

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.

Language

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

Debug

Toggle the Typo3 debug setting inside the config typoscript object.

Compression

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.

Upgrade

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!

Frontend Plugins

Slavlee Package coms with 5 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.

NEW in Version 1.35.80

Slavlee Columns is extended with 3 new properties to give more customizations.

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 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".

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:

NEW in Version 1.37.83

You can now add a Slavlee Cardgroup to a Jumbotron:

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

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

Group

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

Decks

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

Columns

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.

Tooltip

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.

Enable

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

Type

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}

 

Placement

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

Text

This is the actual content of the tooltip.

Shortcodes

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

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:

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

The complete example would look like so:

{ss:alert primary}

Badges

The shortcode for Badges is the following:

badge content

Progress

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.

Newline

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
Example

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 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 www.slavlee.de:

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.

Changelog

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.