CSS-Files

[grosswerner]

Support

Description

Typo3 Version 12
I somehow have a problem understanding css files in bootstrap, I adjusted the css files in typo3conf/ext/bootstrap_package/Resources/Public/Css/ (bootstrap5-rte.css; bootstrap5-theme.css) then "minimized" , then I deleted the cache, logged out and deleted typo3temp to be on the safe side.

I then log in to BE, go into editor mode and check and call up the page via display and then

<link rel="stylesheet" href="/typo3temp/assets/bootstrappackage/css/theme-5f121ab593cca299d3bfe3df955480253645565374ba7ee565eb0cd0f432d0a6.css?1719757561" media="all">
<link rel="stylesheet" href="/typo3temp/assets/bootstrappackage/css/fastmenu-d31875cf53f51ca67144fcdf46b1b29ff8f8df3ed33b718a2cafffb47837c201.css?1719757562" media="all">
<link rel="stylesheet" href="/typo3temp/assets/bootstrappackage/css/theme-b197695660d9ebe0de87eb983523b50f8b8a06ce66fb27b584b5d8796866d34c.css?1719757562" media="all">
<link rel="stylesheet" href="/typo3temp/assets/bootstrappackage/css/develop-e60bd2f57f3db4cbc281d202c0cb6ac13da18908f6a5c26cc5151ba80908f1aa.css?1719757563" media="all">

lots of css files have been created in the typo3temp directory, but my adjustments are not included in them, where does the content for the css files in typo3temp come from.

[olivermeckel]

hi grosswerner,

you should never change files in the extension directory, as these will be overwritten with the next update of the extension.
In addition, bootstrap_package uses a css processor (scssphp), i.e. the css files are automatically generated by PHP. You can find the source files under ext:bootstrap_package/Resources/Public/Scss/* (and ext:bootstrap_package/Resources/Public/Contrib/*
So your changes will be overwriten. Unless you have disabled the css-processor

Check the TypoScript Configuration (ext:bootstrap_package/Configuration/TypoScript/setup.typoscript – and when you use bootstrap 5 ext:bootstrap_package/Configuration/TypoScript/Bootstrap5/setup.typoscript) which Scss-files are used for building the css

If you want to change CSS, you can use the constant editor in the TYPO3 backend and change the styling.
Or you can overwrite parts of the CSS or the complete CSS, e.g. with your own extension

[grosswerner]

so i still don't understand that in the generated (typo3temp) css file it says e.g. the following

.text-quaternary {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-quaternary-rgb), var(--bs-text-opacity)) !important;
}

but I can't find a sccs-file where something like this is included, I searched with the following command

find . -type f -name '*' -exec grep -l 'text-quaternary' '{}' ';'

./typo3conf/ext/bootstrap_package/Configuration/RTE/Default.yaml_org
./typo3conf/ext/bootstrap_package/Configuration/RTE/Default.yaml_modified
./typo3conf/ext/bootstrap_package/Configuration/RTE/Default.yaml
./typo3conf/ext/bootstrap_package/Resources/Public/Css/bootstrap5-theme.min.css
./typo3conf/ext/bootstrap_package/Resources/Public/Css/bootstrap5-rte.css
./typo3conf/ext/bootstrap_package/Resources/Public/Css/bootstrap5-rte.min.css
./typo3conf/ext/bootstrap_package/Resources/Public/Css/bootstrap5-theme.css
./typo3temp/var/cache/code/core/tca_base_d83a6aa406d7039a1950e359539e2af37034db2f.php
./typo3temp/assets/bootstrappackage/css/theme-6445911a902e98a4e011a094fe5666ded8786e3707b6a911d3d8dc5398ab9931.css
./typo3temp/assets/bootstrappackage/css/theme-6445911a902e98a4e011a094fe5666ded8786e3707b6a911d3d8dc5398ab9931.css.meta

so this is all a mystery to me

[olivermeckel]

Special case ;-)

quaternary is a theme color. You can find it in the _variables.scss.
.text-quaternary is "autogenerated" by sass. It's all about maps and loops.
Have a look at the utilities dokumentation from bootstrap: https://getbootstrap.com/docs/5.3/utilities/colors/

So for bootstrap5
EXT:bootstrap_package/Resources/Public/Contrib/bootstrap5/scss/_utilities.scss
on line 576
is where the magic happens.

Sass is generating color helpers for the class .text-* for all your mapped colors in your theme.
.text-primary {}
.text-secondary {}
and so on

[grosswerner]

so the task is unsolvable for me, actually I only wanted to insert/modify the following "classen"

insert new
.text-spaced {letter-spacing: 0.3em;}
modify
.text-capitalize {font-variant: small-caps;}

I have inserted the following in typo3conf/ext/bootstrap_package/Configuration/RTE/Default.yaml (actually I shouldn't do it this way, but I can't find any other solution here either)

- { name: "Spaced text", element: "span", attributes: { 'class': 'text-spaced' } }

in my FE output it worked for the time being. Unfortunately, I have no customization in the BE editor,

I would also spend money on this if someone could explain to me how I can solve this. I would appreciate it if someone could contact me who can help me. there are an infinite number of scss files in an equally infinite number of folders, I don't even know where to start.

PS: I would also prefer a communication in German

[olivermeckel]

Good, you know it's not the right way.
So you can assign an additional CSS file with your changes in the RTE configuration, then they will also be displayed correctly in the editor.
Reference an edditional css file in:
typo3conf/ext/bootstrap_package/Configuration/RTE/Default.yaml

editor: config: contentsCss: - "EXT:bootstrap_package/Resources/Public/Css/bootstrap5-rte.min.css" - "EXT:your_extension/Resources/Public/Css/another_stylesheet.css"

So, at any time it's better to place your changes outside "bootstrap_package"-Extension.
Create your own extension to extend (https://www.sitepackagebuilder.com/)
Use internal Template Configuration via constants and setup

[grosswerner]

entschuldigung, ich kann leider nur sehr rudimentär englisch, danke für die Versuche mir das beizubringen, aber ich bin auch mittels übersetzer kein stück weitergekommen, gibt es irgendwo eine deutsche Anleitung, weil mit den Googleübersetzer geht das technisch die Anleitung zu übersetzen, aber es ist nicht praktikabel
Danke

[olivermeckel]

Hallo grosswerner,
ich nutze immer DeepL. Das funktioniert eigentlich ganz gut…

Ich hänge Dir ein SitePackage als Beispiel an. Hier habe ich bereits eine eigen Konfiguration für RTE eingebunden.
Deine CSS-Anpassungen kannst Du in die additional.css schreiben. Dieses wird dann sowohl für das Frontend als auch das Backend verwendet.

Es ist ein absolut reduziertes Package. Für evtl. Fehler (da Quick and Dirty zusammengestellt) übernehme ich keine Verantwortung ;-).

Über dieses Package kannst du alle Funktionen/Konfigurationen/Templates/Sprachen usw. von bootstrap_package anpassen, reduzieren sowie erweitern.

Hoffentlich hilft dir das weiter.

Lade diese Extension zusätzlich zum bootstrap_package.
Binde die TypoScript-Dateien nach dem Bootstrap Package ein:
co_customizer.zip