Slide Out

cheeriko

Info


Created
4 years, 5 months ago
Creator
cheerikola
Favorites
147

Profile


Please read before purchasing!
  • Premium is needed to use this theme, this is a CSS and only premium members can use CSS.
  • This does not come with raw SCSS/CSS. You will only get an @import link.
  • This can be used on any of the following pages - users and characters.
  • Pretty customizable! Please see the options below for more information.

A super clean CSS with a lot of customization options! Also comes with the very old version (though I do not recommend using it > ~ < /)

Upon purchase, you will receive an instant download to a ZIP file containing 2 customizable scss in plain .txt and .scss files.

A modified version of Balance Lite was used for the Character Profile.


Options

Font Import

This must look like the old import! Toyhou.se will not accept the new import style from google fonts.

New Import:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Varela+Round&display=swap');

Old Import (This is what it needs to look like):
@import url("https://fonts.googleapis.com/css?family=Varela+Round|Montserrat:400,500");


$font-family-display
Font for page headers and the navbar brand link
$font-family-body
Font for everything else

$primary-accent
Main color used for buttons, links, etc.
$secondary-accent
Color used for some other bootstrap colors

$content-bg-color
Background color of the main content
$content-txt-color
Text color of main content

$content-faded-bg-color
Faded background color
$content-muted-txt-color
Muted text color

$content-border-width
Border width for everything
$content-border-color
Border color for everything
$content-border-radius
Border radius for everything

$btn-txt-color
Color of the texts in all buttons
$background-color
Color of the actual background behind the content containers

$container-bg-color
Background color of the main content containers

$container-border-width
Border width for everything
$container-border-color
Border color for everything
$container-border-radius
Border radius for everything

$container-padding-sm
Container padding on mobile
$container-padding-md
Container padding on desktop
$container-margin-y
Margin between containers

$custom-container-toggle
Toggles the container styles for the custom text container
$custom-container-padding
Padding for custom text container
I separated the container's styles from the content to allow you to emulate the original's look (i.e. no actual content background - just spaced out content!)

$nav-a-link-color
Navbar icon link color
$nav-a-link-hover-color
Navbar icon link color on hover

$sidebar-link-color
Sidebar link color
$sidebar-link-hover-color
Sidebar link color on hover
$sidebar-blurb-txt-color
Color of the blurb's text
$sidebar-border-color
Color of the sidebar's dividers

$sidebar-slide-toggle
Toggle the slide in/out function for the sidebar

$sidebar-bg-color
Color of the sidebar's background
$sidebar-image-fade-opacity
How much the sidebar's background should fade on hover - the higher the number, the more opaque the image will be

%sidebar-header-bg-image
Sidebar's fancy header's background image and styles

$character-header-toggle
On/Off/Tags
If off, it will remove the header on the character's profile
If 'tags', it will only show the tags in the header
$character-gallery-toggle
If off, it will remove the gallery on the character's profile

$sidebar-link-toggle
Built in sidebar link toggles! Now you don't have to worry about doing it yourself :)