How to Include a Custom CSS File in Typo3

How to include a custom CSS file in TYPO3

You have to give each css file you want to include a unique key (e.g. myCssFile1). Also use a colon after the EXT:. So the correct way of including a CSS file with TypoScript would be

page.includeCSS.myCssFile1 = EXT:my_ext/Path/to/css_file.css

How to add CSS to a TYPO9.5 Extension?

Since TYPO3 8.7 you can add HTML to the header or footer from your Fluid template using the HeaderAssets and FooterAssets sections. For example:

<f:section name="HeaderAssets">
    <link rel="stylesheet" href="{f:uri.resource(path: 'Css/styles.css')}"/>
</f:section>

The advantage of this over page.includeCSS is that it is only included whenever that template is rendered, instead of on all pages.

Including CSS File in TYPO3 Backend?

Ok, I could finally solve the problem.

When adding the code right after instancing the "doc" object, everything works fine.

$this->doc = t3lib_div::makeInstance('mediumDoc');
$this->doc->getPageRenderer()->addCssFile(t3lib_extMgm::extRelPath('myExt') . 'res/css/my_stylesheet.css');

TYPO3: How to add a css and JS on the backend

In TYPO3 v9 you will have to do the following and on every mode

CSS

$GLOBALS['TBE_STYLES']['skins']['your_extension_key'] = array();
$GLOBALS['TBE_STYLES']['skins']['your_extension_key']['name'] = 'My Awesome Name';
$GLOBALS['TBE_STYLES']['skins']['your_extension_key']['stylesheetDirectories'] = array(
    'visual' => 'EXT:yourextension/Resources/Public/Css/Backend',
    'theme' => 'EXT:yourextension/Resources/Public/Css/Monokai'
);

The path here (CSS) is a directory, so it will read all the files in the pointed directory.

JS

$renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/Backend.js', 'text/javascript', false, false, '', true,  '|', false, '');
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/another.js', 'text/javascript', false, false,  '', false, '|', false, '');

Parameters:

addJsFile(
       $file, 
       $type = 'text/javascript'
       $compress = true,
       $forceOnTop = false,
       $allWrap = '',
       $excludeFromConcatenation = false,
       $splitChar = '|',
       $async = false,
       $integrity = ''
);

In large files, it might have some problems with the loading, but if anyone could confirm that, i would really appreciate it.

Additional information:

If you want to use TYPO3's jQuery (strongly recommended it in order to avoid conflicts) you should use the following as well:

require(["jquery"], function($) {
   //your awesome function
});

You could use a condition as well to make sure that it is loaded on the backend:

if (TYPO3_MODE === 'BE') {
   $renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
   ...
}

typo3 add custom css to bootstrap package

the »EXT:«-string in your path is a shortcut to the extension-directory (»./typo3conf/ext/«). So in your example you would have an extension called »path_to_my_css«.

But i guess you probably uploaded a stylesheet into your filelist. If so, then click on the file to the see full path (like »http://example.com/fileadmin/templates/assets/css/bootstrap.css)«

Then set the correct path like this

page.includeCSS.myCustomStylesheet = fileadmin/templates/assets/css/bootstrap.css

You will now see a link to your file with an appended hash in the HTML sourcecode

<link rel="stylesheet" type="text/css" href="/fileadmin/templates/assets/css/bootstrap.css?1350898986" media="all">

Adding own CSS to TYPO3 backend [v9]

As the key value (stylesheetDirectories) indicates, this should point to a directory. It will add all .css files in that directory.

Also, don't set $GLOBALS['TBE_STYLES']['skins'][$_EXTKEY]['stylesheetDirectories'] as a new array, but use $GLOBALS['TBE_STYLES']['skins'][$_EXTKEY]['stylesheetDirectories'][] = 'EXT:my_extension/styles/';. That way other extensions can also add stylesheets without it being overwritten by your extension.

How to define loading order of external CSS with extension and site package

Don't include the extensions typoscript via the backend but via the sitepackage by

<INCLUDE_TYPOSCRIPT

For every typoscript setup and constants file needed. So in the backend include only the typoscript for your sitepackage.

Then you can choose the order however you want.

I put the constants and typoscipt of each extension in an own subfolder of a folder Extensions.
For example xxxx_sitepackage/Configuration/TypoScript/Extensions/News. 2 files: _Constants.typoscriptc (with the include_typoscript to the original constants file of news) and Setup.typoscript:

 <INCLUDE_TYPOSCRIPT: source="FILE:EXT:news/Configuration/TypoScript/setup.txt">

plugin.tx_news {
    settings {
       cssFile >
       #etc.

Then:

 <INCLUDE_TYPOSCRIPT: source="DIR:EXT:xxxx_sitepackage/Configuration/TypoScript/Extensions" extensions="typoscript">

Also almost every extension has a typoscript setting which includes the JS and CSS. You could also disable them and load them / bundle them with Gulp, Laravel Mix, whatever. So you get only 1 CSS and 1 JS file. Or you let TYPO3 do that.

---

Related Topics