Slavlee Shortcodes

Documentation

Table of Contents

  1. Introduction
  2. Requirements
  3. Installation
  4. Usage
  5. Change Log
  6. Sources and Credits

Introduction

Slavlee Shortcodes make Bootstrap Components and FontAwesome Icons easy accessible to Typo3 CMS.

Requirements

Installation

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

Install Slavlee Shortcodes with Extension Manager

If you are already using Bootstrap 3 and FontAwesome in your Typo3 webpage, then you are done and ready to use Slavlee Shortcodes.

If not, then 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.

Rootpage
Static TS

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. Select "Slavlee Shortcodes" in the list of available items

If you already using Bootstrap 3 or FontAwesome and what to exclude one of these, then you can do that in TypoScript:

Exclude Bootstrap

To exclude Bootstrap copy & paste the following code:

page.includeCSS.slavlee_shortcodes_bootstrap >
page.includeJSFooterlibs.slavlee_shortcodes_jquery >
page.includeJSFooterlibs.slavlee_shortcodes_bootstrap >

To exclude FontAwesome copy & paste this code:

page.includeCSS.slavlee_shortcodes_fontawesome >

Usage

Slavlee Shortcodes works with special tags that use "{}" as enclosure signs.

The extension currently supports the following Bootstrap 3 components.

Also, supported are all FontAwesome icons.

Bootstrap - Glyphicons

{ss:glyphicons glyphicon-asterisk}

does 

The ss:glyphicon is the prefix for all Glyphicons and is followed by the name of the Glyphicon, which is: glyphicon-asterisk in the above example. 
You can get all names on the Bootstrap 3 page for Glyphicons.

Bootstrap - Labels

{ss:label label-default}Hello World!{/ss:label}

does Hello World!

The ss:label is the prefix for all Labels and is followed by the name of the Label, which is: label-default in the above example. 
You can get all names on the Bootstrap 3 page for Labels.

Bootstrap - Badges

{ss:badge Hello World!}

does Hello World!

The ss:badge is the prefix for all Badges and is followed by the value of the Badge, which is: "Hello World!" in the above example. 
You can get all names on the Bootstrap 3 page for Badges.

Bootstrap - Alerts

does

Hello World!

The ss:alert is the prefix for all Alerts and is followed by the type of the Alert, which is: "success" in the above example. 
You can get all names on the Bootstrap 3 page for Alerts.

Bootstrap - Panels

{ss:panel default|Lorem Ipsum}Hello World!{/ss:panel}

does

Lorem Ipsum

Hello World!

The ss:panel is the prefix for all Panels and is followed by the type of the Panel, which is: "default", and the title, which is: "Hello World!" in the above example. The type and title is seperated with "|" character. 
You can get all names on the Bootstrap 3 page for Panels.

Bootstrap - Wells

{ss:well lg}Hello World!{/ss:well}

does

Hello World!

The ss:well is the prefix for all Wells and is followed by the type of the Well, which is: "lg" in the above example. 
You can get all names on the Bootstrap 3 page for Wells.

FontAwesome - Icons

does 

The ss:fa is the prefix for all Icons and is followed by the name of the Icon, whic is: "font-awesome" in the above example.

Change Log

Version 1.0.1:

Version 1.0:

Sources and Credits

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