TYPO3 custom styles in RTE? - typo3

I am using TYPO3 7.6.4.
In my TSConfig I am using this to add custom styles:
RTE.classes{
highlight{
name = highlight
value = color:#636466; font-size:15px;
}
brown{
name = braun
value = color:#9A3811;
}
}
RTE.default{
ignoreMainStyleOverride = 1
useCSS = 1
showTagFreeClasses = 1
contentCSS = fileadmin/templates/css/rte.css
buttons {
blockstyle.tags.div.allowedClasses := addToList(highlight, brown)
blockstyle.tags.p.allowedClasses := addToList(highlight, brown)
textstyle.tags.span.allowedClasses := addToList(highlight, brown)
}
proc.allowedClasses := addToList(highlight, brown)
}
1) Instead of specifying div, p, span, is there a way to add available classes to all tags?
2) Do I need to have the RTE.classes part if I have made an external RTE style sheet?

ad 1.)
blockstyle.tags.all.allowedClasses should work if I read https://docs.typo3.org/typo3cms/extensions/rtehtmlarea/Configuration/PageTsconfig/interfaceConfiguration/Index.html correctly.
ad 2.)
yes, otherwise RTE will not show you the drop down for selection of the classes

Related

TYPO3 rename Appearance -> Layouts of gridelements Extension

I'm trying to rename the layout labels of the Appearance tab in a gridelements module.
I can easily change labels of standard content elements via:
TCEFORM.tt_content {
layout.types {
textpic {
altLabels {
0 = Standard
1 = Bild rechts
2 = Bild links (klein)
3 = Farbig
}
removeItems = 4, 5, 100
}
image {
altLabels {
0 = Standard
1 = kleines Bild
}
removeItems = 2, 3, 4, 5, 100
}
}}
However I'm not able to figure this out. From the documentation I got: https://docs.typo3.org/typo3cms/TSconfigReference/PageTsconfig/TceForm.html
I found something, in german, that seems to work for another extension (news) https://jweiland.net/typo3/codebeispiele/tsconfig/labels-in-flexforms-anpassen.html
There're no different labels for those layouts depending on the content of table tt_content column tx_gridelements_backend_layout, like in my example above for table tt_content and column CType.
I'd appreciate help, thanks a lot!
You can achieve this the following way:
TCEFORM.tt_content {
layout.types {
gridelements_pi1 {
altLabels.1 = Change item # change item
addItems.400 = New Item # add item
removeItems = 3 # remove item
}
}
}

Typo3 Fluid Templates How to add multiple templates

I have a finished static HTML Template. I need to map it to typo3 so the content is dynamic. I followed following tutorial: https://docs.typo3.org/typo3cms/SitePackageTutorial/FluidTemplates/Index.html
This works perfectly, but now I wonder how I can change the template per site? I made template for each site i.e Gallerie.html, Contact.html and they are linked to the same Layout as Header and Footer is always the same.
How do I now tell the page About us to use the Gallerie.html?
My setup.typoscript:
page = PAGE
page {
typeNum = 0
// Part 1: Fluid template section
10 = FLUIDTEMPLATE
10 {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.data = pagelayout
pagets__default = TEXT
pagets__default.value = Default
default = TEXT
default.value = Default
}
templateRootPaths {
0 = EXT:eventmanagement/Resources/Private/Templates/Page/
1 = {$page.fluidtemplate.templateRootPath}
}
partialRootPaths {
0 = EXT:eventmanagement/Resources/Private/Partials/Page/
1 = {$page.fluidtemplate.partialRootPath}
}
layoutRootPaths {
0 = EXT:eventmanagement/Resources/Private/Layouts/Page/
1 = {$page.fluidtemplate.layoutRootPath}
}
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
10 {
levels = 1
includeSpacer = 1
as = mainnavigation
}
}
}
At the Moment it loads the Default.html Template from eventmanagement/Resources/Private/Templates/Page/ on every page. I created now a second Template called Gallerie.html in eventmanagement/Resources/Private/Templates/Page/ how do I add this now to the page Gallerie in the Backend?
I don't know if it's very useful to have for (nearly) every page another template but in general that's possible. Just consider that in the root-line always that template is used that is defined on the current level or - if not existing - that, that is found first while going up the root-line.
For every additional template you've to add a section inside this snippet from above:
templateName.stdWrap.cObject {
key.data = pagelayout
pagets__default = TEXT
pagets__default.value = Default
default = TEXT
default.value = Default
}
So including the option about us the snippet could look like this:
templateName.stdWrap.cObject {
key.data = pagelayout
pagets__default = TEXT
pagets__default.value = Default
default = TEXT
default.value = Default
pagets__aboutus = TEXT
pagets__aboutus.value = AboutUs
aboutus = TEXT
aboutus.value = AboutUs
}
Additional you still have to change the TCA probably to include the options in the drop-down-button.

TYPO3: Backend Layout Condition in TypoScript

I'd like to change the way elements are rendered depending on the page's backend layout.
Changing the fluid styled content template depending on the backend layout works as following:
[globalVar = TSFE:page|backend_layout = 1][globalVar = TSFE:page|backend_layout = 2]
lib.fluidContent.templateRootPaths.10 = EXT:ds_res/Resources/Private/Templates/ContentTemplates/
[global]
If it's 1 or 2, then use the other templates.
However, this only works if the BE layout is set directly at the page and not when it's inherited from its parent.
How to fix this?
Running TYPO3 7.6.15
In TYPO3 7.5 "Backend Layout"-Conditions has been simplified with "pagelayout" in Typoscript. Example:
page.10 = FLUIDTEMPLATE
page.10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
key.data = pagelayout
default = TEXT
default.value = EXT:sitepackage/Resources/Private/Templates/Home.html
3 = TEXT
3.value = EXT:sitepackage/Resources/Private/Templates/1-col.html
4 = TEXT
4.value = EXT:sitepackage/Resources/Private/Templates/2-col.html
}
}
Instead of:
field = backend_layout
field.data = levelfield:-2,backend_layout_next_level,slide
field.ifEmpty = default
Maybe this also works in your conditions like this:
[globalVar = TSFE:page|pagelayout = 1]
However, you should not change the used template file with [xy]-conditions and prefer using a CASE shown in the example above. Each number is the UID of a backend_layout by the way.
In TYPO3 9.5+ you can use typoscript conditions like:
[page["backend_layout"] == 'pagets__2']
page.bodyTagCObject.value.wrap = <body id="uid|" class="fullpage">
[end]
Edit:
As Bernd has mentioned use backend_layout only if you need the real defined field. If you need the computed value (e.g. for a sub page getting its layout from the backend_layout_next_level from a parent page) use pagelayout with a case like:
bodyTagCObject = TEXT
bodyTagCObject.value.field = uid
bodyTagCObject.value.wrap.cObject = CASE
bodyTagCObject.value.wrap.cObject{
key.data = pagelayout
default = TEXT
default.value = <body id="uid|" class="standard">
pagets__2 = TEXT
pagets__2.value = <body id="uid|" class="fullpage">
}
We use this solution
page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
templateName = TEXT
templateName.stdWrap {
cObject = TEXT
cObject {
data = levelfield:-2,backend_layout_next_level,slide
override.field = backend_layout
split {
token = pagets__
1.current = 1
1.wrap = |
}
}
ifEmpty = Index
}
layoutRootPaths {
10 = EXT:yourext/Resources/Private/Layouts
}
partialRootPaths {
10 = EXT:yourext/Resources/Private/Partials
}
templateRootPaths {
10 = EXT:yourext/Resources/Private/Templates
}
}
This approach is when u do not have the Backendlayouts in the DB (made through the backend) but include them from files. As there is no uid then you go by the templatename.
Example:
If you use this PageTS:
mod.web_layout.BackendLayouts {
Blankpage {
title = Blankpage
name = Blankpage
icon = EXT:yourext/Resources/Public/Icons/BackendLayouts/Blankpage.jpg
config {
backend_layout {
colCount = 1
rowCount = 2
rows {
1 {
columns {
1 {
name = Nameofthecolumn
colPos = 0
colspan = 1
}
}
}
2 {
columns {
1 {
name = Nameofthesecondcolumn
colPos = 1
colspan = 1
}
}
}
}
}
}
}
You will need a Template.html with the name Blankpage.html within your EXT-Templates.
So you can add more Templates and Backendlayouts without touching the TS again. Simply add PageTS and a html-template.
There is a feature available which avoids having that code duplicated
page.10 = FLUIDTEMPLATE
page.10 {
templateName = TEXT
templateName.stdWrap.cObject = CASE
templateName.stdWrap.cObject {
key.data = pagelayout
....
As you can not handle the inherited layouts in conditions you need to use typoscript. My solution is this:
page.10 = FLUIDTEMPLATE
page.10 {
templateRootPaths.1 = {$resDir}/Private/Templates
partialRootPaths.1 = {$resDir}/Private/Partials
layoutRootPaths.1 = {$resDir}/Private/Layouts
templateName = TEXT
templateName.cObject = CASE
templateName.cObject {
key.data = levelfield:-1, backend_layout_next_level, slide
key.override.field = backend_layout
#Default Template
default = TEXT
default.value = subpage
# homepage
pagets__homepage = TEXT
pagets__homepage.value = homepage
pagets__subpage = TEXT
pagets__subpage.value = subpage
}
variables {
:
pageLayout = TEXT
pageLayout.data = levelfield:-1, backend_layout_next_level, slide
pageLayout.override.field = backend_layout
// since TYPO3 7 this already is computed by the core and this gives the same:
pageLayout = TEXT
pageLayout.data = pagelayout
:
}
}
Avoid using file for better implementation with ..RootPaths.
As we use backendlayouts defined in files (which gets included in the pageTSconfig) the key names starting with pagets__, you also might use the numbers of backend_layout records.
I use the constant {$resDir} to define the root of resources which can be changed in an easy way. In a siteextension this could be:
resDir = EXT:site_project1/Resources
I also define a fluid variable with the currently active page layout for further differentiation in the templates.
If you want the ...RootPaths to be different for each layout you need to build cObject with a CASE obejct similar to my selection of the template name.
In general: all this could be handled in the fluid templates if you have the backend layout available in your variables: you only need to have one starting template, which calls a layout where all further calls to partials are individualized by the current layout like
<f:render partial="{pageLayout}/header" arguments="{_all}" />
TYPO3 11.x:
[tree.pagelayout == 2]
...
[global]
https://docs.typo3.org/c/typo3/cms-core/main/en-us/Changelog/11.0/Feature-88276-TypoScriptConditionForPageLayout.html

Manipulate / Change site title with tx_metaseo

I'm not able to change the title of the browser. That's how I render the title:
page.headerData.5 = TEXT
page.headerData.5.field = subtitle // title
page.headerData.5.wrap = <title>| | IrgendEinName</title>
... which works. In addition I use tx_metaseo, which also works. If I now want to manually change a site title in Properties->SEO and then under ...
title-TAG (absolute, without prefix/suffix)
... I can't change the title.
My solution now:
[globalVar = TSFE:id = 24]
page.headerData.5 = TEXT
page.headerData.5.field = tx_metaseo_pagetitle
page.headerData.5.wrap = <title>| | IrgendEinName</title>
[end]
[globalVar = TSFE:id != 24]
page.headerData.5 = TEXT
page.headerData.5.field = subtitle // title
page.headerData.5.wrap = <title>| | IrgendEinName</title>
[end]
Obviously for one site it's fine. But are there any other options? E.g. with .if.isNull. or .if.isFalse. where I say 'IF tx_metaseo_pagetitle IS EMPTY SELECT title ?
https://docs.typo3.org/typo3cms/TyposcriptReference/7.6/Functions/If/
if.notEmpty should work but I can't test it now. Quickly I found this solution:
[globalVar = TSFE:page|tx_metaseo_pagetitle=]
[else]
page.headerData.5 >
page.headerData.5 = TEXT
page.headerData.5 {
wrap = <title>|</title>
field = tx_metaseo_pagetitle
}
[global]

Typo3 RTE userElements

I'm trying to add a userElement to my RTE, but if I click on the icon for userelements (I hope it is the right icon, I never used that before) an empty window opens...
Is there something wrong on my Page TSConfig:
RTE.default.proc.allowTags := addToList(star)
RTE.default.proc.allowTagsOutside := addToList(star)
RTE.default.proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
RTE.default.showButtons = *
RTE.default.hideButtons ()
RTE.default.userElements.10 = Own Tags
// tag configuration
RTE.default.userElements.10.1 = Stars
RTE.default.userElements.10.1.description = The selected text will be wrapped with <star></star>
RTE.default.userElements.10.1.mode = wrap
RTE.default.userElements.10.1.content = <star>|</star>
And the Typoscript:
lib.parseFunc.allowTags := addToList(star)
lib.parseFunc_RTE.allowTags := addToList(star)
Solved the Problem with this Configuration in Page TSConfig:
Edit page > Resources tab
RTE.default {
disableEnterParagraphs = 1
userElements.10 = PDF Optionen
userElements.10 {
6 = Pagebreak
6.description = Manueller Seitenumbruch im PDF
6.mode = wrap
6.content = <div class="pagebreak">|</div>
}
}
RTE.default {
showButtons := addToList(user)
removeTags := removeFromList(user)
proc.HTMLparser_rte.allowTags < RTE.default.proc.allowTags
proc.HTMLparser_db.allowTags < RTE.default.proc.allowTags
proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
}