$5 | Sleek CSS

ashecodes

Info


Created
2 years, 10 months ago
Creator
ashecodes
Favorites
145

Profile


$5 Sleek CSS | Premium CSS

Mobile Friendly Custom Colors Premium CSS
  • If you end up using this code, please leave a comment in my thread!
  • Make sure you understand how to edit CSS on Toyhouse!
  • Custom Colors can be swapped out easily.
  • A credit link back to my account would be appreciated!
  • Codes are available via Kofi, if this doesn't work, you may DM me.

Format & Style Examples

Sidebar & Main Content

The sidebar and main content share the same background color (white on default), but can be changed individually to custom colors if you prefer. The sidebar links are the same color as the main page text and hover to match the primary accent - again these colors can be changed if you prefer.

Main Layout Background

The background color is set to a muted grey - you can easily change this or add a background image of your choice instead.

Main Text & Links

This is the default text color and this is the muted text color. Links have the primary accent color. These colors can be changed if you prefer.

Character Thumbnails

Character thumbnails are slightly rounded and fade to grayscale when you hover over them. Character link buttons have been removed for a more minimalistic look.

Card Colors

The default card matches to the background color of the content, the faded card is a muted grey to match the default button color, and there is a secondary card option that is the inverse colors (text color for background and background as text). You can also use any of the bootstrap colors (e.g. primary, info, success, etc.) to change the card background if you wish (add 'bg-primary' to the card class for example).

Button, Badge, & Progress Bar Colors

All buttons, badges, and other accents that use the default bootstrap colors have been recolored to custom colors - all of these can be easily changed if you prefer.

Card Header

Default Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.

Card Header

Faded Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.

Card Header

Secondary Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.

Button, Badge, & Progress Colors

Light Badge Default Badge Primary Badge Info Badge Success Badge Warning Badge Danger Badge

Light Button Default Button Primary Button Info Button Success Button Warning Button Danger Button Default Button Primary Button Info Button Success Button Warning Button Danger Button
Primary Progress
Info Progress
Success Progress
Warning Progress
Danger Progress
Default Progress

Info Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.

Success Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.

Danger Alert

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien.