Sensation BLVD
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
Version One:
This version has compact cards with image headers. Good for smaller amounts of info -- card portrait will link out to a character page if wanted.
Version Two:
This version has similar styling to the setting page if you would prefer more information listed.
SAMMY HEART
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.
CHARACTER NAME
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.
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
The Setting
SANTA LUNA
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.
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
SANTA LUNA
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.
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
The Story
PART ONE
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.
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
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.
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.
Timeline
1960
1960
1960
1960
Alt Version:
If you have more information this may match the other sections a little better. Either way there are two versions you can choose from!
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.1960
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.1960
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.
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
Default Text
Muted Text
Secondary Text
Info Text
Success Text
Warning Text
Danger Text
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.