Setting CSS & HTML Bundle

ashecodes

Info


Created
1 year, 10 months ago
Creator
ashecodes
Favorites
496

Profile


$16 | Top Header All-in-One Setting CSS & HTML Bundle

Mobile Friendly Custom Colors CSS & HTML
  • If you use this code, please leave a comment in my thread!
  • Make sure you understand how to edit HTML & CSS on Toyhouse!
  • Please don't remove the credit link You may alter it.
  • Codes are available via Kofi, if this doesn't work, you may DM me.

INFORMATION

This is a CSS & HTML bundle that was created for use on Worlds & Setting Pages. It will still work fine for account CSS, folder pages, and character profiles if you choose. Feel free to use the CSS & HTML on whatever Toyhouse pages you prefer.

There are Nine Premade Themes and Five HTML Codes included in the bundle. There are also two pre-existing bonus HTML codes that have been styled to work with the CSS: RPG Sheet & Tabbed RPG. The premade themes can be used as is or you can use one as a starting point and further customize it to your specification.

This was a huge project and a labor of love, I'd really appreciate any favorites and comments if you enjoy this bundle. And if you run into any issues while using it, please don't hesitate to contact me -- I'm happy to try and help you out or fix anything that seems to be broken.


CSS STYLE GUIDE

This will show you examples of all of the custom styling including live previews of premade themes.

Note that an HTML file for this style guide will come with the CSS if you wish to check your custom changes against it.

LIVE EXAMPLES

Here are some worlds with alternate styles to show how the CSS can be customized to different aesthetics. All of these preset styles will come in the bundle. You can check the style guide linked in a tab on each preview page to see the full range of custom colors and styles.

CUSTOMIZATION

This CSS can be mostly customized to your preference. You can change colors, images, and custom fonts as you wish. If there are elements you would like further customized to your specifications, you can contact me for a custom quote, but otherwise I cannot make additional changes for you. Below are the examples:

FONT STYLES & HEADERS

There is a body font & and a header font you can choose separately. Make sure you import the Google Font correctly if you choose to change the fonts that come pre-selected with the layout.

Main text color & style

Bold text color & style
Italic text color & style

Header One

Header Two

Header Two Alt.

Header Three

The default headers have been styled to be slightly larger than the default, and h2 has an alternate style with the primary color.

BASIC COLORS

Primary Text

Primary Button
Primary Badge

Default Text

Default Button
Primary Badge

Muted Text

Light Button
Light Badge

Secondary Text

Secondary Button
Secondary Badge

Info Text

Info Button
Info Badge

Success Text

Success Button
Success Badge

Warning Text

Warning Button
Warning Badge

Danger Text

Danger Button
Danger Badge

The first three colors are the basic layout colors that will recolor your CSS. The last set are the basic bootstrap colors re-colored. The main page color, text color, and white accent can also be changed if you would prefer to style it with a darkmode look instead.

BACKGROUND & HEADER IMAGES

You can input your own custom image URL for both the background image and header image. Please make sure that they are large enough so they scale correctly.

CHARACTER GALLERY

This is a preview of how the character gallery will display on the folder page. The portraits are larger than the default and there are four to a row.


CUSTOM HTML

As stated, this CSS is bundled with custom HTML. Please note that if you try to use the HTML without this CSS it will not display correctly. You can fiddle if you wish to restyle it, but I cannot help if you choose to use it separately. There is a Tabbed HTML Layout for use on a main World, World Page, or Folder Page, Folder HTML for extra organization & info, a Setting Wiki for either a World Page or Folder and a matching Character Profile, with both a tabbed version and a basic version if you choose to use the layout for your characters.

Additionally, there are various HTML Snippets that you can use separately or in combination to further customize the layout of various pages on your world, or on folders, profiles, etc.