Troubleshooting — Tustel HTML

Most problems in the Tustel 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

The page looks unstyled. The browser can’t find assets/css/style.css. Pages inside a folder (portfolio/…, blog/…) 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: Cover.JPG is not cover.jpg.

A photo is cropped, or a card has the wrong shape. Project cards, covers, galleries and the photo of a post take the shape written in the HTML next to the image, not the shape of the file. When you replace a photo with one of another shape, write its width and height there too (Editing the site). Photos in a fixed frame (the slideshow, the photo band, the portraits…) are always cropped to fill it.

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).

A title, a block or a whole section stays invisible. Most texts and blocks start hidden (style="opacity: 0.001; …" with a data-appear attribute), and the site script shows them as the page loads or as they scroll into view. If you copied one somewhere without the script, or removed its data-appear, remove the style too. If nothing appears on any page, assets/js/main.js isn’t loading: check the <script> tags at the end of the page.

The header disappears, or doesn’t show on Home. On every page except Home and the 404 page, the header hides while you scroll down and comes back as soon as you scroll up. On Home it lies over the photo at the top and scrolls away; a solid one appears when you scroll back up past the client logos (Making it look like your brand). If you removed the client logos, see Editing the site.

The header is white and hard to read at the top of a page. The page has a section marked data-header-cover, copied from Home or the 404 page: the header then lies over it in white. Keep a dark photo there, or remove the attribute.

The menu, the slideshows, the services, the Catalog / List switch or the tickers 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.

Nothing moves: the slideshows, the tickers, the counters. The visitor’s system (yours, if you see it) has “reduce motion” switched on, and the site honours it (Making it look like your brand). The slideshows and tickers stop, and the counters show their final number at once.

Works or the Blog shows only six items. That’s on purpose: more appear each time the visitor scrolls to the spinner under the list (four at a time on tablets and phones). If they never do, the site script isn’t running (see above), or the spinner under the list (data-paged-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).

“Book a call” opens cal.com. That’s the demo’s placeholder: replace https://cal.com/ with your own booking page in every file (Editing the site). To send it to the Contact page instead, link contact.html (../contact.html in portfolio/ and blog/, /contact.html in 404.html) and remove target="_blank" from those links.

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 project or post doesn’t show in a list. It has a page but no card in that list: portfolio.html, the portfolio on Home and “Other Projects” for a project; blog.html and “From the journal” 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

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 a section? Yes:

• the style guide: delete style-guide.html;
• a page: Editing the site;
• a section: delete its <section>…</section>, for example the full-screen photo with a call to action on Home and About (“Creating Visual Stories That Inspire”). On Home, the client logos also tell the header when to come back (Editing the site).

Can Works or the Blog show every item at once? Yes: raise both numbers on the list, for example data-page-size="24" data-small-page-size="24", and remove the max-lg:hidden and lg:hidden classes from its cards. With no more items than that, the spinner doesn’t show.

Can I change the fonts to my brand’s? Yes: Making it look like your brand.

Does the site need JavaScript? Yes, for what moves and for the interactive parts: assets/js/main.js plays the texts and blocks that appear, the header, the slideshows, the tickers and the counters, and runs the Catalog / List switch, the services, Works and the Blog loading more, and the form. Without it, the texts and blocks that appear on load or on scroll stay hidden. Every word and link is in the HTML, so search engines read the whole site.

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 or changed the theme). 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.