{"id":14,"date":"2026-09-16T10:28:30","date_gmt":"2026-09-16T10:28:30","guid":{"rendered":"https:\/\/docs.latw.ai\/uncategorized\/css-class-map\/"},"modified":"2026-09-16T10:28:30","modified_gmt":"2026-09-16T10:28:30","slug":"css-class-map","status":"publish","type":"post","link":"https:\/\/docs.latw.ai\/pl\/esti-to-wordpress\/css-class-map\/","title":{"rendered":"CSS Class Map"},"content":{"rendered":"

CSS class map<\/h1>\n

Every class the plugin renders is prefixed osfec-<\/code> and follows BEM: block__element--modifier<\/code>. The outermost element
\nof every component also carries the bare .osfec<\/code> class, which is where
\nthe custom properties<\/a> are declared \u2014 so .osfec .osfec-card<\/code> is always a valid,
\nhigher-specificity selector.<\/p>\n

Wrappers<\/h2>\n\n\n\n\n\n\n\n\n\n
Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
.osfec<\/code><\/td>\nOn every component the plugin renders. Sets the properties and the max width<\/td>\n<\/tr>\n
.osfec-archive<\/code><\/td>\nThe offer archive page<\/td>\n<\/tr>\n
.osfec-offer<\/code><\/td>\nThe single offer article (alongside WordPress’s own post_class()<\/code> output)<\/td>\n<\/tr>\n
.osfec-offers<\/code><\/td>\nThe shortcode and block wrapper. .osfec.osfec-offers<\/code> drops the side padding<\/td>\n<\/tr>\n
.osfec-main<\/code><\/td>\nOnly on block themes: the <main><\/code> the plugin opens around its pages<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Shared pieces<\/h2>\n\n\n\n\n\n\n\n\n\n
Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
.osfec-kicker<\/code>, .osfec-kicker__sep<\/code><\/td>\nSmall uppercase label above a heading<\/td>\n<\/tr>\n
.osfec-section<\/code>, .osfec-section__head<\/code><\/td>\nA titled section on the offer page<\/td>\n<\/tr>\n
.osfec-panel<\/code>, .osfec-panel__body<\/code><\/td>\nThe bordered card that wraps a block of content<\/td>\n<\/tr>\n
.osfec-button<\/code>, .osfec-button--ghost<\/code><\/td>\nPrimary and secondary button. Styled as .osfec .osfec-button<\/code><\/td>\n<\/tr>\n
.osfec-empty<\/code><\/td>\n“No offers match your criteria.”<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Listing<\/h2>\n
\n<ul class=\"osfec-list\">                        <!-- + .osfec-list--grid for a grid -->\n    <li class=\"osfec-card-item\">\n        <a class=\"osfec-card__link\">\n            <article class=\"osfec-card\">\n                <div class=\"osfec-card__media\"><img><\/div>\n                <div class=\"osfec-card__content\">\n                    <div class=\"osfec-card__topline\">\n                        <span class=\"osfec-card__type\">Apartment for sale<\/span>\n                        <span class=\"osfec-card__location\">Bia\u0142ystok<\/span>\n                    <\/div>\n                    <h2 class=\"osfec-card__title\">\u2026<\/h2>\n                    <ul class=\"osfec-card__details\">\n                        <li class=\"osfec-card__detail\">64 m\u00b2<\/li>\n                    <\/ul>\n                    <div class=\"osfec-card__footer\">\n                        <div class=\"osfec-card__price-wrap\">\n                            <span class=\"osfec-card__price-label\">Price<\/span>\n                            <span class=\"osfec-card__price\">540 000 PLN<\/span>\n                        <\/div>\n                        <span class=\"osfec-card__cta\">View offer\n              <span class=\"osfec-card__cta-arrow\">\u2192<\/span>\n            <\/span>\n                    <\/div>\n                <\/div>\n            <\/article>\n        <\/a>\n    <\/li>\n<\/ul><\/code><\/pre>\n
Notes:<\/p>\n
    \n
  • .osfec-list--grid<\/code> is added by the columns<\/code> attribute and reads --osfec-columns<\/code> for the column count. It collapses
    \nto two columns at 980px and one at 600px.<\/li>\n
  • .osfec-card__price--muted<\/code> replaces the price when the price is hidden (“Price on request”).<\/li>\n
  • Hover and focus states are driven from .osfec-card__link<\/code>, so .osfec-card__link:hover .osfec-card { \u2026 }<\/code> is the
    \nright shape for a custom hover.<\/li>\n
  • .osfec-offers__more<\/code> is the paragraph holding the link to the archive, printed by more<\/code>.<\/li>\n<\/ul>\n
    Filter bar and toolbar<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
    .osfec-filters<\/code><\/td>\nThe <form><\/code>, submitting with GET<\/td>\n<\/tr>\n
    .osfec-filters__grid<\/code><\/td>\nThe field grid<\/td>\n<\/tr>\n
    .osfec-filters__field<\/code><\/td>\nOne field<\/td>\n<\/tr>\n
    .osfec-filters__field--pair<\/code><\/td>\nA From\/To pair (price, area)<\/td>\n<\/tr>\n
    .osfec-filters__label<\/code><\/td>\nField label<\/td>\n<\/tr>\n
    .osfec-filters__input<\/code><\/td>\nEvery input and select in the bar<\/td>\n<\/tr>\n
    .osfec-filters__actions<\/code><\/td>\nRow holding the submit button and the reset link<\/td>\n<\/tr>\n
    .osfec-filters__reset<\/code><\/td>\n“Clear filters”<\/td>\n<\/tr>\n
    .osfec-toolbar<\/code><\/td>\nThe sorting and result-count row on the archive<\/td>\n<\/tr>\n
    .osfec-toolbar__sort<\/code>, .osfec-toolbar__label<\/code><\/td>\nThe sorting form and its label<\/td>\n<\/tr>\n
    .osfec-toolbar__count<\/code><\/td>\n“Offers found: 128”<\/td>\n<\/tr>\n
    .osfec-pagination<\/code><\/td>\nArchive pagination; the links inside are WordPress’s own .page-numbers<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Single offer<\/h2>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
    .osfec-breadcrumb<\/code><\/td>\nHome \/ Offers \/ this offer<\/td>\n<\/tr>\n
    .osfec-offer__head<\/code>, .osfec-offer__headline<\/code><\/td>\nHeader block with the kicker, title and location<\/td>\n<\/tr>\n
    .osfec-offer__title<\/code><\/td>\nThe <h1><\/code><\/td>\n<\/tr>\n
    .osfec-offer__location<\/code><\/td>\nLocation line, with an inline SVG pin<\/td>\n<\/tr>\n
    .osfec-offer__headline-price<\/code><\/td>\nThe price block in the header; reuses .osfec-card__price-label<\/code> and .osfec-card__price<\/code><\/td>\n<\/tr>\n
    .osfec-offer__price-previous<\/code><\/td>\nStruck-through previous price, only when it was higher<\/td>\n<\/tr>\n
    .osfec-facts<\/code>, .osfec-fact<\/code>, .osfec-fact__label<\/code>, .osfec-fact__value<\/code><\/td>\nThe four headline figures<\/td>\n<\/tr>\n
    .osfec-attributes<\/code>, .osfec-attributes__item<\/code>, .osfec-attributes__label<\/code>, .osfec-attributes__value<\/code><\/td>\nThe bordered attribute grid<\/td>\n<\/tr>\n
    .osfec-offer__id<\/code><\/td>\n“Offer ID: 12345”<\/td>\n<\/tr>\n
    .osfec-offer__body<\/code>, .osfec-offer__main<\/code>, .osfec-offer__sidebar<\/code><\/td>\nTwo-column layout below the facts<\/td>\n<\/tr>\n
    .osfec-offer__subtitle<\/code><\/td>\nSection heading inside a panel<\/td>\n<\/tr>\n
    .osfec-description<\/code><\/td>\nThe imported description, capped at the reading width<\/td>\n<\/tr>\n
    .osfec-tags<\/code>, .osfec-tags__item<\/code><\/td>\nMarketing labels from Esti<\/td>\n<\/tr>\n
    .osfec-offer__back<\/code><\/td>\n“Back to all offers”<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    Gallery<\/h2>\n
    \n<div class=\"osfec-slider\" data-osfec-slider tabindex=\"0\">\n    <div class=\"osfec-slider__track\" data-osfec-track>\n        <figure class=\"osfec-slider__slide\"><img><\/figure>\n    <\/div>\n    <button class=\"osfec-slider__nav osfec-slider__nav--prev\" data-osfec-prev>\u2026<\/button>\n    <button class=\"osfec-slider__nav osfec-slider__nav--next\" data-osfec-next>\u2026<\/button>\n    <p class=\"osfec-slider__counter\"><span data-osfec-current>1<\/span> \/ 12<\/p>\n<\/div><\/code><\/pre>\n
      \n
    • The data-osfec-*<\/code> attributes are the script’s hooks. Rename a class freely; do not remove those attributes<\/strong> unless
      \nyou are also replacing assets\/js\/gallery.js<\/code>.<\/li>\n
    • .osfec-slider__track--dragging<\/code> is added while a pointer drag is in progress \u2014 useful for suppressing transitions.<\/li>\n
    • The track is moved with a transform rather than by scrolling, deliberately: a horizontal scroll container swallows the
      \nvertical wheel and the page would stop scrolling under the pointer.<\/li>\n
    • The navigation buttons and the counter are only rendered when the offer has more than one photo.<\/li>\n<\/ul>\n
      Media tiles<\/h2>\n\n\n\n\n\n\n\n\n
      Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
      .osfec-media<\/code><\/td>\nWrapper for the video and virtual tour tiles<\/td>\n<\/tr>\n
      .osfec-media__grid<\/code><\/td>\nThe tile grid<\/td>\n<\/tr>\n
      .osfec-media__card<\/code><\/td>\nOne tile, an external link opening in a new tab<\/td>\n<\/tr>\n
      .osfec-media__icon<\/code>, .osfec-media__label<\/code><\/td>\nThe icon and label on a tile<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      The whole block is omitted when the offer has neither a video nor a tour.<\/p>\n
      Agent card<\/h2>\n\n\n\n\n\n\n\n\n\n\n
      Class<\/th>\nWhere<\/th>\n<\/tr>\n<\/thead>\n
      .osfec-agent<\/code><\/td>\nThe card<\/td>\n<\/tr>\n
      .osfec-agent--no-photo<\/code><\/td>\nAdded when the directory has no portrait<\/td>\n<\/tr>\n
      .osfec-agent__portrait<\/code><\/td>\nPhoto wrapper<\/td>\n<\/tr>\n
      .osfec-agent__info<\/code>, .osfec-agent__name<\/code>, .osfec-agent__position<\/code><\/td>\nName, office and role<\/td>\n<\/tr>\n
      .osfec-agent__actions<\/code>, .osfec-agent__action<\/code>, .osfec-agent__action-text<\/code><\/td>\ntel:<\/code> and mailto:<\/code> links<\/td>\n<\/tr>\n
      .osfec-agent__icon<\/code><\/td>\nInline SVG icon inside an action<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      The card is skipped entirely when the offer carries no agent name.<\/p>\n
      Admin<\/h2>\n
      The sync log screen prints a handful of classes of its own, styled inline: .osfec-status<\/code> with the modifiers
      \n--running<\/code>, --success<\/code>, --warning<\/code>, --failed<\/code>, --interrupted<\/code>, plus .osfec-result<\/code>, .osfec-message<\/code> and
      \n.osfec-event--error<\/code> \/ .osfec-event--warning<\/code> on event rows.<\/p>\n","protected":false},"excerpt":{"rendered":"
      CSS class map Every class the plugin renders is prefixed osfec- and follows BEM: block__element–modifier. The outermost element of every component also carries the bare .osfec\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_latwm_translated_slug":"","footnotes":""},"categories":[2],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","hentry","category-esti-to-wordpress"],"_links":{"self":[{"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":1,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/posts\/14\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.latw.ai\/pl\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}