Renamed ids and classes (TYP-805)

From release 20261007 every id and class name that the editor's stylesheet styles starts with typograph-, so the editor's styles cannot reach your page's elements and your page's styles cannot reach the editor's. This page lists every name that changed — 210 in all — so CSS or scripts that used an old name can be moved to the new one.

The rule is simple: put typograph- in front of the old name. .menubar is now .typograph-menubar, #menulayer is now #typograph-menulayer. The tables below are that rule written out, plus the handful of names that do not follow it.

What did not change

#typograph, the canvas's container, keeps its name.
The menu ids — menutitle-file, menutitle-file_Save, … — keep theirs. They are the Menu API's public ids.
The gEditorUI keys — toolbar.select, contentbar.images, parameterbar.position_size, … — are names in the UI customisation API, not CSS names. They did not change.
Ids the editor and canvas create for their own lookups, which the stylesheet does not style — for example #parmetersbarcontent, #colorswatch_shadow, #zoomin, #undo — are not prefixed yet. Nothing of yours is styled by them, but a page element with the same id could still be the one getElementById finds. Avoid those ids on your page; prefixing them is a follow-up.

Not a plain prefix

Old	New
`.zoomcontrol`	`.typograph-zoom` — its buttons are `.typograph-zoom-button`
`#arrow_page_bar_resizer`	`#arrow_typograph-page_bar_resizer` — the arrow's id is built from its button's
`.meunitem` (a misspelt rule)	`.typograph-menuitem`

Removed

Old
`.contentbarcontent--images`, `.contentbarcontent--clips`	The content bar no longer has a wider variant for the Images and Clips tabs; it has one width.

Built by the canvas, styled by the editor

Old	New
`#page_bar_control`	`#typograph-page_bar_control`
`#page_bar_resizer`	`#typograph-page_bar_resizer`
`.fontlist`	`.typograph-fontlist`
`.inactive`	`.typograph-inactive`
`.item`	`.typograph-item`
`.pagebaraddpage`	`.typograph-pagebaraddpage`
`.pagebaraddplus`	`.typograph-pagebaraddplus`
`.primary`	`.typograph-primary`

.typograph-fontlist.typograph-item is one element: a font list row carries both classes. .typograph-inactive and .typograph-primary are on the undo widget's icon paths.

Editor ids

Old	New
`#body`	`#typograph-body`
`#brandcolors_plus`	`#typograph-brandcolors_plus`
`#colortype`	`#typograph-colortype`
`#contentbar`	`#typograph-contentbar`
`#contentbar-clips`	`#typograph-contentbar-clips`
`#contentbar-image`	`#typograph-contentbar-image`
`#contentbar-layers`	`#typograph-contentbar-layers`
`#contentbar-page`	`#typograph-contentbar-page`
`#contentbar-shape`	`#typograph-contentbar-shape`
`#contentbar-text`	`#typograph-contentbar-text`
`#contentbarcontent`	`#typograph-contentbarcontent`
`#dialoglayer`	`#typograph-dialoglayer`
`#dialoglayer_01`	`#typograph-dialoglayer_01`
`#htmllayer`	`#typograph-htmllayer`
`#menulayer`	`#typograph-menulayer`
`#parametersbar`	`#typograph-parametersbar`
`#parametersbar_resizer`	`#typograph-parametersbar_resizer`
`#parametersbarresizer`	`#typograph-parametersbarresizer`
`#popupsliderlayer`	`#typograph-popupsliderlayer`
`#swatches`	`#typograph-swatches`
`#templatepages`	`#typograph-templatepages`
`#toggle-contentbar`	`#typograph-toggle-contentbar`
`#toolbar`	`#typograph-toolbar`
`#tools`	`#typograph-tools`
`#undoredo`	`#typograph-undoredo`
`#wrapper`	`#typograph-wrapper`

Editor classes

Old	New
`.active`	`.typograph-active`
`.bleed-cell`	`.typograph-bleed-cell`
`.blue`	`.typograph-blue`
`.brandcolors`	`.typograph-brandcolors`
`.button`	`.typograph-button`
`.cancel`	`.typograph-cancel`
`.cancelbutton`	`.typograph-cancelbutton`
`.center`	`.typograph-center`
`.clip-loading`	`.typograph-clip-loading`
`.clip-skeleton`	`.typograph-clip-skeleton`
`.clipassetscontainer`	`.typograph-clipassetscontainer`
`.CMYK`	`.typograph-CMYK`
`.colorbar`	`.typograph-colorbar`
`.colormap`	`.typograph-colormap`
`.colorpicker`	`.typograph-colorpicker`
`.colorsample`	`.typograph-colorsample`
`.colorsbox`	`.typograph-colorsbox`
`.colorswatch`	`.typograph-colorswatch`
`.colorwheel`	`.typograph-colorwheel`
`.content`	`.typograph-content`
`.contentbar`	`.typograph-contentbar`
`.contentbarcontent`	`.typograph-contentbarcontent`
`.contentbarcontentcontainer`	`.typograph-contentbarcontentcontainer`
`.contentbarcontentheader`	`.typograph-contentbarcontentheader`
`.contentbarcontentheaderbutton`	`.typograph-contentbarcontentheaderbutton`
`.contentbaritem`	`.typograph-contentbaritem`
`.controlscontainer`	`.typograph-controlscontainer`
`.controlscontainer_new`	`.typograph-controlscontainer_new`
`.custom-file-upload`	`.typograph-custom-file-upload`
`.deletebutton`	`.typograph-deletebutton`
`.detail`	`.typograph-detail`
`.dialog`	`.typograph-dialog`
`.dialogcontainer`	`.typograph-dialogcontainer`
`.dialogcontent`	`.typograph-dialogcontent`
`.disabled`	`.typograph-disabled`
`.documentcolors`	`.typograph-documentcolors`
`.drawertab-icon`	`.typograph-drawertab-icon`
`.editbutton`	`.typograph-editbutton`
`.fontissues`	`.typograph-fontissues`
`.fontsourcelist`	`.typograph-fontsourcelist`
`.generalcolors`	`.typograph-generalcolors`
`.h_scrollbar`	`.typograph-h_scrollbar`
`.h_thumb`	`.typograph-h_thumb`
`.HSB`	`.typograph-HSB`
`.icon`	`.typograph-icon`
`.imagelibasset`	`.typograph-imagelibasset`
`.imagelibassetnohover`	`.typograph-imagelibassetnohover`
`.imagelibassetscontainer`	`.typograph-imagelibassetscontainer`
`.imagelibassetselector`	`.typograph-imagelibassetselector`
`.imagelibrayassettitle`	`.typograph-imagelibrayassettitle`
`.imagelibsearch`	`.typograph-imagelibsearch`
`.imagelibsearchbar`	`.typograph-imagelibsearchbar`
`.imagelibsearchbarinput`	`.typograph-imagelibsearchbarinput`
`.imagelibsearchdirectory`	`.typograph-imagelibsearchdirectory`
`.imagelibsearchicon`	`.typograph-imagelibsearchicon`
`.input_margin040`	`.typograph-input_margin040`
`.input_margin050`	`.typograph-input_margin050`
`.inputfield`	`.typograph-inputfield`
`.is-`	`.typograph-is-`
`.is-active`	`.typograph-is-active`
`.is-clamped`	`.typograph-is-clamped`
`.is-collapsed`	`.typograph-is-collapsed`
`.is-draft`	`.typograph-is-draft`
`.is-hover`	`.typograph-is-hover`
`.is-left`	`.typograph-is-left`
`.is-md`	`.typograph-is-md`
`.is-open`	`.typograph-is-open`
`.is-resolve`	`.typograph-is-resolve`
`.is-resolved`	`.typograph-is-resolved`
`.is-selected`	`.typograph-is-selected`
`.is-sm`	`.typograph-is-sm`
`.is-up`	`.typograph-is-up`
`.keyword-clear`	`.typograph-keyword-clear`
`.keyword-drag-handle`	`.typograph-keyword-drag-handle`
`.keyword-grid`	`.typograph-keyword-grid`
`.keyword-pill`	`.typograph-keyword-pill`
`.keyword-popup`	`.typograph-keyword-popup`
`.keyword-search-icon`	`.typograph-keyword-search-icon`
`.keyword-search-row`	`.typograph-keyword-search-row`
`.Lab`	`.typograph-Lab`
`.label`	`.typograph-label`
`.label_center`	`.typograph-label_center`
`.label_width10`	`.typograph-label_width10`
`.label_width20`	`.typograph-label_width20`
`.label_width25`	`.typograph-label_width25`
`.layer`	`.typograph-layer`
`.layoutbarcontainer`	`.typograph-layoutbarcontainer`
`.layoutbarcontent`	`.typograph-layoutbarcontent`
`.mappoint`	`.typograph-mappoint`
`.mark`	`.typograph-mark`
`.menu`	`.typograph-menu`
`.menubar`	`.typograph-menubar`
`.menuclose`	`.typograph-menuclose`
`.menucontent`	`.typograph-menucontent`
`.menuitem`	`.typograph-menuitem`
`.menuitem-separator`	`.typograph-menuitem-separator`
`.menutitle`	`.typograph-menutitle`
`.min`	`.typograph-min`
`.movable`	`.typograph-movable`
`.ok`	`.typograph-ok`
`.on`	`.typograph-on`
`.pagebar`	`.typograph-pagebar`
`.pagebarcontent`	`.typograph-pagebarcontent`
`.pagebardragg`	`.typograph-pagebardragg`
`.pagebarpagenumber`	`.typograph-pagebarpagenumber`
`.pagebarpreview`	`.typograph-pagebarpreview`
`.pagebarpreviewselector`	`.typograph-pagebarpreviewselector`
`.pagebarresizebar`	`.typograph-pagebarresizebar`
`.pagebarresizer`	`.typograph-pagebarresizer`
`.panel`	`.typograph-panel`
`.parametersbar`	`.typograph-parametersbar`
`.parametersbarcontent`	`.typograph-parametersbarcontent`
`.parametersbarresizer`	`.typograph-parametersbarresizer`
`.pb-group`	`.typograph-pb-group`
`.pb-group--col`	`.typograph-pb-group--col`
`.pb-group--row`	`.typograph-pb-group--row`
`.pb-table-cell`	`.typograph-pb-table-cell`
`.pb-table-h2`	`.typograph-pb-table-h2`
`.pb-table-inert`	`.typograph-pb-table-inert`
`.pb-table-row`	`.typograph-pb-table-row`
`.pb-table-select`	`.typograph-pb-table-select`
`.pb-table-select-label`	`.typograph-pb-table-select-label`
`.podsettings-chip`	`.typograph-podsettings-chip`
`.podsettings-chip-empty`	`.typograph-podsettings-chip-empty`
`.podsettings-chip-none`	`.typograph-podsettings-chip-none`
`.podsettings-chooser`	`.typograph-podsettings-chooser`
`.podsettings-chooser-arrow`	`.typograph-podsettings-chooser-arrow`
`.podsettings-chooser-button`	`.typograph-podsettings-chooser-button`
`.podsettings-chooser-entry`	`.typograph-podsettings-chooser-entry`
`.podsettings-chooser-list`	`.typograph-podsettings-chooser-list`
`.podsettings-column`	`.typograph-podsettings-column`
`.podsettings-columns`	`.typograph-podsettings-columns`
`.podsettings-fontsample`	`.typograph-podsettings-fontsample`
`.podsettings-heading`	`.typograph-podsettings-heading`
`.podsettings-ignored`	`.typograph-podsettings-ignored`
`.podsettings-index`	`.typograph-podsettings-index`
`.podsettings-label`	`.typograph-podsettings-label`
`.podsettings-note`	`.typograph-podsettings-note`
`.podsettings-row`	`.typograph-podsettings-row`
`.podsettings-uuid`	`.typograph-podsettings-uuid`
`.quote`	`.typograph-quote`
`.rangearrows`	`.typograph-rangearrows`
`.RGB`	`.typograph-RGB`
`.shape`	`.typograph-shape`
`.sketch-icon`	`.typograph-sketch-icon`
`.sketch-iconn`	`.typograph-sketch-iconn`
`.small`	`.typograph-small`
`.smartfieldimage`	`.typograph-smartfieldimage`
`.smartfieldtext`	`.typograph-smartfieldtext`
`.specialkeys-cell`	`.typograph-specialkeys-cell`
`.specialkeys-grid`	`.typograph-specialkeys-grid`
`.specialkeys-handle`	`.typograph-specialkeys-handle`
`.specialkeys-popup`	`.typograph-specialkeys-popup`
`.spinner`	`.typograph-spinner`
`.startscreen`	`.typograph-startscreen`
`.svg-icon`	`.typograph-svg-icon`
`.swatch`	`.typograph-swatch`
`.swatches`	`.typograph-swatches`
`.swatchescontainer`	`.typograph-swatchescontainer`
`.swatchsolo`	`.typograph-swatchsolo`
`.tab`	`.typograph-tab`
`.tabcontainer`	`.typograph-tabcontainer`
`.testdiv-well`	`.typograph-testdiv-well`
`.textgroup`	`.typograph-textgroup`
`.textstylesample`	`.typograph-textstylesample`
`.tiny`	`.typograph-tiny`
`.titlebar`	`.typograph-titlebar`
`.toolbar`	`.typograph-toolbar`
`.toolbar-group`	`.typograph-toolbar-group`
`.toolbarflyout`	`.typograph-toolbarflyout`
`.toolbaritem`	`.typograph-toolbaritem`
`.toolbarseparator`	`.typograph-toolbarseparator`
`.v_scrollbar`	`.typograph-v_scrollbar`
`.v_thumb`	`.typograph-v_thumb`
`.well`	`.typograph-well`
`.white`	`.typograph-white`

If your page builds the editor's markup itself

A page that still authors the old chrome markup keeps working: the editor renames the ids it finds there and adds the new class names next to the old ones, so your own CSS on that markup keeps matching. Move to the new names anyway — the old ones are kept only for that markup.