Panels Bundle

Pinky

Info


Created
2 months, 2 days ago
Creator
Pinky
Favorites
240

Profile


Panels Layout

Character Previews

User Previews

User Simple

Live Preview

User Box

Live Preview

User Float

Live Preview

Bonus: Collab HTML

HTML that was designed by other users & edited to work with my Panels CSS.
I did not design/create the original HTML, I only did the edits to make them work properly with this CSS.

Details

  • CSS works on user profiles & character profiles.
  • User CSS/HTML is compatible with default TH sections (featured comments, recent characters, etc)
  • CSS allows you to customize...
    • Background image and/or color
    • Primary highlight color (for links & butttons)
    • TH header bar color
      • Can set both the background & font color
    • TH navigation bar color
      • Can set both the background & font color
    • Content area body color & font
    • Bootstrap colors (faded background, secondary color, danger, warning, etc)
    • Width of the content area (default is 1250px)
    • Font family + font size
      • import a custom google font
  • Includes switches for
    • Choose navbar icon shape (square, circle or arch)
    • Choose which side of the screen the navbar displays (left or right)
    • Choose the font case for the header case/navigation links (uppercase, lowercase or default)
    • Corners can be sharp or round (4 options)
    • Background image can be a pattern or a full size image
    • Less commonly used sidebar links can be turned on/off
    • Recent images on character pages can be turned on/off
    • Navbar link icons can float to the right, or have their default position on the left
    • Modify the header color theme (see customization notes for more details)

Customization Tips

  • The header blocks in the layout are based off the primary color. You can swap this to a more muted feel with the $title_color switch.
    $title_color by default is set to primary, you can switch it to faded
  • If you want the toyhouse header to sit directly on the backgroumd, set the header color to transparent
  • If you want the background color to be slightly transparent, use the rgba() function
  • If you want the navbar to be a faded version of the primary color, use the rgba() function with the $primary color
    • $navbar: rgba($primary, .125); - Example