User CSS
The user.css lets you give the WebKatalog a personalized design.
Setup
The user CSS is edited and saved in the 3D office data portal under Profil → User CSS. A color picker inserts hex codes. Changes to CSS variables only show up after the WebKatalog is reloaded.
Usage
The WebKatalog loads the user.css automatically for the user's token – no URL parameter is needed:
html
<link id="usercssserver" rel="stylesheet" href="{BASE}/api/ofml.dll/ofml/user.css?token={TOKEN}">Stable selectors
These selectors are not renamed in updates (checked automatically). Other classes may change.
| Area | Selectors |
|---|---|
| 3D view | #WebGLCanvas, #articleThreeView, .controls |
| Catalog | #catalogContainer, #catalogOpener, .catalogItem, .catalogItemName |
| Breadcrumbs | #breadcrumbs, .breadcrumb, .breadcrumb-item |
| Menu / header | #menu, #currentManufacturer |
| Information panel | #informationOpener, #informationView, .information, .informationView, .informationButtons, .tabbutton |
| Properties | #propertyview, .properties, .property, .propclass, .propclass_header, .propertySelect, .propertySelectSelected, .previewimage, .groups-container |
| Price / text | #pricetextview, .text-section |
| Downloads | .download-accordion, .format-btn, .resolution-item, .action-card-btn |
| States / other | .selected, .expanded, .show, .toggle, .full-width, .section-header, .material-icons |
Inspecting other CSS classes
Tip
Open the WebKatalog in your browser, press F12 and use the element picker to identify the CSS classes you need.