Migrating Pages From Toyhouse

[DannyPageOfLight]

I have made a number of character profile pages on the character-hosting site Toyhouse, utilizing a flexible table code that displays well on both desktop and mobile. Here's a link to one of my character folders containing a several examples of how I utilized this table style (the Jeremy Clarke one particularly noteworthy due to the inclusion of a tab system in one cell). I've been moving a few characters from Toyhouse to a web site of my own making, and I want to be able to use the same flexible table style as I have for their profiles on the former site.

Toyhouse uses Bootstrap for their own style and script sheets, which is why I turned to Bootstrap myself in order to replicate the style. I can see they're not using the base sheets when I create a new web page with the exact same HTML I use there, attach Bootstrap's CSS and JS pages, and test the page, as the table is misaligned. I have also tried including Popper.

If there's someone with a much better understanding of these files who could look into this, does Toyhouse have their own custom version of Bootstrap's files that the HTML I use was structured more to operate with, or are their pages utilizing additional styles and/or scripts I would also have to copy over for the HTML to be read properly? Thanks for looking into this, and if you need me to provide any further information to properly help my case, I'll gladly do so.

[Jeanlaris]

Hi @DannyPageOfLight,

Toyhouse uses customized versions and overrides of Bootstrap along with specific global CSS declarations and sometimes scoped stylesheets for their layout components (like custom table structures and tab systems).

When you export or migrate pages, standard Bootstrap CDN files won't include those proprietary or site-specific overrides out-of-the-box. To fix the alignment and make your flexible tables render identically:

1. Inspect Toyhouse Styles: Use your browser's Developer Tools (F12) on the original Toyhouse page to inspect the specific CSS classes applied to your flexible table container and tab system.
2. Extract Custom CSS: Copy those specific CSS rules (often involving custom flex properties, custom padding, or specific table wrapper classes) into your own custom stylesheet (e.g., custom.css).
3. Load Order: Ensure your custom stylesheet is loaded after the main Bootstrap CSS link so your rules properly override or complement the base framework:

<link href="[https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css](https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css)" rel="stylesheet">
<link href="path/to/your/custom-toyhouse-overrides.css" rel="stylesheet">

[DannyPageOfLight]

Hi, @Jeanlaris,

I marked your response as the answer, but afterwards I realized that the code I've used for my Toyhouse profiles is simple enough that I could recreate the code for base Bootstrap using the available tutorials for grids and tabs. I made one attempt at this before realizing I was using outdated documents, as they were the ones linked to me on Toyhouse's forums back when I first made my character profiles.

Here is a web page I uploaded containing my current attempt, the previous attempt using outdated Bootstrap assets, and the original code created to run specifically on Toyhouse's custom version of the style sheet. The current version is more successful, though attempts to replace the "row" class with the "p-3" class on the upper flex-column section of the grid broke the alignment, which is why the upper left corner (top section when viewed on mobile) doesn't fully align with the rest of the grid.

Thank you for replying to my thread. I believe if I can get this rewrite fully streamlined, I can use the result to fully move character profiles properly to my Neocities site with just the base Bootstrap assets.