Typo3: Backend Layout CSS

0
votes

I'm working on a Typo3 Project, with what i have sucessfully created backend layouts, which will use the given Fluid HTML template with the same name.

Here is one of my layouts:

#
# BACKENDLAYOUT: CONTACT
#
mod {
    web_layout {
        BackendLayouts {
            contact {
                title = Contact Layout
                config {
                    backend_layout {
                        colCount = 2
                        rowCount = 1
                        rows {
                            1 {
                                columns {
                                    1 {
                                        name = First Col
                                        colPos = 0
                                    }
                                    2 {
                                        name = Second Col
                                        colPos = 1
                                    }
                                }
                            }
                        }
                    }
                }
                icon = EXT:extensionname/Resources/Public/Images/BackendLayouts/contact.png
            }
        }
    }
}

So now my questions is, how can I also link my page css (I have a main css lined to all pages right now) with the backend layout. For example the selecting the contact backen layout will add the contact.css file to the fluid template.

One way that I know I could do it, would be creating a Typo3 Template in the backend for each page, but I guess that wouldn't be the best way to achieve it. All of my fluid templates and typoscript are inside an extension created with the great tool sitepackagebuilder.

Thanks in advance.

1
csscontent-management-systemtypo3
Is it really necessary to use different stylesheets? Best would be to use one file for all subpages, so the user has to load only one file on the first page and let the browser cache this stylesheet for the rest of the website. Best with minified CSS and gzipped. – sebkln
So right now, I have a main.css for all pages, and for each page an extra page.css only including classes just for this page. So you propose it's actually smarter to import all the css files into one main css? It wouldn't be a problem for me to change it since I'm using Sass anyways.. – josias
Yes. While the stylesheet would contain some declarations that aren't necessary on every page, it would still improve page rendering as the browser only needs one HTTP request for the CSS. It may be a different case if you'd need a significant large addition to the stylesheet for only one subpage. – sebkln

1 Answers

1
votes

You can manage with typoscript condition, User below condition this will work for you.

[globalVar = TSFE:page|backend_layout = 1]
    page.includeCSS.css = your/file/path.css
[global]
[globalVar = TSFE:page|backend_layout = 2]
    page.includeCSS.css = your/file/path.css
[global]

instead of this, you can create a new layout for the subpage as per better development standards as @sebkln. said.

Thank you! Regards.