About Project

This is a mockup for a world page. You can use this CSS and the tabbed HTML that comes with it to add styling and extra info to your Toyhouse Worlds. If you don't want to use the HTML along with the style, you don't have to, however the HTML will not display properly without the CSS.

While this was designed for Worlds in mind, it will also work with user profiles and character pages. If you need help handling where to paste CSS, you can check this guide.

This CSS comes with a sheet that allows you to change the basic colors: the dark accent, the primary accent, and the light accent. The forum colors are also customizable, if you want a light vs. dark version. You can also change the other default bootstrap colors. All fonts and images can also be customized.

Note that other HTML layouts and CSS may not work correctly with this, but you can see how it displays, or make adjustements.

The Cast

HYACINTH DUSKWHISPER

he/they chaotic neutral arcane mage secretive

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus erat, vestibulum pretium justo at, aliquet sodales leo. Sed pharetra justo et nisi eleifend, quis tincidunt urna blandit. Etiam quis mi sagittis nunc luctus rutrum quis quis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In lacus ligula, commodo et nisl sed, suscipit iaculis nisl. Suspendisse non felis sed nunc faucibus interdum et sit amet massa. Suspendisse dapibus rutrum sem ac lacinia. Nam commodo augue libero, ac consequat nunc tincidunt non.

AURGRIMNIR IRONBLIGHT

he/him chaotic evil necromancer werewolf

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus erat, vestibulum pretium justo at, aliquet sodales leo.

The Setting

SETTING TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tellus erat, vestibulum pretium justo at, aliquet sodales leo. Sed pharetra justo et nisi eleifend, quis tincidunt urna blandit. Etiam quis mi sagittis nunc luctus rutrum quis quis urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In lacus ligula, commodo et nisl sed, suscipit iaculis nisl. Suspendisse non felis sed nunc faucibus interdum et sit amet massa. Suspendisse dapibus rutrum sem ac lacinia. Nam commodo augue libero, ac consequat nunc tincidunt non.

SETTING TITLE

The Story

PART ONE

Etiam lacinia a ex et tempor. Nullam ac vehicula est. Ut et quam augue. Pellentesque sit amet egestas nisl, sed fringilla ante. Aliquam erat volutpat. Curabitur et pellentesque felis. Vivamus accumsan ipsum eu enim finibus, nec convallis turpis tempor. Donec pulvinar sed orci non dapibus. Curabitur odio sem, ullamcorper in facilisis sollicitudin, condimentum non leo. Sed nisl sapien, egestas et ipsum eu, semper aliquam diam. Integer vel neque magna. Vestibulum mauris tortor, sodales pharetra libero quis, porta vulputate tellus. Pellentesque dictum orci eros, eget ornare dolor viverra ut.

PART TWO

Timeline

1960

HEADING

The Event occurs due to an unknown supernatural cause. Everyone goes through a life-altering experience with no clear memory of The Event. Some kids went missing, but were later found.

HEADING

The Event occurs due to an unknown supernatural cause. Everyone goes through a life-altering experience with no clear memory of The Event. Some kids went missing, but were later found.

1970

1980

HEADING

The Event occurs due to an unknown supernatural cause. Everyone goes through a life-altering experience with no clear memory of The Event. Some kids went missing, but were later found.

HEADING

The Event occurs due to an unknown supernatural cause. Everyone goes through a life-altering experience with no clear memory of The Event. Some kids went missing, but were later found.

1990

Style Guide

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

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

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

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