{"id":23,"date":"2026-09-16T10:28:32","date_gmt":"2026-09-16T10:28:32","guid":{"rendered":"https:\/\/docs.latw.ai\/uncategorized\/styling\/"},"modified":"2026-09-16T10:28:32","modified_gmt":"2026-09-16T10:28:32","slug":"styling","status":"publish","type":"post","link":"https:\/\/docs.latw.ai\/pl\/esti-to-wordpress\/styling\/","title":{"rendered":"Styling"},"content":{"rendered":"

Styling without touching templates<\/h1>\n

The plugin ships one stylesheet, assets\/css\/frontend.css<\/code>, enqueued as osfec-frontend<\/code>. It loads on the offer archive,
\non single offers, and wherever the shortcode or the Offers block appears.<\/p>\n

Its design intent: inherit the theme, impose nothing.<\/strong> Colours, widths and typefaces come from the theme’s global
\nstyles, so on a block theme the offer pages already look like the rest of the site. Each value carries a fallback for
\nclassic themes that expose no global styles.<\/p>\n

Most of what people want to change is reachable through custom properties, without overriding a single rule.<\/p>\n

Custom properties<\/h2>\n

They are declared on the .osfec<\/code> wrapper, which every component the plugin renders carries.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nFalls back to<\/th>\nUsed for<\/th>\n<\/tr>\n<\/thead>\n
--osfec-ink<\/code><\/td>\ntheme contrast<\/code>, #111111<\/code><\/td>\nBody text<\/td>\n<\/tr>\n
--osfec-muted<\/code><\/td>\ntheme accent-4<\/code>, #686868<\/code><\/td>\nLabels, secondary text<\/td>\n<\/tr>\n
--osfec-soft<\/code><\/td>\ntheme accent-5<\/code>, #f7f7f5<\/code><\/td>\nSubtle backgrounds, badges<\/td>\n<\/tr>\n
--osfec-surface<\/code><\/td>\ntheme base<\/code>, #ffffff<\/code><\/td>\nCards and panels<\/td>\n<\/tr>\n
--osfec-line<\/code><\/td>\ntheme accent-6<\/code>, rgba(17,17,17,.18)<\/code><\/td>\nBorders and separators<\/td>\n<\/tr>\n
--osfec-accent<\/code><\/td>\ntheme contrast<\/code>, #111111<\/code><\/td>\nButtons, active states<\/td>\n<\/tr>\n
--osfec-on-accent<\/code><\/td>\ntheme base<\/code>, #ffffff<\/code><\/td>\nText on the accent colour<\/td>\n<\/tr>\n
--osfec-wide<\/code><\/td>\ntheme wide size, 1340px<\/code><\/td>\nMaximum width of a component<\/td>\n<\/tr>\n
--osfec-content<\/code><\/td>\ntheme content size, 645px<\/code><\/td>\nReading width of the description<\/td>\n<\/tr>\n
--osfec-gutter<\/code><\/td>\ntheme spacing preset 50, 1.5rem<\/code><\/td>\nHorizontal padding<\/td>\n<\/tr>\n
--osfec-radius<\/code><\/td>\n16px<\/code><\/td>\nCorner radius of cards and panels<\/td>\n<\/tr>\n
--osfec-radius-sm<\/code><\/td>\n10px<\/code><\/td>\nCorner radius of inputs and small elements<\/td>\n<\/tr>\n
--osfec-columns<\/code><\/td>\n3<\/code><\/td>\nGrid columns, set by the columns<\/code> attribute<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Rebranding in a few lines<\/h2>\n

Put this in Appearance \u2192 Customize \u2192 Additional CSS<\/strong>, or in your child theme’s stylesheet. Target .osfec<\/code>, which is
\nwhere the properties are declared:<\/p>\n

.osfec {\n    --osfec-accent: #0f5132;\n    --osfec-on-accent: #ffffff;\n    --osfec-soft: #f2f7f4;\n    --osfec-line: rgba(15, 81, 50, .2);\n    --osfec-radius: 4px;\n    --osfec-radius-sm: 4px;\n}<\/code><\/pre>\n
Narrower offer pages, without touching the theme’s own width:<\/p>\n
.osfec {\n    --osfec-wide: 1100px;\n    --osfec-content: 620px;\n}<\/code><\/pre>\n
Dark cards on a dark theme:<\/p>\n
.osfec {\n    --osfec-surface: #16181c;\n    --osfec-soft: #1f2228;\n    --osfec-ink: #f2f2f2;\n    --osfec-muted: #a8adb5;\n    --osfec-line: rgba(255, 255, 255, .16);\n}<\/code><\/pre>\n
Loading order and specificity<\/h2>\n
The plugin stylesheet is enqueued as osfec-frontend<\/code>. A theme stylesheet usually loads before it, which means a plain
\n.osfec-card { \u2026 }<\/code> in the theme can lose to the plugin’s own rule.<\/p>\n
Reliable ways round it, in order of preference:<\/p>\n
    \n
  1. Override the custom properties.<\/strong> They always win, because the plugin’s rules read them.<\/li>\n
  2. Add specificity<\/strong>: .osfec .osfec-card { \u2026 }<\/code> beats the plugin’s single-class selector.<\/li>\n
  3. Enqueue your CSS after the plugin’s<\/strong>, declaring a dependency:<\/li>\n<\/ol>\n
    add_action( 'wp_enqueue_scripts', function () {\n    wp_enqueue_style(\n        'my-theme-offers',\n        get_stylesheet_directory_uri() . '\/offers.css',\n        array( 'osfec-frontend' ),\n        '1.0'\n    );\n}, 20 );<\/code><\/pre>\n
    !important<\/code> is a last resort; the buttons already use .osfec .osfec-button<\/code>, so a bare .osfec-button<\/code> rule of yours
    \nwill not win.<\/p>\n
    Dropping the plugin stylesheet entirely<\/h2>\n
    If you are styling the offer components from scratch, dequeue it:<\/p>\n
    add_action( 'wp_enqueue_scripts', function () {\n    wp_dequeue_style( 'osfec-frontend' );\n}, 20 );<\/code><\/pre>\n
    Two consequences: the layout is then entirely yours, including the gallery, whose slides are positioned by CSS \u2014 the
    \nscript only moves the track and updates the counter.<\/p>\n
    Widths and alignment<\/h2>\n
    .osfec<\/code> caps itself at the theme’s wide size plus a gutter on each side, so an offer page lines up with a wide-aligned
    \nblock in the theme. The shortcode and block variant (.osfec.osfec-offers<\/code>) drops its own side padding, on the
    \nassumption that the section it is dropped into already brings one. If your list looks inset or flush by one gutter too
    \nmany, that pair of rules is why.<\/p>\n
    Responsive breakpoints<\/h2>\n
    Three breakpoints are built in and are worth matching in your own overrides:<\/p>\n