Add id and class to nodes

I’d like to add an ID or at least a class to a node so I can refer to it from a CSS. So for example the Three Column Content would be generated as


Is there a way I can specify the ID or add a custom class to a node using the Neos content editor GUI?
I know I could extend each node type with an ID and classes attributes but I’m wondering if it’s already supported out of the box first. I read through all topics in this forum and tried to google it but keywords ID and class doesn’t help the search…

No, we don’t provide a property for that in the UI and I find that not an usual use case. You need to extend NodeTypes to allow for that. If you want to be able to have it for all content elements you can just add the properties to TYPO3.Neos:Content which is inherited by all content elements.

Or maybe you would like to have an optional possibility: So, you could use a Mixin.
I did it with:

# /Configuration/NodeTypes.MixinSmarterSelector.yaml

##
# MixinSmarterSelector
##
'Vendor.Site:MixinSmarterSelector':
  abstract: TRUE
  superTypes:
    'TYPO3.Neos:Content': TRUE
  ui:
    inspector:
      groups:
        yourGroup:
          label: yourGroup
          position: 4
  properties:
    id:
      type: string
      ui:
        label: 'Element-ID'
        reloadIfChanged: TRUE
        help:
          message: "Unique ID"
        inspector:
          editorOptions:
            placeholder: 'Unique ID'
          groups:
            yourGroup:
              label: 'yourGroup'
          group: 'yourGroup'
          position: 101
    class:
      type: string
      ui:
        label: "Element's Class"
        reloadIfChanged: TRUE
        help:
          message: "insert Class"
        inspector:
          editorOptions:
            placeholder: 'Classes divided with space'
          group: 'yourGroup'
          position: 102
#/Resources/Private/TypoScript/NodeTypes/MixinSmarterContentSelector.ts2

###
# MixinSmarterContentSelector: # get an «id» and «class» formfield in inspector
###
prototype(Vendor.Site:MixinSmarterContentSelector) < prototype(TYPO3.Neos:Content){
	attributes{
		id = ${q(node).property('id')}
		id.@if.condition = ${q(node).property('id') != '' && q(node).property('id') != null ? true : false}
		class = TYPO3.TypoScript:Array {
			addClass = ${(q(node).property('class'))}
			addClass.@if.condition = ${q(node).property('class') != '' && q(node).property('class') != null ? true : false}
		}
	}
}

Therewith, you have the choice to add «id/class» to different chosen nodeTypes.

#/Resources/Private/TypoScript/NodeTypes/XY.ts2

##
# Your new NodeType XY
##
'Vendor.Site:XY':
  superTypes:
    'TYPO3.Neos:Content': TRUE
     'Vendor.Site:MixinSmarterSelector': TRUE
   ...
1 Like