Find the major POM Theme interfaces

POM Theme does not put every task in one dashboard. Shared configuration lives under Settings → POM Theme, while content, menus, widgets, forms, WooCommerce records, and page composition remain in the WordPress areas that own them.

Settings → POM Theme

The settings page is available to users who can edit posts, although individual sections can require a more privileged role. Administrative tools require administrator access.

Main section	What it contains
Design system	Theme preview, brand, social networks, color palette, custom fonts, buttons, icons, general styles, and component styles.
Site layout	Header, mobile navigation, subheader, breadcrumbs, footer, floating contact dock, and sidebars.
Templates	Archive, feed, and single HTML templates; 404 and password pages; search; blog; author pages; and eligible custom post-type views.
Content model	Post types, taxonomies, custom fields, saved database queries, faceted search, and permission rules.
E-Commerce	Storefront, product single, cart and checkout, My Account, shipping, promotions, and advanced WooCommerce presentation controls.
Integrations	Analytics, Maps, reCAPTCHA, Ads, Drive, social pixels, header meta tags, Instagram, and cookie-notice settings.
Forms	Forms-system activation, shared form styles, and default form behavior.
Advanced	Custom CSS, critical CSS, custom JavaScript, lazy loading, preconnect headers, and deprecated-feature compatibility.
Tools	Administrator-only export and import of the POM Framework settings files managed by the theme.
License	License connection, validation status, domain, plan, expiry, revalidation, and unlinking.

Optional settings use an enable control. Save after enabling one so its fields and dependent behavior can become available.

On variable-product pages, POM synchronizes its add-to-cart button with WooCommerce before footer Custom JS variation listeners run. A later listener error therefore cannot leave an otherwise available selection disabled. Custom scripts must still check that queried elements and attributes exist before reading or transforming them, because an error can stop their own gallery or presentation behavior.

Customize one generated component

The central idea is simple: every supported component can use either Theme CSS or a Customized version.

Before a component is customized

When a component has never been customized, POM:

1. Reads the current theme settings.
2. Generates the CSS for that component.
3. Places it at its normal position inside website.min.css.
4. Regenerates that CSS normally when a related setting changes.

The collapsed component displays Theme CSS in this state.

Save a custom version

Administrators can replace the generated CSS for selected components without moving those rules to the end of the stylesheet:

1. Go to Settings → POM Theme → Advanced → Custom CSS.
2. Under Component CSS, open the relevant editor. Base and body appears first because it owns the first generated CSS in the stylesheet, followed by Animations, Grid, Tables, and Helpers and utilities. Header follows the optional Page border position, then Side and mobile navigation, Offcanvas shortcode, optional Fullscreen navigation, optional Search, and Advanced search form controls appear in their generated order. Available components also include Header title and subheader, Footer, Quick view, Widgets, Portfolio, Blog and post content, Visibility and display utilities, Notifications, Links, Drop caps, Forms, Pagination, Info boxes, Content boxes, Icon boxes, Image boxes, Icons and media indicators, Images and animated media, Typography, and Buttons. Conditional editors appear when their feature is active: Page border, Fullscreen navigation, Search, Side buttons, Contact dock, More content, Product meta, and Reading progress bar. Theme extension styles appears last when an active theme or plugin integration appends compatible CSS to the generated bundle.
3. Wait for the side-by-side comparison to load. Current Theme CSS is read-only on the left and Your CSS is editable on the right.
4. Edit the rules. Removed content is highlighted in pink and added content in light green while you type. Recognized hexadecimal, RGB, RGBA, HSL, and HSLA values display a small color preview beside the value. The component displays Unsaved changes until the working copy matches its last saved state again.
5. Select Save custom version.
6. Check the affected component on the public site.

The editor contains compiled CSS, not Sass. When the custom version is saved, POM stores a readable per-site source, registers the component as customized, and rebuilds website.min.css. The custom version replaces only that component at its normal position in the cascade. It is not appended to the end of the bundle and does not create another frontend stylesheet request.

The collapsed component then displays Customized.

Find a selector from the browser inspector

Use Find CSS across this page when a selector has been identified on the public site:

1. Copy the selector, class name, property, or value from the browser inspector.
2. Paste it into Find CSS across this page and press Enter to run the search. Typing does not start a search by itself. Anywhere on this Custom CSS screen, Cmd+F on macOS or Ctrl+F on Windows and Linux focuses the same search field.
3. POM searches the complete active editable source of every Component CSS, Independent CSS asset, and Shortcode CSS asset, including unopened accordions. It also searches Global CSS, the CSS inside every Custom CSS stylesheet row, and Critical CSS when those settings fields are available on the page.
4. The matching accordion or collapsed stylesheet row opens automatically, the page scrolls to its editor, and the exact text is selected. Choose Next or Previous to move between occurrences, or use Cmd+G / Ctrl+G and add Shift to move backwards. Navigation wraps around at either end of the results.

The search includes current unsaved CSS edits and refreshes its results as you navigate, including stylesheet rows added, removed, or reordered during the session. Searching does not save CSS or enable a setting. Component searches use the active editable source because that is the source that reaches the public site after saving. Only the matching component comparison is created, so searching does not render every comparison or disable the editor's normal virtual scrolling.

What happens when theme settings change

POM continues calculating the current Theme CSS even while a custom version is active. However, the generated frontend continues using the saved custom version for that fragment. This means:

• The custom CSS is not deleted or overwritten.
• The new setting is still stored correctly.
• The setting may have no visible effect because the related generated fragment is being replaced.
• Components that are not customized continue responding normally to their settings.

The theme setting does not overwrite the custom CSS. The custom CSS keeps replacing the output that the setting would otherwise generate.

How POM detects a changed source

When a custom version is saved, POM also records a fingerprint of the Theme CSS that existed at that moment. Later, it generates the current Theme CSS from the installed theme version, site settings, active integrations, and relevant conditions. If the new fingerprint differs, POM knows the source has changed since the custom version was last saved.

This may happen after changing a related setting, updating the theme, changing the component implementation, or activating a condition that affects its output. The component then displays Customized — source changed and shows an explanation when opened.

This warning does not mean that the public site is broken. It means that the site is still using the custom version, but the CSS currently produced by the theme is no longer the version that was reviewed when that customization was saved.

The comparison makes this state visible directly: the left column contains the newly generated Theme CSS, while the right column keeps the saved custom version. The highlighted changes update immediately as the editable version is revised; POM never merges the two versions automatically.

The warning is currently shown under Settings → POM Theme → Advanced → Custom CSS → Component CSS. It is not shown beside every individual design or layout setting. An administrator who changes a setting for a customized component may therefore see no visual change and should check the component status on the Custom CSS screen.

Respond to a changed source

An administrator has three options when a component reports Customized — source changed:

1. Keep the current custom version. The public site continues using it and the warning remains visible.
2. Review and save it again. Adapt the custom CSS to the current Theme CSS where necessary, then save. This acknowledges the current source and clears the warning. Saving does not automatically merge new theme rules into the custom version.
3. Revert to Theme CSS. POM deletes the custom source, removes its registry entry, rebuilds the generated assets, and immediately uses the CSS produced by the current theme and settings.

A revert restores the CSS generated now. It does not necessarily restore the exact CSS that existed when the custom version was first created.

Copy current Theme CSS to editor is a separate, non-persistent action. It replaces the editable working copy with the complete current left-hand component source, but it does not change the public site until Save custom version is selected. This is useful when rebuilding a customization from the latest generated source without immediately deleting the saved override.

If a saved custom source cannot be read, POM displays Customized — source unavailable and shows the current Theme CSS so an administrator can repair, replace, or revert it.

Complete typography and button fragments

Typography and Buttons each contain their structural CSS and the rules generated from the current Theme Options in one complete fragment. The interface therefore shows one comparison for Typography and one for Buttons. Saving either component takes control of all of its displayed rules; reverting restores the complete version generated from the current settings.

If a site previously customized the older split version of either component, POM combines the saved parts automatically and marks the resulting component Customized — source changed. Review it once because both parts now occupy one final position in the cascade.

Base and body starts with the 15 generated --color-main-* root properties, then contains document normalization, box sizing, structural browser defaults, body layout and overflow, and the configured body background. It remains the first editor because that structural fragment occupies the first physical CSS position inside website.min.css. Keep those root properties in a customized Base source when the site uses the matching palette utility classes. Global body text, headings, paragraphs, lists, quotations, code presentation, and selection colors belong to Typography instead.

Animations contains the shared fade and collapse transitions together with the reusable loading, pulse, typing, and spin keyframes. It follows Base and body because that is its existing physical position inside website.min.css.

Grid contains the responsive containers, rows, columns, gutters, alignment helpers, stacking rules, and the push-* and pull-* positioning helpers produced by the theme's grid system. It follows Animations and precedes Tables as one contiguous fragment inside website.min.css.

Tables contains both native table normalization and the complete theme table component: collapse behavior, captions, heading alignment, cells, borders, striped and hover rows, and responsive wrappers.

Helpers and utilities contains the complete low-level utility layer: the retained Bootstrap utilities and the theme's color, image, spacing, alignment, display, typography, border, sizing, opacity, and iframe helpers. Its text-main-*, bg-main-*, and border-main-* classes reference the --color-main-* properties defined by Base and body, so all three utility families share the same generated palette values. It follows Tables and precedes any optional Page border CSS because that is its existing physical position inside website.min.css.

Forms begins with native label, input, select, textarea, fieldset, legend, progress, output, search, number, and file-control normalization before the theme's form controls and generated settings. Buttons likewise begins with native button normalization before the theme's complete button system. Shared browser resets are split between these two owners so each accordion controls only its own element family.

Typography contains the global body font and color together with native text-element defaults, headings, paragraphs, lists, quotations, generic code presentation, selection colors, content typography, font faces, and generated Theme Options. Rules owned by a specific component remain in that component's editor.

Header contains the shared navbar foundation together with the main navigation, Top bar, Bottom bar, menu states, and the colors and spacing generated from Theme Options. Saving Header takes control of that complete fragment at the original navbar position; the dedicated Side and mobile navigation, Search, and Header title editors remain separate.

Fullscreen navigation contains the complete full-screen overlay, nested menu presentation, directional controls, social links, responsive typography, and its configured background. It appears immediately after Offcanvas shortcode only while Full screen navigation is active.

Search contains the complete navigation search overlay, inline form, result presentation, loading and responsive states, and the inline-search colors generated for every configured Header color preset. It appears immediately after Fullscreen navigation only while Templates → Search → Search form is active.

Advanced search form controls contains the radio and checkbox list presentation generated by the bundled WP Advanced Search framework. It remains available immediately after Search because that framework can render forms independently of the native navigation Search setting.

Theme extension styles contains the compatible CSS appended by active theme and plugin integrations. It appears after Buttons because that integration output is the final generated component fragment before the global Custom CSS editor is appended. Saving it replaces the complete appended integration fragment at that same position; it does not disable the integration or create another stylesheet request. If no active integration appends CSS, the accordion is hidden. A saved customization remains stored while the integration is inactive or returns no CSS, and becomes available again when compatible output returns.

Visibility and display utilities contains the responsive Bootstrap display classes, print display classes, screen-reader helpers, and the device-specific web-hide-on-* classes used by the page builder and theme templates. It appears after Blog and post content and before Notifications, matching its position in website.min.css.

Footer is one logical accordion with two comparisons: Footer structure and Footer row settings. Saving Footer takes control of both displayed sources together. POM still inserts each source at its original position inside website.min.css, so the structural footer CSS is not moved to the later row-spacing position and no cascade behavior changes merely by exposing the editor.

Side and mobile navigation has three comparisons. Side and mobile navigation structure contains the shared side-panel and mobile-panel layout, controls, overlay, responsive sizes, and the structural shell also used by the side cart. Navigation integration contains the side-header positioning and the shared side/right-navigation menu-state rule. Side and mobile navigation settings contains the backgrounds and mobile-menu colors produced by the current Theme Options. Saving or reverting the component handles all three sources together while preserving their established positions in website.min.css; the integration and settings sources remain in their original late cascade positions.

The reusable Offcanvas shortcode and the WooCommerce advanced-filter panel are not part of this component. Offcanvas shortcode has its own Component CSS editor immediately afterwards, while the WooCommerce panel keeps its conditionally loaded stylesheet. Changing Side and mobile navigation CSS therefore does not take control of either unrelated panel.

Conditional component customizations are retained if their feature is later disabled, but their accordion and replacement remain inactive while the Theme CSS fragment is not compiled. Re-enabling the feature restores the accordion and applies the saved customization again. The same rule applies to Theme extension styles when its contributing integration is deactivated or stops appending CSS. This prevents a temporary feature toggle or integration change from deleting administrator work.

Elements shared by different components

Some visual elements deliberately span more than one source fragment:

• The Quick View panel belongs to Quick view, while its trigger-button appearance belongs to Buttons.
• Drop cap structure belongs to Drop caps, while the heading font applied to its third variant belongs to Typography.

Customize both components only when both aspects need to stop following their related settings.

Choose the appropriate CSS mechanism

The five CSS mechanisms continue to serve different purposes:

Mechanism	Result
Component CSS	Replaces a supported fragment at its original position inside website.min.css.
Independent CSS assets	Replaces one separately or lazily loaded theme stylesheet with a per-site optimized copy without adding it to website.min.css or changing when it loads.
Shortcode CSS assets	Replaces a shortcode module's conditionally loaded stylesheet without loading it on pages where that module is absent.
Custom CSS	Appends general rules to the end of website.min.css.
Additional stylesheet rows	Publish separate stylesheets that can be loaded globally or assigned selectively.

Use Component CSS when taking complete control of a supported generated fragment. Use Independent CSS assets when the theme already owns a separate stylesheet and its complete contents need to be replaced. Use Shortcode CSS assets for the complete stylesheet owned by one conditional shortcode module. Use Custom CSS for small adjustments or new rules that should win through the cascade. Use additional stylesheet rows when a new independent global or selectively assigned file is required.

Together, the Component CSS accordions cover every CSS declaration that POM writes into website.min.css. The list follows the real cascade order, including conditional fragments, while related physical fragments can share one logical editor where moving them would change the cascade. Sass variables, mixins, and other build-only sources do not emit CSS and therefore have no editor. The Independent CSS assets and Shortcode CSS assets groups cover every separate frontend stylesheet distributed or generated by the theme; administrator-only styles are intentionally excluded.

Customize an independent stylesheet

The Independent CSS assets group appears below the website.min.css component list. It currently includes Forms frontend, Flickity, PhotoSwipe, Isotope, Datetimepicker, WooCommerce, Faceted Search, Cookie consent, Toast notifications, Swiper, Modal, Tooltip, Share, Post navigation, Full-page feed, Author page, Advanced filters, Rating, Tabs, Accordion, and Social icons. Cookie consent appears only while the cookie notice is enabled:

1. Go to Settings → POM Theme → Advanced → Custom CSS.
2. Under Independent CSS assets, open Forms frontend, Flickity, PhotoSwipe, Isotope, Datetimepicker, WooCommerce, Faceted Search, Cookie consent, Toast notifications, Swiper, Modal, Tooltip, Share, Post navigation, Full-page feed, Author page, Advanced filters, Rating, Tabs, Accordion, or Social icons.
3. Compare Current Theme CSS with Your CSS, make the required changes, and select Save custom version.
4. Open a public page that loads the selected feature and verify the result.

Without a customization, POM keeps loading the original forms-frontend.min.css. Saving stores the readable working source and generates a minified per-site copy; the existing Forms enqueue then selects that copy. This does not enable Forms, insert the stylesheet into website.min.css, or load it on pages where Forms did not already require it.

Flickity follows that lifecycle for flickity.min.css, which combines the Flickity engine, its fade extension, and POM's carousel presentation. Its existing web-flickity-style handle remains requested only by qualifying carousels, carousel feeds, sliders, gallery layouts, finders, merge tags, WooCommerce galleries and product carousels, or compatible stored-content discovery. It retains deferred preload delivery with low fetch priority and the associated web_carousel script. Saving Flickity CSS changes only the registered stylesheet URL and version; it does not create or initialize a carousel, alter its options, load it on another page, or replace its JavaScript.

PhotoSwipe follows the same editing lifecycle with an additional lazy-loading boundary. Qualifying galleries and single-image lightboxes continue loading only the small web-photoswipe loader at page render time. The PhotoSwipe runtime CSS and JavaScript remain absent until pointer, focus, keyboard, URL-hash, or click intent requests the gallery. Saving PhotoSwipe CSS gives that loader the optimized per-site stylesheet URL without changing the runtime JavaScript URL, which pages request the feature, when the browser starts loading it, or the fallback that navigates directly to the image if PhotoSwipe cannot open.

Isotope follows that lifecycle for isotope.min.css. Its existing web-isotope-style handle remains requested only by masonry or image-only listing, archive, shop, search, faceted-search, and compatible stored-content paths that already require Isotope. It retains deferred preload delivery with low fetch priority and the associated web-isotope script. Saving Isotope CSS changes only the registered stylesheet URL and version; it does not select a masonry layout, create or filter a grid, load the feature on another page, or replace its JavaScript.

Datetimepicker follows that lifecycle for datetimepicker.min.css, which combines Air Datepicker's presentation with POM's date, time, datetime, inline-calendar, range, and field-state additions. Its existing web-datetimepicker-style handle remains requested only by qualifying POM form fields, finder date fields, booking features, configured WooCommerce delivery calendars, or compatible stored-content discovery. POM rechecks the current layout of a referenced form before the page head is printed, so adding a date field does not require resaving every page that embeds that form. Saving Datetimepicker CSS changes only the registered stylesheet URL and version; it does not create a calendar, change a field's date rules, load the feature on another page, or replace the associated web-datetimepicker script.

WooCommerce follows that lifecycle for POM's reduced woocommerce.min.css. Its existing web-woocommerce handle remains available only while WooCommerce is active and keeps its established position before website.min.css, which remains the later theme override layer. Saving WooCommerce CSS changes only that handle's stylesheet URL and version; it does not activate WooCommerce, restore WooCommerce's disabled core stylesheets, change the storefront templates, or add the stylesheet to a site where WooCommerce is inactive.

Faceted Search follows that lifecycle for faceted-search.min.css. Its global setting and existing content, shortcode, widget, and late-render discovery continue deciding whether the stylesheet and paired script load. Saving Faceted Search CSS changes only the stylesheet URL and version; it does not enable the feature, request it on unrelated pages, change facet configuration, or replace its JavaScript.

Cookie consent follows that lifecycle for the stylesheet generated from the current cookie notice layout and color settings. POM creates its readable cookie-consent.css source and optimized cookie-consent.min.css together whenever site assets are regenerated. Saving Cookie consent CSS changes only the existing stylesheet URL; it does not enable the notice, change its configuration, or replace its JavaScript. After customization, later cookie-style setting changes regenerate Current Theme CSS and display Customized — source changed, but the saved CSS remains active until it is reviewed or reverted. Disabling the cookie notice hides the accordion and enqueues neither its CSS nor JavaScript; the saved customization is retained and becomes available again if the notice is re-enabled.

Toast notifications follows that lifecycle for toastr.min.css. Its existing web-toastr-lib stylesheet and JavaScript remain controlled by the global Toast notifications setting and shared by POM Forms and WooCommerce add-to-cart feedback. An override can be saved while the setting is disabled, but it does not activate or enqueue either asset. When the setting is enabled, saving Toast notifications CSS changes only the stylesheet URL and version; it does not replace toastr.min.js, alter form dependencies, enable commerce feedback, or change its ordinary render-blocking position.

Swiper follows that lifecycle for swiper.min.css. The existing pom-swiper stylesheet remains directly enqueued only when a Gallery uses the Full screen layout. Saving Swiper CSS changes only that stylesheet's URL and version; it does not select the gallery layout, create slides, replace swiper.min.js or full-page.min.js, or change the dependency between those scripts.

Modal follows the same lifecycle for modal.min.css. Its existing web-modal-style handle remains conditional: it is still requested only by a modal feature, shortcode, template, or discovered page that already requires it. Saving Modal CSS changes only the registered source URL and version; it does not load Modal JavaScript, create modal markup, or add the stylesheet to unrelated pages.

Tooltip follows that lifecycle for tooltip.min.css. Its existing web-tooltip-style handle remains paired with the Tooltip feature and continues using deferred preload delivery with low fetch priority. Saving Tooltip CSS changes only the registered source URL and version; it does not require Tooltip on another page, load its JavaScript by itself, or replace the no-JavaScript stylesheet fallback.

Share follows that lifecycle for share.min.css. Its existing web-share-style handle is still requested only when a post layout, product layout, Share shortcode, discovered sharing markup, or another existing consumer requires the Share feature. Saving Share CSS changes only that stylesheet's registered source URL and version; it neither enables sharing nor changes the associated web-post-email-sharing script.

Post navigation follows that lifecycle for page-nav.min.css. Its existing web-page-nav-style handle remains conditional on the previous/next navigation setting for the current post type. Saving Post navigation CSS changes only the registered source URL and version; it does not enable navigation, alter its links, or load the stylesheet on another singular view.

Full-page feed follows that lifecycle for full-page.min.css. Its existing web-full-page-style handle remains paired with web-feed-fullpage and is still requested only when a shortcode, saved content manifest, archive, or search context selects the full-screen feed layout. Saving Full-page feed CSS changes only the registered stylesheet URL and version; it does not change the feed layout or its JavaScript.

Author page follows that lifecycle for author-page.min.css. Its existing web-author-page-style handle remains requested by author archives and by stored content whose discovered markup contains the theme's author box. Saving Author page CSS changes only the registered source URL and version; it does not alter author data, create an author box, or load the stylesheet on unrelated requests.

Advanced filters follows that lifecycle for advanced-filters.min.css. Its existing web-advanced-filters-style handle remains paired with pom-woocommerce-advanced-filters and is still requested only by enabled WooCommerce shop or product-taxonomy archives and by stored content whose discovered markup contains the theme's advanced-filter container. Saving Advanced filters CSS changes only the registered stylesheet URL and version; it does not enable the feature, render filters, change the archive condition, or replace its JavaScript.

Rating follows that lifecycle for rating.min.css. Its existing web-rating-style handle remains requested by enabled single-post ratings, supported product-review displays, and stored content whose discovered markup contains .web-rating. The post-rating feature remains paired with web-post-rating, including its existing localized voting message. Saving Rating CSS changes only the registered stylesheet URL and version; it does not enable ratings, create rating markup, change saved votes, or replace rating JavaScript.

Tabs follows that lifecycle for tabs.min.css. Its existing web-tabs-style handle remains requested by the Tabs shortcode, supported product tabs, taxonomy-term thumbnail layouts, and stored content whose discovered markup uses .web-tabs or a supported tab, pill, or list toggle. Consumers that request the complete Tabs feature remain paired with web-bootstrap-tab, while stylesheet-only consumers remain stylesheet-only. Saving Tabs CSS changes only the registered stylesheet URL and version; it does not create tabs, select a tab, change product-tab content, or add JavaScript to stylesheet-only consumers.

Accordion follows that lifecycle for accordion.min.css. Its existing web-accordion-style handle remains requested by the Accordion shortcode, product tabs configured as accordions, supported checkout sections, and stored content whose discovered markup contains the theme's accordion classes. Existing consumers retain web-bootstrap-collapse, and the shortcode module retains its additional web_accordion behavior. Saving Accordion CSS changes only the registered stylesheet URL and version; it does not create accordions, change which sections start open, alter checkout settings, or replace either script.

Social icons follows that lifecycle for social-icons.min.css. Its existing web-social-icons-style handle remains mapped to the Social icons module and compatible stored-content discovery. During live rendering, the module still returns before requesting the feature when no social networks are configured. The feature has no associated JavaScript. Saving Social icons CSS changes only the registered stylesheet URL and version; it does not configure a network, create icon markup, enable the module on another request, or add a script.

Customize a shortcode stylesheet

The Shortcode CSS assets group follows the independent-asset list. It currently contains 360 image, A-Z feed, Audio playlist, Blockquote, Breadcrumbs, Code block — Light theme, Code block — Dark theme, Cookies info table, Countdown, Counter, FullCalendar, Gallery, Instagram, Image comparer, Interactive infography, Parallax scene, Pricing list, Progress bars, Scroll-triggered image sequence, Taxonomy terms list, Testimonial, Timeline, Typed text, and Video:

1. Go to Settings → POM Theme → Advanced → Custom CSS.
2. Under Shortcode CSS assets, open 360 image, A-Z feed, Audio playlist, Blockquote, Breadcrumbs, Code block — Light theme, Code block — Dark theme, Cookies info table, Countdown, Counter, FullCalendar, Gallery, Instagram, Image comparer, Interactive infography, Parallax scene, Pricing list, Progress bars, Scroll-triggered image sequence, Taxonomy terms list, Testimonial, Timeline, Typed text, or Video.
3. Compare Current Theme CSS with Your CSS, make the required changes, and select Save custom version.
4. Open a page containing the matching web_360_image, web_a_z_feed, audio_playlist, web_blockquote, web_breadcrumbs, web_code_block, web_cookies_info_table, web_countdown, web_counter, web_fullcalendar, web_gallery, web_instagram, web_image_comparer, web_interactive_infography, web_parallax_scene, web_pricing_list, web_progress_bar, web_scroll_triggered_image_sequence, web_taxonomy_terms_list, web_testimonial, web_timeline, web_typed_text, or web_video shortcode and verify its presentation and controls.
5. Open a page without that shortcode and confirm that the stylesheet remains absent.

Without a customization, POM keeps loading the Webpack-generated 360-image.min.css only when the 360 image module is required. Saving stores the readable source, generates a minified per-site copy, and changes only the existing web-360-image stylesheet URL and version. The paired web_360_image script, shortcode discovery, markup, yaw and pitch settings, and conditional enqueue remain unchanged. Relative image references used by the Pannellum stylesheet are resolved against the theme's canonical asset directory so its controls continue rendering from the managed copy.

A-Z feed follows the same lifecycle for a-z-feed.min.css. Its existing web-a-z-feed handle remains requested only by the web_a_z_feed module and compatible stored-content discovery. The feature has no associated JavaScript. Saving A-Z feed CSS changes only that stylesheet's URL and version; it does not change the selected query, loop base, columns, result template, rendered post groups, or load the asset on unrelated pages.

Audio playlist follows that lifecycle for audio-playlist.min.css. Its existing web-audio-playlist handle remains requested only by the audio_playlist module and compatible stored-content discovery. Saving Audio playlist CSS changes only that stylesheet's URL and version; it does not change playlist items, playback state, footer controls, the web_audio_playlist script, its web-theme-js dependency, or load either asset on unrelated pages.

Blockquote follows the same lifecycle for blockquotes.min.css. Its existing web-blockquotes handle remains requested only by the web_blockquote module and compatible stored-content discovery. The feature is stylesheet-only. Saving Blockquote CSS changes only that stylesheet's URL and version; it does not change quote content, author labels, background settings, responsive visibility, or load an asset on unrelated pages.

Breadcrumbs follows the same lifecycle for breadcrumbs.min.css. Its existing web-breadcrumbs handle remains requested only by the web_breadcrumbs module and compatible stored-content discovery. The feature is stylesheet-only. Saving Breadcrumbs CSS changes only that stylesheet's URL and version; it does not change the generated hierarchy, labels, links, separators, responsive visibility, or load an asset on unrelated pages.

Code block — Light theme and Code block — Dark theme are contiguous editors for the scoped code-block-prism-light.min.css and code-block-prism-dark.min.css assets. A web_code_block with prism_theme="light" requests only web-code-block-prism-light; prism_theme="dark" requests only web-code-block-prism-dark; and prism_theme="none" requests neither stylesheet. Saving either theme changes only its selected stylesheet URL and version. The shortcode continues decoding and escaping the stored code, while the web_code_block script keeps normalizing languages, running Prism, and generating token markup in all three modes.

Cookies info table follows the same lifecycle for cookies-info-table.min.css. Its existing web-cookies-info-table handle remains requested only by the web_cookies_info_table module and compatible stored-content discovery. The feature is stylesheet-only. Saving Cookies info table CSS changes only that stylesheet's URL and version; it does not change the configured cookie data, generated disclosure columns or rows, shortcode attributes, or load an asset on unrelated pages.

Countdown follows the same lifecycle for countdown.min.css. Its existing web-countdown handle remains requested only by the web_countdown module and compatible stored-content discovery. Saving Countdown CSS changes only that stylesheet's URL and version; it does not change the target date, labels, second-by-second updates, the existing web_countdown script, or load either asset on unrelated pages.

Counter follows the same lifecycle for counter.min.css. Its existing web-counter handle remains requested only by the web_counter module and compatible stored-content discovery. Saving Counter CSS changes only that stylesheet's URL and version; it does not change the target number, title, icon or presentation classes, viewport detection, one-second animation, the existing web_counter script, or load either asset on unrelated pages.

FullCalendar follows the same lifecycle for fullcalendar.min.css. Its existing web-fullcalendar handle remains requested only by the specially registered fullcalendar module and compatible web_fullcalendar stored-content discovery. Saving FullCalendar CSS changes only that stylesheet's URL and version; it does not change the special module registration, product-taxonomy filters, event request, view controls, the existing web_fullcalendar script, its web-theme-js dependency, or load either asset on unrelated pages.

Gallery follows the same lifecycle for gallery.min.css. Its existing web-gallery handle remains requested only by the web_gallery module and compatible stored-content discovery. Saving Gallery CSS changes only that stylesheet's URL and version. The module retains its existing web_gallery and web_carousel scripts, while each layout keeps its own conditional integrations: eligible lightboxes retain the lazy PhotoSwipe loader, carousel layouts retain Flickity, masonry retains Isotope, and full_screen retains the direct Swiper stylesheet and script plus the dependent pom-fullpage initializer. None of those independent or vendor assets is replaced, enabled, or loaded on another page by the Gallery editor.

Instagram follows the same lifecycle for instagram.min.css. Its existing web-instagram handle remains requested only by the web_instagram module and compatible stored-content discovery. The feature is stylesheet-only. Saving Instagram CSS changes only that stylesheet's URL and version; it does not change the selected account, image request, feed markup, responsive columns, media links, missing-token message, or load an asset on unrelated pages.

Image comparer follows the same lifecycle for the complete Juxtapose image-comparer.min.css stylesheet. Its existing web-image-comparer handle remains requested only by the web_image_comparer module and compatible stored-content discovery. Saving Image comparer CSS changes only that stylesheet's URL and version; it does not change the two image sources, generated component ID and markup, starting position, responsive behavior, Juxtapose library, existing web_image_comparer script, or load either asset on unrelated pages.

Interactive infography follows the same lifecycle for interactive-infography.min.css. Its existing web-interactive-infography handle remains requested only by the web_interactive_infography parent module and compatible stored-content discovery. The parent module has no dedicated frontend JavaScript. Saving Interactive infography CSS changes only that stylesheet's URL and version; it does not change the background image, opacity, nested web_infography_spot content, positions, actions, markers, or load the parent asset on unrelated pages. A nested spot can still request its existing shared Tooltip or Modal assets when its selected mode requires them.

Parallax scene follows the same lifecycle for parallax-scene.min.css. Its existing web-parallax-scene handle remains requested only by the web_parallax_scene parent module and compatible stored-content discovery. Saving Parallax scene CSS changes only that stylesheet's URL and version; it does not change the generated scene ID, nested image, text or HTML layers, X and Y depth values, relative-input, hover-only or pointer-event configuration, the bundled parallax-js behavior in the existing web_parallax_scene script, or load either asset on unrelated pages.

Pricing list follows the same lifecycle for pricing-list.min.css. Its existing web-pricing-list handle remains requested only by the web_pricing_list parent module and compatible stored-content discovery. The module has no dedicated frontend JavaScript. Saving Pricing list CSS changes only that stylesheet's URL and version; it does not change nested web_pricing_list_item titles, prices, prefixes, suffixes, subtitles, images, icons, responsive visibility, or load the parent asset on unrelated pages. A child with a titled icon can still request the existing shared Tooltip feature independently.

Progress bars follows the same lifecycle for progress-bars.min.css. Its existing web-progress-bars handle remains requested only with the web_progress_bar module and compatible stored-content discovery. Saving Progress bars CSS changes only that stylesheet's URL and version; it does not alter the web_progress_bars script, its one-second animation, calculated percentage label and fill width, static-number layout, thickness variants, responsive visibility, or conditional loading.

Scroll-triggered image sequence follows the same lifecycle for scroll-triggered-image-sequence.min.css. Its existing web-scroll-triggered-image-sequence handle remains requested only with the web_scroll_triggered_image_sequence module and compatible stored-content discovery. Saving its CSS changes only that stylesheet's URL and version; it does not alter the web_scroll_triggered_image_sequence script, first-frame priority, near-viewport loading of remaining frames, pinned scroll timeline, canvas sizing and media fitting, video seeking, spinner state, nested text stages, or conditional loading.

Taxonomy terms list follows the same lifecycle for taxonomy-terms-list.min.css. Its existing web-taxonomy-terms-list handle remains requested only by the web_taxonomy_terms_list module and compatible stored-content discovery. The module is stylesheet-only. Saving Taxonomy terms list CSS changes only that stylesheet's URL and version; it does not change the selected taxonomy, empty-term filtering, alphabetical and numeric grouping, index links, return-to-top links, archive destinations, shortcode attributes, or load an asset on unrelated pages.

Testimonial follows the same lifecycle for testimonial.min.css. Its existing web-testimonial handle remains requested only by the web_testimonial module and compatible stored-content discovery. The module is stylesheet-only. Saving Testimonial CSS changes only that stylesheet's URL and version; it does not change the three testimonial variants, the style 2 author placement, portrait lazy-loading attributes, quote content, author and source markup, responsive visibility, or load an asset on unrelated pages.

Timeline follows the same lifecycle for timeline.min.css. Its existing web-timeline handle remains requested only by the timeline module, the web_timeline shortcode, and compatible stored-content discovery. The module is stylesheet-only. Saving Timeline CSS changes only that stylesheet's URL and version; it does not change item parsing, alternating odd/even order, titles, descriptions, dates, palette classes, custom IDs or classes, generated list markup, or load an asset on unrelated pages.

Typed text follows the same lifecycle for typed-text.min.css. Its existing web-typed-text handle remains requested only by the typed_text module, the web_typed_text shortcode, and compatible stored-content discovery. Saving Typed text CSS changes only that stylesheet's URL and version. The existing web_typed_text script still initializes Typed.js with the configured strings, speed, loop, cursor, and readiness behavior, and unrelated pages continue loading neither asset.

Video follows the same lifecycle for video.min.css. Its existing web-video handle remains requested only by the video module, the web_video shortcode, and compatible stored-content discovery. Saving Video CSS changes only that stylesheet's URL and version. The existing web_video and web-jarallax-video scripts retain provider resolution, inline playback, autoplay modes, controls, aspect ratios, play toggles, modal fullscreen, Escape handling, and their current dependencies. Pages without Video continue loading none of these module assets.

If a theme update or a setting-backed generator changes the canonical CSS for a customized independent or shortcode asset, its accordion displays Customized — source changed and keeps the saved custom version active until it is reviewed or reverted. Revert to theme CSS removes both custom copies and immediately returns the enqueue to the current optimized asset. If either custom file is missing or does not match its saved fingerprint, the frontend falls back to that current asset and the editor reports the source problem.

Generation and transfer safety

Saving and reverting are atomic operations. Component CSS changes regenerate the complete theme asset set and keep the change only when generation succeeds. Independent CSS changes publish only that readable source and its minified sibling. If validation or publication fails, POM restores the previous source and registry state; the public site continues using the last valid website.min.css or original independent theme asset.

Component and independent-asset overrides participate in the existing settings transfer under Settings → POM Theme → Tools. Export the corresponding settings entries to include their readable sources and any optimized independent copies. After importing, regenerate assets before checking website.min.css; independent and shortcode replacements can already resolve through their transferred optimized copies, while regeneration publishes imported component replacements into the main bundle.

Load a custom stylesheet across the site

Use Settings → POM Theme → Advanced → Custom CSS when one standalone stylesheet should load on every public page:

1. Enable and save the Custom CSS settings if they are not already active.
2. Under Custom CSS, add or open a stylesheet row.
3. Enter a CSS name and the rules in CSS.
4. Select Is a global stylesheet.
5. Save the settings and verify the stylesheet on more than one public page.

The checkbox is off by default, including for stylesheet rows created before this option was available. When enabled, POM loads that row as its own stylesheet after the main theme stylesheet; it does not merge the row into website.min.css. The stylesheet also remains loaded on pages configured to replace the normal style queue. Leave the checkbox off when a template, module, or individual content item should load the stylesheet only where selected.

Use the component editors when replacing one supported generated fragment. Use the global CSS editor for rules that must be appended to website.min.css, and use stylesheet rows when a separate global or selectively assigned file is required.

The page and post editor

Use the normal WordPress editor for the content record, publication state, taxonomy terms, featured image, and other object data.

When the current role and post type are allowed to use the bundled builder, the editor also exposes POM Page Builder controls. The builder owns page composition and component settings; it does not replace the underlying WordPress record.

Individual content screens can also expose POM settings for selected header, subheader, breadcrumb, footer, stylesheet, script, or template behavior. Check these local values when one page differs from the global configuration.

Appearance

Use standard WordPress screens for these theme integrations:

• Appearance → Themes installs, activates, and updates POM.
• Appearance → Menus → Manage Locations assigns menus to the locations registered by the current header configuration.
• Appearance → Widgets populates the primary, secondary, custom, footer, and other registered widget areas.

POM always registers its core primary, logged-in primary, mobile, footer-copyright, side-navigation, full-screen, and logged-in dropdown locations. A split-header layout adds its additional primary location; enabling a top or bottom bar adds left and right locations for that bar.

Forms

An administrator first enables the forms system under Settings → POM Theme → Forms → General.

The separate Forms menu then owns:

• All Forms
• Add New
• Submissions

Theme settings establish shared behavior; the Forms menu creates and operates individual forms.

WooCommerce

Use WooCommerce screens for products, variations, coupons, orders, tax, shipping, payments, accounts, and email behavior.

Use Settings → POM Theme → E-Commerce for the supported POM presentation and enhancement layer: product and archive layouts, carts, checkout presentation, account additions, waitlists, wishlists, vouchers, delivery tools, and other enabled features.

Page Builder settings

Administrators can manage Page Builder access under Settings → Page builder. Role access decides which post types and builder features a user group can use. If the builder is missing for an editor, check role and post-type access before rebuilding the page another way.

When you cannot find a control

1. Confirm you are administering the intended site in the network.
2. Confirm your WordPress role has access to that section.
3. Check whether the feature must first be enabled and saved.
4. Check whether a required plugin such as WooCommerce is active.
5. Decide whether the value belongs to the content record, its template, the Page Builder, or global Theme settings.
6. Use the documentation map to open the focused guide.