Transforming UB’s digital communications.
NextGen rebuilt UBCMS templates from the ground up. CSS selectors you've used in the past may no longer work as expected. Use the "Fix Outdated Code" tab in your detailed site report to identify affected pages, then use this log as a starting point for updates.
This is not a complete fix list — specificity, selector order, and structural differences in NextGen templates all play a role.
For guidance on finding your outdated code and working through updates, see Custom Code & NextGen.
These selectors have direct name replacements in NextGen.
| Old Selector | New Selector |
|---|---|
#center | .ub-par |
#left | .ub-left |
#right | .ub-right |
#banner | .ub-banner |
.core-header | .next-gen-header |
| Old | New |
|---|---|
#center .captiontext a | .ub-par .captiontext a |
.core-header .main .right .tasknav .cmp-container .buttoncomponent a | .next-gen-header .main .right .tasknav .cmp-container .buttoncomponent a |
Even though these are 1 to 1 replacements, it's not as simple as "find and replace". Several changed from IDs to classes — a reduction in specificity that may require a more specific selector string to achieve the same result. For example:
| Old | New |
|---|---|
#center .staff_name_bolded | .ub-par .staffdirectory .staff_name_bolded |
#center td | .ub-par .table table tr td |
These selectors have been removed from NextGen with no equivalent. Code targeting them will need to be removed or reworked using a different approach.
| Selector |
|---|
#columns |
#center-nocols |
.parsys |
Some selectors changed in ways that aren't fully documented. If your code targets something not listed here, you'll need to inspect the component markup in QA2 to find the correct replacement — the element you were targeting may still exist, just under a different structure.
The collapsible/accordion component is one documented example of this pattern:
| Old Selector | New Selector |
|---|---|
.collapsible-container | collapsible.accordion.panelcontainer |
.collapsible-container .collapsible .collapsible-title button | .accordion .collapsible-title button |
.collapsible-container .collapsible .collapsible-title.medium button | .collapsible.accordion.panelcontainer .title-medium button |
.collapsible-container.expanded .collapsible .collapsible-title::before | .accordion .cmp-accordion__button--expanded:before |
In some cases, simply using .accordion as a replacement is enough. Test in QA2 to confirm.
Column Control has been replaced by Column Starter – a significant structural change that affects both how the component works for editors and how it's targeted in custom code. If your site targets columns with custom CSS, this affects you.
Column Control (old) └── .cq-colctrl-3-3-3 ├── .cq-colctrl-3-3-3-c0 ├── .cq-colctrl-3-3-3-c1 └── .cq-colctrl-3-3-3-c2
Column Starter (new)
└── .columns-wrapper
├── .ub-column
├── .ub-column
└── .ub-column
All columns share the same .ub-column class, so targeting a specific one requires either position or an ID.
/* Target the 1st column */ .columns-wrapper .ub-column:nth(0)
/* Target the 2nd column */ .columns-wrapper .ub-column:nth(1)
If your page has multiple Column Starters, position-based selectors will target that column position across every Column Starter on the page. To target a specific one, add an ID to the column or its container:
└── .columns-wrapper
├── .ub-column
├── #mainevents.ub-column
└── .ub-column
/* Target that specific column */ #mainevents.ub-column /* Or target a child column within a specific container */ .columns-wrapper #mainevents.ub-column .ub-column:nth(1)
Column Starter also works differently for editors in the WYSIWYG environment. See the Column Starter component documentation for details on how to use it.
This log covers known selector changes. It does not account for every rendering difference between static templates and NextGen — selector order and specificity shifts may affect code that references selectors not listed here. See Custom Code & NextGen for guidance on identifying and checking those areas.