← DocumentationRecommended structure
Create separate index.html, inner.html, contact.html, and 404.html files under design/my-design/, with assets in css/, js/, images/, and fonts/. Do not mix this directory with another project or demo theme. Use root-relative asset URLs such as /design/my-design/css/style.css, /design/my-design/js/main.js, and /design/my-design/images/logo.svg. Paths like css/style.css, ../images/logo.png, or a developer's local disk path fail on nested URLs such as /en/services/item.html.
Replacing static HTML
Put [#title#], [#description#], and optionally [#keywords#] in the head. A logo link can use [#home_link#], which already returns the current language's complete home URL. Do not append another page name to it; choose an Internal Link field for other internal destinations. A header usually contains [#menu_top#] and [#lang_menu#], followed by [#breadcrumbs_main#] and [#H1#] before the body. Content positions may include [#content#], [#services#], and [#contact_banner#], with [#footer_links#] and [#social_footer#] in the footer. A label's name describes its location, not a fixed module type.
Activation and instances
Select design/my-design under Settings → General Settings, save it, and then assign the appropriate HTML files to home and inner pages in Site Structure. Only directories inside design are selectable. Create separate instances: main and mobile menus for menu_top/menu_mobile, a slider for slider_home, breadcrumbs for breadcrumbs_main, Repeating Blocks for services, a Content Block for contact_banner, and Social Buttons for social_footer. Give them understandable names; their technical IDs do not need to change for styling.
Keep module files in their respective directories, for example modules/menu/templates/my-design/top.html, modules/slider/templates/my-design/home.html, modules/repeating_blocks/templates/my-design/services.html, and modules/social_buttons/templates/my-design/footer.html. The my-design folder inside each module is merely a grouping convention. A template from another module type will not appear in the selector.
Marking up a repeating block
After <!-- @wrapper -->, place a grid container containing %items%. After <!-- @item -->, provide a separate article or div for each card with %image%, %title%, %description%, %link%, and %button%. A single contact banner can use one template with %image%, %title%, %text%, %link%, and %button%. Variable keys must match fields of the selected block. Without a per-item container, headings, text, and images may become separate CSS Grid cells.
Binding, responsiveness, and acceptance
Open a page in Site Structure: the CMS scans its effective template and lists the labels. Bind each to an editor or module instance. Common menus, footer elements, and social buttons can be bound on a parent and inherited; override unique content on the child page. The CMS does not rewrite the design CSS. Check desktop, tablet, and mobile layouts; the mobile menu, slider and gallery, long translated headings, keyboard navigation, alt text, form labels, and contrast.
Check CMS-generated menu, breadcrumb, and language-switcher links separately from links stored in block fields. Use the Internal Link field and output %link% for the latter; the CMS supplies the language and SEO URL format. Never concatenate index.html and a page name manually. Before acceptance, confirm no unresolved [#...#] or %...% tokens, HTTP 200 for assets, correct title/H1/menu for all languages, URLs in the chosen SEO mode, HTTP 404 for a missing page, and no horizontal overflow on mobile. Create a portable backup.
This path helps turn a finished HTML layout into a FoxCoreCMS design without rewriting the core.
1. Prepare the design
Create a separate design/<name>/ directory for HTML templates and assets. Do not modify another active design while preparing the new one. Fix CSS, JavaScript, font, and image URLs so they work on nested pages, not just the home page.
2. Replace static data
Use system labels for the site name, SEO fields, H1, language switcher, navigation, and content. Render search, forms, menus, blog, gallery, and repeated sections through their modules. Define one page label and the intended module instance for each position. Page labels look like [#name#]; variables inside a module file template look like %name%.
3. Configure modules
Activate the design in settings, create the required module instances, and assign file templates from modules/<id>/templates/. Repeating blocks use @wrapper and @item sections, with %items% inside the wrapper. Single blocks use named fields. Bind the instances to pages and fill the language tabs.
4. Verify the result
Check responsive layout, nested URLs, active menu states, images, forms, pagination, all language versions, SEO, and the 404 page. Public HTML must not show unresolved labels. If a module is empty, inspect its active status, template, data, and binding. If an image is missing in only one language, inspect translated fields and the shared image. If an asset works only on the home page, fix its relative URL.
Clear the cache after acceptance and retest important pages as a regular visitor.