Start extends TYPO3 with the responsive framework Foundation (Zurb), a dozen responsive Backend Layouts and some responsive Gridelements.
It enables editors, to create responsive nested layouts within a few minutes. It extends some backend forms for controlling the display of
content elements depending on devices like smartphones, tablets and desktops. It extends TYPO3 content elements and menus with some helpful
responsive Foundation features. A template for a responsive newsletter is included. You can launch a ready-to-use website by Launch TYPO3
Responsive!
Start extends the page record with some properties.
The modul Start TYPO3 enables you to control important informations like
the address data or hyperlinks to social networks on your root page for the
entire website.
You can overwrite this data on subpages - i.e. for a sub-division.
Start TypoScript templates
Start provides some TypoScript templates of course.
Start user-interface (here: categories)
Start enables you to control more than 100 properties per user-interface - the Constant-Editor.
Usually you need to configure only the categories and fields with an asterisk (*).
This are less than five :)
Launch it!
You can launch a ready-to-use website by Launch TYPO3 Responsive! (launchstart)
Workflow: Launch TYPO3 Responsive!
Only some clicks and you have a ready-to-use website based on Start TYPO3 Responsive!
Install Launch TYPO3 Responsive! (launchstart)
The installer page will created automatically
Please click the button [Launch your TYPO3-project] in the frontend form
Start TYPO3 Responsive! (start) extends TYPO3 with the responsive framework Foundation (Zurb),
a dozen responsive backend layouts and some responsive gridelements.
It enables editors, to create responsive nested layouts within a few minutes.
It extends some backend forms for controlling the display and hide of content elements depending on devices like smartphones, tablets and desktops.2
It extends TYPO3 content elements and menus with some helpful responsive Foundation features like
- Breadcrumbs
Clearing Lightbox
Flexible Video
Icon Bar
Side Nav
Top Bar
You can customise a lot of CSS properties – especially colours – by an user interface.
It provides a template for an extensive responsive newsletter.
You can launch a ready-to-use website by Launch TYPO3 Responsive! (launchstart)
What do you need?
A TYPO3 installation only. The installation can be empty.
TYPO3 Versions
TYPO3 10.4
TYPO3 9.5
TYPO3 8.7
Themes
If you like to extend Start with themes, you can install
Select the page, which should highlighted in the menu
Edit area
Page Properties
My Website
[ ] Highlight menu entry
Mega-Menu
Mega menu TYPO3 START. Here: example Kreisverband Passau-Land
Sense and purpose
You can use a mega menu to replace submenus in your main navigation.
You can customize the mega menu - for example in columns and with pictures.
A mega menu can be useful if many levels are displayed in a submenu
and you want to save your visitors in the nested entries to find your way.
Shape
Mega menu TYPO3 START. Here: example des Kreisverbandes Passau-Land
You set up a page outside of the navigation, for example with the name
"Mega-Menu The Greens"
You design this page the way you want it. In the picture above
for example, four columns are created, each is populated with the content
element "Menu sub-pages".
Insert
Mega menu TYPO3 START. Here: example des Kreisverbandes Passau-Land
Edit the properties of the page in the main menu that you want
to assign the mega menu. In the picture above: Main menu > The Greens
Select the tab [TYPO3 START] and below the field "Mega menu". Choose
here the page you set up with the mega menu.
You can assign content elements to grids. This is a powerful tool for individual designs.
Available grids are
columns (1 to 6)
accordion
tab
Workflow
Gridelements in the content wizard
You can nest gridelements.
Properties of a gridelement
You can control the responsive behaviour with the properties columns arrangement.
3 columns gridelement with one text element per column
You can create every content element in the grid. A gridelement too.
Frontend
Result on a desktop
Result on a smartphone
Same Height for all columns
You can set the height of all columns to the same value. Currently, this feature
is only available if you use the responsive Framework Foundation.
Frontend
Same height for all columns (frontend)
All four columns have the same height in the illustration above.
Backend
Gridelement with four columns in the backend
The corresponding layout in the backend.
Option: Same height for all columns
If you like same height for all columns, please activate the checkbox.
If you want to add a CSS class to a specific column, you are welcome.
How to find defined CSS classes is shown in the following figure.
Defined CSS classes
Here you will find defined CSS classes:
Tab [Appearance] > field: CSS class (defined)
Page Media
The extension Start adds the new content element "Page Media" to TYPO3.
This content element is very usefull for header images.
"Page Media" displays the first image of the field media of the current page.
If there isn't any record, it slides in the page tree to the top.
If page of one of the next levels has a media record, the record of the nearest page will displayed.
In page properties => tab "My Website" you've got 12 prepared fields for several social media links with
default titles and icons. In addition you can use 3 variable fields.
All fields can take a custom title and/or custom icon.
Socialmedia: insert a link in the field and use default icons and titles
Socialmedia: without a link, no icon is displayed
Socialmedia: use default icon and custom title
Socialmedia: use custom icon and custom title
Socialmedia: frontend view for these examples
Spell Check
Start supports spell checking while writing. Unknown or wrong words will get
a red underline. You can manage the substitution with
If you like a responsive website extended with a database for the lobbies and the organisers,
you can use the TYPO3 distribution "Launch TYPO3 Gruene!" (launchstartgreen).
TYPO3 Gruene can manage events, locations and news among others. To get rid of the corporate design
of the German party Bündnis 90/Die Grünen you have only to remove TYPO3 GRÜNE (startgreen)
after the installation.
Disable all backend layouts. Overwrites all properties from below. Recommended, if you like to use only some features of Start and not the whole framework.
Enable Default
Enable the default templates of the TYPO3 API. Not recommended.
Enable Wide
Enable the wide templates of Start TYPO3 Responsive! Recommended.
Enable Mixed
Enable the mixed templates of Start TYPO3 Responsive! Recommended.
Enable Slim
Enable the slim templates of Start TYPO3 Responsive! Recommended.
Enable Slim Extended
Enable the slim extended templates of Start TYPO3 Responsive! Recommended.
Enable Start Newsletter
Enable the newsletter templates of Start TYPO3 Responsive! Recommended only, of you
are using a newsletter extesion like direct mail.
Enable Start Deprecated
Enable the deprecated templates of Start TYPO3 Responsive! Not recommended.
Backend Style
You can disable the Corporate Design of TYPO3 Start at backend login.
Language
You can select English or German. This has an effect only in the backend.
Module
You can disable the Start TYPO3 in the Module > Web.
TCA
Start extends and improves forms for backend tables. You can disable it.
This is recommended, if you like to use only some features of Start and not the whole framework.
Backend Groups: Disable additional TCA properties for the table be_groups.
Backend Users: Disable additional TCA properties for the table be_users.
Content: Disable additional TCA properties for the table tt_content.
File Mounts:Disable additional TCA properties for the table sys_filemounts.
Pages: Disable additional TCA properties for the table pages.
Privacy
Start doesn't stores any data.
Start supports you to provide websites conform with the General Data Protection Regulation - GDPR (German: Datenschutz-Grundverordnung - DSGVO)
You can place a link to the page with the General Data Protection Regulation - GDPR (German: Datenschutz-Grundverordnung - DSGVO) to the bottom of each
form by TypoScript.
For example: You can add the TypoScript path from below to any Powermail TypoScript field.
Setup
Constant Editor
Category: START - PAGES
GDPR/DSGVO: uid of the page with the GDPR/DSGVO
TypoScript snippet
// path for a Powermail TypoScript field
start.lib.gdpr_dsgvo
// snippet for the extension TypoScript code (typoscript_code)10 < start.lib.gdpr_dsgvo
EXT:start provides a layout for folder. This layout has the content area only.
If you like to set all pages of the doktype folder but module dmail to the backend layout folder,
you can use the SQL statement from below.
Please make a backup of your pages table before run the update statement from below.
Analysis
-- Count all modules from pages of doktype folder but module dmail
SELECT count(module), module FROM pages
WHERE doktype = 254AND module != 'dmail'
GROUP BY module;
-- Count all backend_layouts from pages of doktype folder but module dmail
SELECT count(backend_layout), backend_layout FROM pages
WHERE doktype = 254AND module != 'dmail'
GROUP BY backend_layout;
-- Display all pages of doktype folder but module dmail
SELECT uid, module, backend_layout, title FROM pages
WHERE doktype = 254AND module != 'dmail'
ORDER BY module, backend_layout, title, uid;
Copied!
Update
-- Update all pages of doktype folder but module dmail to backend_layout folder
UPDATE pages
SET backend_layout = 'start__folder'
WHERE doktype = 254AND module != 'dmail';
If you like to use one newsletter category only (the default one), you have nothing to do
than to disable the powermail field, which is called "newsletter".
Rename
If you have extended Start with "Launch Direct Mail!" four newsletter categories
are available:
Default
Angestellte (employees)
Beamte (officials)
Selbständige (self-employed)
If you want to rename a category, you have to configure three parts:
the newsletter category
the powermail field
the constant editor
Direct Mail Categories
Rename the direct mail category.
Powermail
Look for the checkbox field which is called "newsletter". Rename the newsletter categories
depending on the changing from above.
Constant Editor
Please look for the category:
[START - DIRECT_MAIL - CATEGORIES]
Extensions
You need this extensions for this sample:
Address List (tt_address) - optional
Direct Mail (direct_mail)
Scheduler (scheduler)
TYPO3 GRÜNE (startgreen) - optional
Dialog
Start opens a popup (modal) to point to the newsletter subscription form.
The popup opens after 10 seconds. If the user clicks a button, the popup won't never open again.
If the user is clearing a corresponding cookie, the popup will open again.
Conditions
The uid of the page is set, which contains the newsletter subscription form.
The popup is enabled.
Setup
Constant Editor
Module > Web > Templates
Page tree: root page
Edit area:
[Constanten Editor]
Category: [START - PAGES]
Newsletter: uid of the page with the newsletter subscription form
If you are providing a RSS feed, it is easy to display a RSS icon in the frontend on the top right.
You have nothing to but to enter the page id of the rss feed at
Constant Editor > Category [START - PAGES] > RSS
How to provide a RSS feed?
If you want know, how to provide a RSS feed, please refer to the sample in the manual of the Organiser (ext:org).
You can extend the Rich Text Editor with the features:
Search and replace
Spell Checking
Youtube plugin
Setup
You have to include the page TypoScript at the root page:
Start [1.0.0] RTE with search, spellchecking and youtube
There is another page TypoScript with more options. See @ RTE > Plugins
Spell Checking
Precondition: The Browser of the user supports spell checking
Youtube plugin
You can place Youtube videos everywhere in the bodytext.
BE AWARE: A direct use of youtube code causes your visitor's data to flow to youtube (google).
Please check the GDPR (DSGVO) statement on your website, if it contains any reference.
Search Engine
If you like a search enginge for the whole website, EXT:ke_search is recommended.
But you can use any other search engine too.
If you like to adapt CSS to your needs, you don't must edit CSS or SCSS directly.
You can configure most of the common properties by the TypoScript Constant Editor (see illustration above).
You can use CSS values like '#00FFFF' or SCSS variables like '$primary-color'.
These features have SCSS properties by the Constant Editor:
accordion
body
breadcrumbs
breakpoint
button
callout
color palette
dropdown-menu
footer
global
menu
megamenu
metamenu
off-canvas
orbit
pagination
reveal
sidebar
sitelinetop
table
tabs
titlebar
top-bar
typografy
Own Variables
If you like to use other SCSS variables then the predefined, you can extend your TypoScript.
This saves effort, if a variable is used in SCSS.
Sample
The variable $my-content-border is defined in some.scss like
$my-content-border = 1px solid #FDFDFD !default;
Copied!
You can allocate your value by this code in the TypoScript setup:
start.structure.header.main.20.20 {
// Remove both cells: Logo, Party/Organisation10 >
20 >
// Add an image of the page resource30 < start.lib.pagemedia
30 {
// Take the second image of the page ressource
begin = 1
renderObj.10.file {
// Set the default value for the height to 100 pixel
height = 100// Remove the default value for the width
width >
}
}
// Additional HTML div-wrap with class column
wrap = <div class="rowgreen-devision"><!-- start.structure.header.main.20 //--><divclass="colscolumns">|</div></div>
}
Copied!
Own Theme
If you like to create your own theme, there are two ways:
Argument 1 passed to TYPO3CMSFrontendResourceFileCollector::addFileObject() must implement interface TYPO3CMSCoreResourceFileInterface, boolean given, called in .../typo3/sysext/frontend/Classes/Resource/FileCollector.php on line 118
Cause
Unproper configuration of a relation to a file.
Solution
Probably the page resource media is linked with a file, which is deleted. Please
delete the relation at page resource media.
Undefined variable $black
Prompt
Undefined variable $black: ...
Cause
SCSS of EXT:t3foundation will processed before SCSS of EXT:start
Solution
Please take care of the order of the Include Static Templates:
EXT:start
EXT:t3foundation
Upgrades
Note
Upgrade: you MUST update your database. Please use the
Upgrade Wizard
Please use the Upgrade Wizard for upgrading your database.
CSS class '.panel'
10.3.0
CSS class .panel is removed since foundation 6.x. It must replaced by .callout
Have I used the class '.panel'?
Please send this queries to your database. If you have used .panel, you will get some hits.
SELECT
uid,
pid,
header,
tx_start_additionalclassdefined,
tx_start_classpanel
FROM
tt_content
WHERE
(
tx_start_additionalclassdefined LIKE'%panel%'OR tx_start_classpanel LIKE'%panel%'
);
Copied!
SELECT
uid,
pid,
header,
bodytext,
pi_flexform
FROM
tt_content
WHERE
(
bodytext LIKE'%panel%'OR pi_flexform LIKE'%panel%'
);
Copied!
Replace '.panel' with '.callout'
Note
Make a copy of your table tt_content
tx_start_additionalclassdefined
UPDATE
tt_content
SET
tx_start_additionalclassdefined =
REPLACE
(
tx_start_additionalclassdefined,
'panel',
'callout'
)
WHERE
tx_start_additionalclassdefined LIKE'%panel%'-- AND uid = 35666
Copied!
tx_start_classpanel
UPDATE
tt_content
SET
tx_start_classpanel =
REPLACE
(
tx_start_classpanel,
'panel',
'callout'
)
WHERE
tx_start_classpanel LIKE'%panel%'-- AND uid = 47640
Copied!
pi_flexform
UPDATE
tt_content
SET
pi_flexform =
REPLACE
(
pi_flexform,
'panel',
'callout'
)
WHERE
pi_flexform LIKE'%panel%'-- AND uid = 47640
Copied!
bodytext
Note
It is recommended to edit the bodytext field manually.
The upgrade wizard won't update the field bodytext.
UPDATE
tt_content
SET
bodytext =
REPLACE
(
bodytext,
'panel',
'callout'
)
WHERE
bodytext LIKE'%panel%'-- AND uid = 47640
Copied!
8.2
8.0.28
New behaviour: If left or right columns are empty, an empty placeholder will set with 1px height.
That <div> affects, that the empty column will displayed in full width.
If you don't like this effect, please add this property to your CSS file:
.startVisHiddenHeight1 { display: none; }
Copied!
TypoScript
If you have configured the TypoScript properties from below, YOU MUST update your configuration!
start.structure.content.left.20 is moved from CONTENT to COA
start.structure.content.right.20 is moved from CONTENT to COA
Queries below are for information only. You can skip this paragraph
and go to the next one: Upgrade
Count all used grid elements
-- Count all used grid elements: accordions, columns and tabs
SELECT count(`uid`) AS'#', `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'
GROUP BY `tx_gridelements_backend_layout`
ORDER BY `tx_gridelements_backend_layout`
-- Count all accordions
-- Uid for element 'accordion and tab' is 11 in the code below
SELECT count(`uid`) AS'#', `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'AND `tx_gridelements_backend_layout` = '11'AND `pi_flexform` LIKE '%accordion%'
GROUP BY `tx_gridelements_backend_layout`
ORDER BY `tx_gridelements_backend_layout`
-- Count all tabs
-- Uid for element 'accordion and tab' is 11 in the code below
SELECT count(`uid`) AS'#', `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'AND `tx_gridelements_backend_layout` = '11'AND `pi_flexform` NOT LIKE '%accordion%'
GROUP BY `tx_gridelements_backend_layout`
ORDER BY `tx_gridelements_backend_layout`
Copied!
List all used grid elements
-- List all used grid elements: accordions, columns and tabs
SELECT `uid`, `pid`, `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'
-- List all accordions
-- Uid for element 'accordion and tab' is 11 in the code below
SELECT `uid`, `pid`, `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'AND `tx_gridelements_backend_layout` = '11'AND `pi_flexform` LIKE '%accordion%'
-- List all tabs
-- Uid for element 'accordion and tab' is 11 in the code below
SELECT `uid`, `pid`, `CType`, `tx_gridelements_backend_layout`
FROM `tt_content`
WHERE `CType` LIKE 'gridelements_pi1'AND `tx_gridelements_backend_layout` = '11'AND `pi_flexform` NOT LIKE '%accordion%'
Copied!
Upgrade
Backup tt_content
Before you start: backup your table tt_content.
List configured grid elements
SELECT `uid`, `pid`, `title`
FROM `tx_gridelements_backend_layout`
Copied!
Create the SQL UPDATE-queries
Assign the uids form the query above to the uid-lables like in the table below.
If you would like to receive the UPDATE queries automatically, please use this file:
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol01' WHERE tx_gridelements_backend_layout = '1';
Start: Columns 2
2
startCol02
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol02' WHERE tx_gridelements_backend_layout = '2';
Start: Columns 3
3
startCol03
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol03' WHERE tx_gridelements_backend_layout = '3';
Start: Columns 4
4
startCol04
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol04' WHERE tx_gridelements_backend_layout = '4';
Start: Columns 5
5
startCol05
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol05' WHERE tx_gridelements_backend_layout = '5';
Start: Columns 6
6
startCol06
UPDATE tt_content SET tx_gridelements_backend_layout = 'startCol06' WHERE tx_gridelements_backend_layout = '6';
Start: Accordion & Tabs
11
startAccordion
UPDATE tt_content SET tx_gridelements_backend_layout = 'startAccordion' WHERE tx_gridelements_backend_layout = '11' AND pi_flexform LIKE '%accordion%';
Start: Accordion & Tabs
11
startTab
UPDATE tt_content SET tx_gridelements_backend_layout = 'startTab' WHERE tx_gridelements_backend_layout = '11' AND pi_flexform NOT LIKE '%accordion%';
Copy the SQL statements and paste it into your PhpMyAdmin application or into your SQL CLI.
Hide Headers
Headings and titles of elements within the grid are shown as labels in the accordions,
tabs and also in the content. This is a new behavior.
If you don't like to display headers in the content, you can set the headers to hidden by
executing the UPDATE-query from below.
-- Display all elements, which are part of an accordion or a tab
SELECT t1.uid, t1.pid, t1.header, t1.header_layout
FROM tt_content t1
INNER JOIN tt_content t2
ON t1.tx_gridelements_container = t2.uid
AND t2.CType LIKE 'gridelements_pi1'AND (t2.tx_gridelements_backend_layout = 'startTab'OR t2.tx_gridelements_backend_layout = 'startAccordion')
-- AND t1.pid = 11710
-- Set header to hidden by all elements, which are part of an accordion or a tab
UPDATE tt_content t1
INNER JOIN tt_content t2
ON t1.tx_gridelements_container = t2.uid
AND t2.CType LIKE 'gridelements_pi1'AND (t2.tx_gridelements_backend_layout = 'startTab'OR t2.tx_gridelements_backend_layout = 'startAccordion')
-- AND t1.pid = 11710
SET t1.header_layout = 100
Copied!
Clean Up
Don't forget to clean up the Grid Elements. See next section
You should remove all records from the table tx_gridelements_backend_layout.
Otherwise, users can still select the outdated grid elements.
Backup
Before you start: backup your tables:
pages
tx_gridelements_backend_layout
List configured grid elements
-- Get all folders
SELECT *
FROM pages
WHERE doktype = 254AND uid IN (
SELECT `pid`
FROM `tx_gridelements_backend_layout`
GROUP BY `pid`
ORDER BY `pid`
);
-- Get all configuration records
SELECT `uid`, `pid`, `title`
FROM `tx_gridelements_backend_layout`;
Copied!
Remove configured grid elements
-- First: delete pages
DELETE FROM pages
WHERE doktype = 254AND uid IN (
SELECT `pid`
FROM `tx_gridelements_backend_layout`
GROUP BY `pid`
ORDER BY `pid`
);
-- Second: delete records
DELETE FROM `tx_gridelements_backend_layout`;
You can update the values by the SQL statements from below or manually.
SQL Statement
SELECT
Get all records with an included static template CSS Styled Content (css_styled_content):
SELECT `uid`, `pid`, `title`, `include_static_file`
FROM `sys_template`
WHERE `include_static_file` LIKE '%EXT:css_styled_content/Configuration/TypoScript/%'
Copied!
UPDATE
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:css_styled_content/Configuration/TypoScript/', 'EXT:fluid_styled_content/Configuration/TypoScript/,EXT:fluid_styled_content/Configuration/TypoScript/Styling/')
WHERE `include_static_file` LIKE '%EXT:css_styled_content/Configuration/TypoScript/%';
UPDATE `sys_template`
SET `title` = REPLACE(`title`, 'cssstyledcontent', 'fluidstyledcontent')
WHERE `title` LIKE '%cssstyledcontent%';
Copied!
Manually
Please use Fluid Styled Content:
Enable the extension Fluid Styled Content
Update your TypoScript
Replace CSS Styled Content by Fluid Styled Content
Disable the extension CSS Styled Content
Fluid Styled Content
It is recommended to use Fluid Styled Content (fluid_styled_content).
Update from CSS Styled Content (css_styeld_content) to Fluid Styled Content is explained above.
Foundation Framework
Please replace cb_foundation with t3foundation.
You can update the configuration by the SQL statements from below or manually.
SQL Statements
SELECT
Find former included static template of t3foundation:
-- extension t3foundation
SELECT `uid`, `pid`, `title`, `include_static_file`
FROM `sys_template`
WHERE `include_static_file` LIKE '%EXT:t3foundation/Configuration/TypoScript%'AND `include_static_file` NOT LIKE '%EXT:t3foundation/Configuration/TypoScript/Default/%'
Copied!
Find cb_foundation templates:
SELECT `uid`, `pid`, `title`, `include_static_file`
FROM `sys_template`
WHERE `include_static_file` LIKE '%EXT:cb_foundation%'
Copied!
Find cb_foundation content elements:
-- extension cb_foundation
SELECT `uid`, `pid`, `header`, `CType`
FROM `tt_content`
WHERE `CType` LIKE '%cbfoundation%'
Copied!
UPDATE
If you have used t3foundation before, please update the include static template:
Replace "Foundation framework [DEPRECATED!]" with "Foundation framework"
-- extension t3foundation
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:t3foundation/Configuration/TypoScript', 'EXT:t3foundation/Configuration/TypoScript/Default/')
WHERE `include_static_file` LIKE '%EXT:t3foundation/Configuration/TypoScript%'AND `include_static_file` NOT LIKE '%EXT:t3foundation/Configuration/TypoScript/Default/%';
-- revison
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:t3foundation/Configuration/TypoScript/Default//Default/', 'EXT:t3foundation/Configuration/TypoScript/Default/')
WHERE `include_static_file` LIKE '%EXT:t3foundation/Configuration/TypoScript/Default//Default/%';
Copied!
Replace template of cb_foundation with the one of t3foundation
-- extension cb_foundation
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:cb_foundation/Configuration/TypoScript', 'EXT:t3foundation/Configuration/TypoScript/Default/')
WHERE `include_static_file` LIKE '%EXT:cb_foundation/Configuration/TypoScript%';
UPDATE `sys_template`
SET `title` = REPLACE(`title`, 'cbfoundation', 't3foundation')
WHERE `title` LIKE '%cbfoundation%';
Copied!
Replace cb_foundation content elements with the ones of t3foundation (here: clearing lightbox, flexible video and orbit slider):
-- extension cb_foundation
UPDATE `tt_content` SET `CType` = 't3foundation_clearing' WHERE `tt_content`.`CType` LIKE 'cbfoundation_clearing';
UPDATE `tt_content` SET `CType` = 't3foundation_flexvid' WHERE `tt_content`.`CType` LIKE 'cbfoundation_flexvid';
UPDATE `tt_content` SET `CType` = 't3foundation_orbit' WHERE `tt_content`.`CType` LIKE 'cbfoundation_orbit';
Copied!
Manually
Please replace cb_foundation with t3foundation:
Include Static Templates
Constants
Setup
If you have used t3foundation before, please update the include static template:
Replace "Foundation framework [DEPRECATED!]" with "Foundation framework"
Replace cb_foundation content elements with the ones of t3foundation.
Grid Elements
In case of broken frontend or backend layouts
SELECT
Find content elements:
-- extension gridelements
SELECT `uid`, `pid`, `header`, `colPos`, `tx_gridelements_container`
FROM `tt_content`
WHERE `colPos` >= 0AND `tx_gridelements_container` > 0
-- AND `pid` = 5813
Copied!
Update
-- extension gridelements
UPDATE `tt_content`
SET `colPos` = -1
WHERE `colPos` >= 0AND `tx_gridelements_container` > 0
-- AND `pid` = 5813
Copied!
Slick
You have to inlude the static template again.
You can do the job by SQL statements or manually.
SQL Statement
SELECT
Get all records with an included static template of Slick - responsive Carousel Slider (slick):
SELECT `uid`, `pid`, `title`, `include_static_file`
FROM `sys_template`
WHERE `include_static_file` LIKE '%EXT:slick%'
Copied!
UPDATE
-- replace the base template
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:slick/Configuration/TypoScript/7.6/', 'EXT:slick/Configuration/TypoScript/Default/')
WHERE `include_static_file` LIKE '%EXT:slick/Configuration/TypoScript/7.6/%';
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:slick/Configuration/TypoScript/Base', 'EXT:slick/Configuration/TypoScript/Default/')
WHERE `include_static_file` LIKE '%EXT:slick/Configuration/TypoScript/Base%';
-- remove non needed includestatic templates
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:slick/Configuration/TypoScript/Carousel', '')
WHERE `include_static_file` LIKE '%EXT:slick/Configuration/TypoScript/Carousel%';
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:slick/Configuration/TypoScript/Item', '')
WHERE `include_static_file` LIKE '%EXT:slick/Configuration/TypoScript/Item%';
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, 'EXT:slick/Configuration/TypoScript/RemoveLLATag', '')
WHERE `include_static_file` LIKE '%EXT:slick/Configuration/TypoScript/RemoveLLATag%';
-- clean up double comma (repeat it!)
UPDATE `sys_template`
SET `include_static_file` = REPLACE(`include_static_file`, ',,', ',')
WHERE `include_static_file` LIKE '%,,%';
Copied!
Manually
Look for Slick templates:
Include the static template again.
File List
Fluid Styled Content changes the behaviour of the layouts of file lists:
Layout was configured by "layout", now it is configured by "uploads_type"
SQL Statement
SELECT
SELECT `uid`, `pid`, `header`, `layout`, `uploads_type` FROM `tt_content` WHERE `layout` > 0
Copied!
UPDATE
UPDATE `tt_content` SET `uploads_type` = 1 WHERE `uploads_type` = 0AND `layout` = 1;
UPDATE `tt_content` SET `uploads_type` = 2 WHERE `uploads_type` = 0AND `layout` > 1;
Copied!
Headers
Fluid Styled Content changes the behaviour of header layouts:
If a header has the default value, it will get the class for a header with layout 2
Former behaviour was layout 1
SQL Statement
SELECT
SELECT `uid`, `pid`, `header`, `header_layout` FROM `tt_content` WHERE `header_layout` = '0'
Copied!
UPDATE
UPDATE `tt_content` SET `header_layout` = '1' WHERE `tt_content`.`header_layout` = '0'
Copied!
Indentation and Frames
The CSS for panels was controlled in TYPO3 upto 7.x here:
content element > Appearance > Indentation and Frames
The CSS for panels is controlled in TYPO3 from 8.x here:
content element > General > Additional CSS
You can update the values by the SQL statements from below or manually.
SQL Statement
SELECT
Get all records with custom configuration of the frame class:
-- different extensions
SELECT `uid`, `pid`, `header`, `frame_class`, `CType`, `tx_start_additionalclassdefined`
FROM `tt_content`
WHERE `frame_class` LIKE 'custom-%'
Copied!
UPDATE
-- extension leaflet
UPDATE `tt_content`
SET `frame_class` = 'none'
WHERE `tt_content`.`frame_class` LIKE 'custom-331';
-- extension slick
UPDATE `tt_content`
SET `frame_class` = 'none'
WHERE `tt_content`.`frame_class` LIKE 'custom-62474';
UPDATE `tt_content`
SET `frame_class` = 'default'
WHERE `tt_content`.`frame_class` LIKE 'custom-62475';
UPDATE `tt_content`
SET `frame_class` = 'none'
WHERE `tt_content`.`frame_class` LIKE 'custom-62476';
-- extension start
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'startImgCircle')
WHERE `frame_class` LIKE 'custom-86';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'startWoPadding')
WHERE `frame_class` LIKE 'custom-87';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'startWoPaddingLeft')
WHERE `frame_class` LIKE 'custom-88';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'startWoPaddingRight')
WHERE `frame_class` LIKE 'custom-89';
-- extension startgreen
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenBlue')
WHERE `frame_class` LIKE 'custom-2861';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenBlueLight')
WHERE `frame_class` LIKE 'custom-2862';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenMagenta')
WHERE `frame_class` LIKE 'custom-2863';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenMagentaLight')
WHERE `frame_class` LIKE 'custom-2864';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenGreen')
WHERE `frame_class` LIKE 'custom-2865';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenGreenDark')
WHERE `frame_class` LIKE 'custom-2866';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenYellow')
WHERE `frame_class` LIKE 'custom-2867';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenYellowDark')
WHERE `frame_class` LIKE 'custom-2868';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenWhite')
WHERE `frame_class` LIKE 'custom-2869';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel','startgreenWhiteShadow')
WHERE `frame_class` LIKE 'custom-2870';
-- extension t3foundation
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel')
WHERE `frame_class` LIKE 'custom-100';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel radius')
WHERE `frame_class` LIKE 'custom-101';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel callout')
WHERE `frame_class` LIKE 'custom-102';
UPDATE `tt_content`
SET `frame_class` = 'default', `tx_start_additionalclassdefined` = CONCAT_WS(',', `tx_start_additionalclassdefined`, 'panel callout radius')
WHERE `frame_class` LIKE 'custom-103';
Copied!
Manually
If you have used the property "Indentation and Frames" you must update the "Additional CSS" manually.
Menus
Update
Some menu types are lost in TYPO3 8.7.
You must update these content elements by a SQL statement or manually.
SELECT
-- Sitemap
SELECT `uid`, `pid`, `header`, `CType`, `menu_type` FROM `tt_content` WHERE `CType` = 'menu'AND `menu_type` = 2;
-- Menu Pages
SELECT `uid`, `pid`, `header`, `CType`, `menu_type` FROM `tt_content` WHERE `CType` = 'menu'AND `menu_type` = '0';
-- Menu Subpages
SELECT `uid`, `pid`, `header`, `CType`, `menu_type` FROM `tt_content` WHERE `CType` = 'menu'AND `menu_type` = 1;
SELECT `uid`, `pid`, `header`, `CType`, `menu_type` FROM `tt_content` WHERE `CType` = 'menu'AND `menu_type` = 4;
-- Section Index
SELECT `uid`, `pid`, `header`, `CType`, `menu_type` FROM `tt_content` WHERE `CType` = 'menu'AND `menu_type` = 3;
-- Menu Start
SELECT `uid`, `pid`, `header`, `CType` FROM `tt_content` WHERE `CType` LIKE 'menu_start%';
Copied!
UPDATE
-- Sitemap
UPDATE `tt_content` SET `CType` = 'menu_sitemap', `menu_type` = NULL WHERE `tt_content`.`CType` = 'menu'AND `menu_type` = 2;
-- Menu Pages
UPDATE `tt_content` SET `CType` = 'menu_pages', `menu_type` = NULL WHERE `tt_content`.`CType` = 'menu'AND `menu_type` = '0';
-- Menu Subpages
UPDATE `tt_content` SET `CType` = 'menu_subpages', `menu_type` = NULL WHERE `tt_content`.`CType` = 'menu'AND `menu_type` = 1;
UPDATE `tt_content` SET `CType` = 'menu_subpages', `menu_type` = NULL WHERE `tt_content`.`CType` = 'menu'AND `menu_type` = 4;
-- Section Index
UPDATE `tt_content` SET `CType` = 'menu_section', `menu_type` = NULL WHERE `tt_content`.`CType` = 'menu'AND `menu_type` = 3;
-- Menu Start
UPDATE `tt_content` SET `CType` = 'menu' WHERE `tt_content`.`CType` LIKE 'menu_start%';
Copied!
Manually
Sample for [ INVALID VALUE ("menu_startFoundationSideNavFromDirs") ]
Edit the Content Element
Move Type
from: [ INVALID VALUE ("menu_startFoundationSideNavFromDirs") ]
to: [Start: Menus]
Reference Index
Maybe the upgrade of the reference index isn't run proper.
Probably the cause are "broken" links: the internal syntax of TYPO3 for links is changed.
The manual of the Organiser (EXT:org) provides some SQL statements for analysing trouble with the link syntax.
The properties space before and space after of tt_content elements will lost.
They will replaced by the space_before_class and the space_after_class.
It's possible to update this changing by SQL statements from below.
Condition
You don't must remove the fields while updating (comparing) the database:
spaceBefore
spaceAfter
Workflow
The spaceBefore and the spaceAfter could not replace one to one. The cause is:
spaceBefore and spaceAfter stored pixel values, the properties space_before_class
and space_after_class stores one of five classes.
These are the five classes:
extra-small: 1em (16px)
small: 2em (32px)
medium: 3em (48px)
large: 4em (64px)
extra large: 5em (80px)
The SQL statement from below will "translate" pixel values to classes:
from 0px to 7px: null
from 8px to 25px: extra-small (1em)
from 26px to 39px: small (2em)
from 40px to 55px: medium (3em)
from 56px to 71px: large (4em)
from 72px to unlimited: extra-large (5em)
SQL Statement
SELECT
Get all records with spaceBefore or spaceAfter values:
SELECT `uid`, `pid`, `header`, `spaceAfter`, `spaceBefore`, `space_after_class`, `space_before_class`
FROM `tt_content`
WHERE `spaceAfter` > 0OR `spaceBefore` > 0;
Copied!
UPDATE
UPDATE `tt_content`
SET `space_after_class` = 'extra-small'
WHERE `spaceAfter` >= 8AND `spaceAfter` <= 25;
UPDATE `tt_content`
SET `space_after_class` = 'small'
WHERE `spaceAfter` >= 26AND `spaceAfter` <= 39;
UPDATE `tt_content`
SET `space_after_class` = 'medium'
WHERE `spaceAfter` >= 40AND `spaceAfter` <= 55;
UPDATE `tt_content`
SET `space_after_class` = 'large'
WHERE `spaceAfter` >= 56AND `spaceAfter` <= 71;
UPDATE `tt_content`
SET `space_after_class` = 'extra-large'
WHERE `spaceAfter` >= 72;
UPDATE `tt_content`
SET `space_before_class` = 'extra-small'
WHERE `spaceBefore` >= 8AND `spaceBefore` <= 25;
UPDATE `tt_content`
SET `space_before_class` = 'small'
WHERE `spaceBefore` >= 26AND `spaceBefore` <= 39;
UPDATE `tt_content`
SET `space_before_class` = 'medium'
WHERE `spaceBefore` >= 40AND `spaceBefore` <= 55;
UPDATE `tt_content`
SET `space_before_class` = 'large'
WHERE `spaceBefore` >= 56AND `spaceBefore` <= 71;
UPDATE `tt_content`
SET `space_before_class` = 'extra-large'
WHERE `spaceBefore` >= 72;
Copied!
In case of a database dump
spaceAfter
Get all records with spaceAfter values:
SELECT `uid`, `pid`, `header`, `spaceAfter`
FROM `tt_content`
WHERE `spaceAfter` > 0;
Copied!
Export the result to a table like Excel or Libre Office calc. You find a draft
with a ready-to-use formula for a SQL update for download at my Git here: spaceAfter.ods
spaceBefore
Get all records with spaceBefore values:
SELECT `uid`, `pid`, `header`, `spaceBefore`
FROM `tt_content`
WHERE `spaceBefore` > 0;
Copied!
Export the result to a table like Excel or Libre Office calc. You find a draft
with a ready-to-use formula for a SQL update for download at my Git here: spaceBefore.ods
Table
Tables of Fluid Styled Content has the new property table_delimiter.
You have to enter the value "| pipe".
SQL Statement
SELECT
SELECT `uid`, `pid`, `header`, `table_delimiter` FROM `tt_content` WHERE `CType` = 'table'AND `table_delimiter` = 0
Copied!
UPDATE
-- table_delimiter: 124 equates to pipe
UPDATE `tt_content` SET `table_delimiter` = 124 WHERE `CType` = 'table'AND `table_delimiter` = 0
Copied!
In Case of trouble
Disable Compression
Constant Editor > category [START - COMPRESS CSS AND JSS]
Please fix the bug of columns confusion in grid elements with three columns.
You can run Start without executing the SQL statements from below.
But then you MUST include a static template, to run a proper Start extension
with the former behaviour. See: Include the static template
Backup tables
Please backup the database tables
tt_content
tx_gridelements_backend_layout
Statements
SELECT
Data won't be changed. Statements serves only information.
-- Find all grid layouts with three columns and one row
SELECT uid, pid, title, description, config FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%'
-- Find all content elements, which are using the three columns grid layout
CREATE TEMPORARY TABLE gridLayoutColumns03 SELECT uid FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%';
CREATE TEMPORARY TABLE gridElementColumns03 SELECT uid FROM `tt_content` WHERE `CType` LIKE 'gridelements_pi1'AND tx_gridelements_backend_layout IN(SELECT uid FROM gridLayoutColumns03);
SELECT uid, pid, header, tx_gridelements_backend_layout FROM tt_content WHERE uid IN(SELECT uid FROM gridElementColumns03);
-- Find all content elements, which are part of a three columns grid layout
CREATE TEMPORARY TABLE gridLayoutColumns03 SELECT uid FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%';
CREATE TEMPORARY TABLE gridElementColumns03 SELECT uid FROM `tt_content` WHERE `CType` LIKE 'gridelements_pi1'AND tx_gridelements_backend_layout IN(SELECT uid FROM gridLayoutColumns03);
CREATE TEMPORARY TABLE contentForColumns03 SELECT uid FROM tt_content WHERE uid IN(SELECT uid FROM gridElementColumns03);
SELECT uid, pid, header, tx_gridelements_backend_layout, tx_gridelements_container, tx_gridelements_columns FROM tt_content WHERE tx_gridelements_container IN(SELECT uid FROM contentForColumns03);
Copied!
UPDATE
Data will updated.
-- Update columns configuration in all grid layouts with three columns and one row
CREATE TEMPORARY TABLE gridLayoutColumns03 SELECT uid FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%';
UPDATE tx_gridelements_backend_layout SET config = REPLACE(config, 'colPos = 0', 'colPos = x') WHERE uid IN(SELECT uid FROM gridLayoutColumns03);
UPDATE tx_gridelements_backend_layout SET config = REPLACE(config, 'colPos = 1', 'colPos = 0') WHERE uid IN(SELECT uid FROM gridLayoutColumns03);
UPDATE tx_gridelements_backend_layout SET config = REPLACE(config, 'colPos = x', 'colPos = 1') WHERE uid IN(SELECT uid FROM gridLayoutColumns03);
SELECT uid, pid, title, description, config FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%'
Copied!
-- Update the columns number of all content elements, which are part of a three columns grid layout
CREATE TEMPORARY TABLE gridLayoutColumns03 SELECT uid FROM `tx_gridelements_backend_layout` WHERE config LIKE '%colCount = 3%'AND config LIKE '%rowCount = 1%';
CREATE TEMPORARY TABLE gridElementColumns03 SELECT uid FROM `tt_content` WHERE `CType` LIKE 'gridelements_pi1'AND tx_gridelements_backend_layout IN(SELECT uid FROM gridLayoutColumns03);
CREATE TEMPORARY TABLE contentForColumns03 SELECT uid FROM tt_content WHERE uid IN(SELECT uid FROM gridElementColumns03);
UPDATE tt_content SET tx_gridelements_columns = 999 WHERE tx_gridelements_columns = 0AND tx_gridelements_container IN(SELECT uid FROM contentForColumns03);
UPDATE tt_content SET tx_gridelements_columns = 0 WHERE tx_gridelements_columns = 1AND tx_gridelements_container IN(SELECT uid FROM contentForColumns03);
UPDATE tt_content SET tx_gridelements_columns = 1 WHERE tx_gridelements_columns = 999AND tx_gridelements_container IN(SELECT uid FROM contentForColumns03);
SELECT uid, pid, header, tx_gridelements_backend_layout, tx_gridelements_container, tx_gridelements_columns FROM tt_content WHERE tx_gridelements_container IN(SELECT uid FROM contentForColumns03);
Copied!
Template
You can run Start without executing the SQL statements from above.
But you have to include the static template from below, to run a proper Start extension
with the former behaviour:
Start [92.1.1] +Workaround ChangeLog #i0215
ChangeLog #i0214 (EXT:gridelements)
Grid Elements will display the header.
If you like to set all headers to hidden, please use the SQL statements from below.
SQL Statements
-- Get all gridelements, which will display its header
SELECT uid, pid, header, header_layout FROM `tt_content` WHERE `CType` LIKE 'gridelements_pi1'AND header_layout <> 100;
Copied!
-- Set the header of all gridelements to hidden
UPDATE `tt_content` SET header_layout = 100 WHERE `CType` LIKE 'gridelements_pi1';
-- Get all gridelements, which will display its header
SELECT uid, pid, header, header_layout FROM `tt_content` WHERE `CType` LIKE 'gridelements_pi1'AND header_layout <> 100;
Accordions and tabs can now represent any content element. And they can be nested with themselves.
Until now, only the text element for accordions and tabs was possible.
Grid elements have ID labels instead of uids, are ready to use and no longer require
configuration records in the database.
BUT YOU SHOULD UPGRADE RECORS IN YOUR DATABASE: See section
If the CSS class property contains a value, the grid element gets a div wrap with
this value as the CSS class.
Examples:
value is empty: <div class="row">{gridelement}</div>
value is "container": <div class="container"><div class="row">{gridelement}</div></div>
Margin columns are visible on mobile devices
Backend layout: margin columns are displayed in small view too. CSS class "show-for-medium-up" is moved to "small-12".
If you don't like it, please configure
page.63148.start__[layout].settings { ... }
Copied!
TypoScript
If you are using own fluid templates, please note #i0224 in the ChangeLog
4.6
Respect the both You MUST / You SHOULD below!
Bugfix columns confusion
There was a columns confusion with the three columns gridelement. The bug is solved, but
![Content element with the tab [Style]](panel.jpg)
![Content element with the type [Start: menus]](01_start_menu_types.jpg)
![Content element with the tab [Style]](tt_content_style.png)
Social Media
Module Start TYPO3 Social Media