Troubleshooting — Ciketo HTML
Most problems in the HTML edition come from a path with the wrong number of ../, a class the stylesheet doesn’t have
yet, or an empty form endpoint.
The answers below cover those first, then the questions buyers ask most.
Problems you may hit
Section titled “Problems you may hit”The page looks unstyled.
The browser can’t find assets/css/style.css. Pages inside a folder (services/…, blog/…, legal/…) link to it as
../assets/css/style.css; a page you moved or created may have the wrong number of ../. 404.html looks unstyled
when you open it from disk, and that’s expected: its paths start at the site’s root, which works on a host or with
npx serve . (Going live).
An image doesn’t appear.
Check the path in src against the file in assets/images/: spelling, extension, and ../ in pages inside a folder.
File names are case-sensitive on most hosts even when they are not on your computer: Team.JPG is not team.jpg.
A class I added does nothing.
assets/css/style.css only contains the classes the site already used. Rebuild it with npm run build:css
(Making it look like your brand).
Text or a block at the top of Home stays invisible.
The Home title, the line under it and the cards around them start hidden (style="opacity: 0; …" with data-appear),
and the site script shows them. If you copied one somewhere without the script, or removed its data-appear, remove
the style too. The header clock also waits for the script (its invisible class).
The header is hard to read at the top of a page.
The page was copied from Home, Contact or 404, whose header is made for a dark photo: transparent with white parts
while the page is at the top (data-cover). On a page without such a photo, replace the whole <header>…</header>
with the one of a page that starts solid, in the same folder (about.html in the root folder; any service, post or
legal page in theirs), then mark the right menu link (Editing the site).
The menu, the accordion, the steps, the testimonials, the FAQ or the ticker stopped working.
assets/js/main.js or assets/js/config.js is missing, or an element lost a data-… attribute or an id when you
edited it. Open the browser’s developer tools → Console for the error, and compare the markup with the same element
on an untouched page.
The Blog shows only six posts.
That’s on purpose: the next six appear as the visitor scrolls to the end of the list. If they never do, the site script
isn’t running (see above), or the loading row under the list (data-load-more-sentinel) was deleted
(Editing the site).
The form says “Something went wrong”.
The form service rejected the submission or couldn’t be reached. Check formEndpoint in assets/js/config.js, then
open the developer tools → Network, submit again and read the service’s response. Web3Forms also needs
formAccessKey. Some services require you to confirm your email address before the first submission goes through.
The form shows “Thank you” but nothing arrives.
formEndpoint is empty, so the form is still in demo mode (the fields are logged in the browser console).
Clicking a link downloads a file or shows a directory listing.
The link points at a folder or lacks .html. Links in this template always end in .html.
A new service or post doesn’t show in a list.
It has a page but no card in that list: services.html and the accordion on Home for a service; blog.html, Home and
“Other Posts” for a post (Editing the site).
The share image or title is the old one.
Facebook, LinkedIn and X cache them. Use their debuggers to refresh, and check that the og:image URL uses your domain.
Questions
Section titled “Questions”Do I need Node.js or a build step? No, only to rebuild the stylesheet after changing the theme or using new classes. Everything else is editing HTML.
Can I use this template for a client? See License: that is the one place that answers it for your licence.
Can I remove the style guide, a page or the clock? Yes:
- the style guide: delete
style-guide.html; - a page: Editing the site;
- the clock: Editing the site.
Can the header clock show my office’s time instead of the visitor’s?
Yes, with one edit in assets/js/main.js. In initClock, add your time zone to the two Intl.DateTimeFormat
options:
new Intl.DateTimeFormat(locale, { hour: "2-digit", minute: "2-digit", hourCycle: "h23", timeZone: "Europe/Amsterdam" })new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric", timeZone: "Europe/Amsterdam" })Make the edit again if you replace main.js with a newer one.
Can I use it with WordPress, Webflow or a site builder?
Not directly: it is plain HTML and CSS. You can paste sections into a builder that accepts custom HTML, but the
interactions rely on assets/js/main.js.
Can I connect a CMS? See Editing without touching HTML for the options, including the Astro and Next.js editions built for one.
How do I update to a new version of the template?
CHANGELOG.md in the new release lists what changed. For a script or style fix, replacing assets/js/main.js and
assets/css/style.css is usually enough (run npm run build:css again if you added classes of your own). Page changes
are listed so you can apply them to your edited pages.
Can you customise it for me, or build my site? Yes. Marcframe, the studio behind this template, updates templates to your needs (brand, content, new pages and features), builds custom templates and designs new websites. Get in touch at marcframe.com/contact or hire us on Contra.
Something is broken and none of this helps. Support and updates: https://framebrick.co/support. Send the page, the browser, and the error text or a screenshot: it makes the answer much faster.