Custom page node styles not visible in backend

Hi,

I’m setting up a new site by tweaking the NeosDemoTypo3Org site package.

I created a new page node and css/js/html files for the new node only and made the necessary changes in NodeTypes.yaml and Root.ts2.
Works absolutely fine.

However, the changes to e.g. the main-header image don’t appear in the backend (I merely changed it’s dimensions from height=100% to 200px). The frontend looks exactly like it should.

here’s the Root.ts2 code:

otherPage < page
otherPage {
	head {
		stylesheets {
			site = TYPO3.TypoScript:Template {
				templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Otherpage.html'
				sectionName = 'stylesheets'
				node = ${node}
			}
		}
	}
	body {
		templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Otherpage.html'
		otherPage = ${true}

		javascripts.site = TYPO3.TypoScript:Template {
				templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Otherpage.html'
				sectionName = 'bodyScripts'
		}
	}
}

my custom otherpage.js and otherpage.css files are implemented in the respective sections of the Otherpage.html template, which is basically a carbon copy of Default.html.

So, any idea why the backend doesn’t load my custom styles?

Thanks!

Hi,

the backend currently doesn’t reload the header part
when switching between pages.
You should be able to test this by reloading the backend directly on this page with
the different styles. Then you should see the otherPage styles.

I had the same problem in a project and used javascript to detect layout changes
and then force a reload of the backend.

Maybe you could just use a different css class for the image in the other layout and use the same css file.

isn’t there a way to include stylesheets per typoscript, depending on which page layout you select?
if i remember correctly, typo3 did it with includecss.

strange …

i just tried putting in an inline style to the main-header image div and successfully reduced the height to 200 upon chosing the OtherPage page type.
Strangely, it worked even after I removed that style again.

cache shenanigans, I guess.

In TYPO3 the backend and the frontend were not in the same page.
In Neos those are combined.
I guess the issue with different layouts will be improved in future versions
as this is a not to uncommon use case and reloading the backend
is not so nice for editors.

As I said, I would set a different class for the header depending on the layout and use the same css file with a separate behavior for the header classes.

Regarding the inline style:
Depending on whether you are in Development or Production Context this could have been because of caching.

Issue exists in the bug tracker and is even duplicated… https://jira.neos.io/browse/NEOS-99 + https://jira.neos.io/browse/NEOS-830

ok, meanwhile I found a workaround:

  1. create a backend stylesheet. in my case otherpage_backend.css. stuff everything inside that stylesheet to fix the backend appearance.

  2. In the page template, include the stylesheet when not in live environment.

    <f:if condition="{node.context.workspace.name} != ‘live’">


    </f:if>
    Not optimal, but workable.
    Thanks for giving me the idea. :slight_smile: