Previous | Next

Layout: Shadowbox

image preview | [info]tess041
image preview | [info]tess041a


Hey, guys! I've got a layout I'm super excited about today, and my first Generator layout in a little bit too! This layout is packed full of features, but there is also a static version for those of you who enjoy the look of it, but don't need all the extras.

This sliding sidebar layout features room for about information, a playlist, and player information, all packed into a compact module with sleek animated transitions for smooth clicking. I will say, this layout may not be very mobile friendly, I'm so sorry about that! Sometimes you just gotta do something a little artsy just for fun, y'know? Enjoy! ♥

Layout Coding: Sliding sidebar

Layout Coding: Static sidebar

Installation Guide

♡ Make sure you have a website in your profile page.
♡ Go to Basics and choose S1 for your style system, then save.
♡ Go to Look and Feel, choose Generator for all page views, then save.
♡ Go to Custom Options and paste the layout code, then save. Make sure you've done a replace all on the following with your information:
PAGETITLE for your journal title
ICOURL for your tab icon
TRANSPARENTIMG for your sidebar image
JOURNAL TITLE for your sidebar title
BLURBHERE for your sidebar blurb

GIFHERE about section image
ABOUT NAME about section title
ABOUTHERE about section text

YTURL song url
SONGTITLE song title
SONGARTIST song artist
(repeat these as needed)

NAME. through PB. for your ooc info

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

Open Sans - Page text
Dosis - Header text

255,255,255 - Light tones for slide nav buttons
#fff - Page/entry background, sidebar backgrounds, playlist header, comment link text
#8FA5BC - Main color (sliding)
#BC8FB4 - Main color (static)
#000 - Comments hover text
0,0,0 - All dark tones and shadows (semi-transparent rgba value)

https://i.imgur.com/d7lnawy.png - home link
https://i.imgur.com/xCP54zJ.png - profile link
https://i.imgur.com/pfwlNPF.png - friends link
https://i.imgur.com/eHVxvC4.png - calendar link
https://i.imgur.com/P0FOs2G.png - credit link
https://i.imgur.com/F148mbs.png - username
https://i.imgur.com/QK923r6.png - communityname
https://i.imgur.com/99Wvqei.png - friends only
https://i.imgur.com/wavxHky.png - private
https://i.imgur.com/Y4tIPuo.png - group locked

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!


Nov. 27th, 2017 08:35 pm (UTC)
Omg this is incredible!!!
Nov. 28th, 2017 02:31 pm (UTC)
Heee, tysm! ♥
Nov. 29th, 2017 10:03 pm (UTC)
Oh my goodness! THIS IS AMAZING!!! AHHH. I'm so excited to use it. <333 You're incredible. So beautiful!
Dec. 14th, 2017 08:43 pm (UTC)
EEEE ty ty!! ♥
Dec. 2nd, 2017 10:19 pm (UTC)
eeee, i'm already using one of your generator layouts for [info]starseer but i'm going to change it to this one ASAP! so mad i ended up unable to join your patreon this year, cursed finances.
Dec. 14th, 2017 08:44 pm (UTC)
Heeee, tysm!! ♥ (Aw, it's okay! It'll be there!)
Dec. 9th, 2017 02:23 am (UTC)
I pretty much never use s1 layouts, but I love this so much I might just have to make an exception!
Dec. 9th, 2017 02:47 am (UTC)
PS I know you said it might not be mobile friendly but it actually works just fine on my iPhone :)
Dec. 11th, 2017 05:57 pm (UTC)
Ohhh, that looks awesome! ♥
Dec. 12th, 2017 12:29 am (UTC)
Thank you!
Dec. 10th, 2017 09:50 pm (UTC)
I'm using this on a few of my journals and I've noticed that some of my in-entry codes aren't displaying correctly, which I suspect is because theyr are using tables, but even though they should center, the tables seem to be aligning to the right of the entry.. see here for an example. I know I should be using gifs, but I've been too lazy to recode all my entry headers, so I'm wondering if there is an easier solution to fix this.

This is the code I use for the headers on this particular page, if that helps!

Dec. 14th, 2017 08:50 pm (UTC)
Yeah, tables will ruin a Generator layout faster than anything LOL. I recoded your header into a blank for you so you can reuse and replace as needed!

<lj-raw><div style="width:455px;margin:0 auto;text-align:center;">

<img src="URL" style="width:150px;margin-right:-20px;border:4px solid #FFF;box-shadow:1px 1px 1px #000;">

<img src="URL" style="width:160px;margin:2px;border:4px solid #FFF; box-shadow:1px 1px 1px #000; transform:rotate(-5deg);-webkit-transform:rotate(-5deg);">

<img src="URL" style="width:150px;margin-left:-24px;border:4px solid #FFF;box-shadow:1px 1px 1px #000;">

<div style="font-size:30pt;color:#c9d8e7;line-height: 35px;text-shadow:1px 1px 1px #000; text-align:center;margin-top:15px; border-top:2px solid #e2e2e2;">


</div><span style="display:none"><lj-cut></span></lj-raw>
Dec. 14th, 2017 10:28 pm (UTC)
<33 thank you for enabling my laziness ;) I totally could have recoded it but I didn’t wanna lol
Dec. 13th, 2017 04:44 am (UTC)
I need to use this for all the characters now.
Dec. 14th, 2017 08:44 pm (UTC)
Heeee, I FEEL YA!
Jan. 6th, 2018 07:32 am (UTC)
WHOA. You are a genius. Will definitely use and credit sometime in the future.
Jan. 15th, 2018 07:07 pm (UTC)
Aw, thank you so much! ♥
Jan. 25th, 2018 09:42 am (UTC)
Before I commit to recoding ALL my character journals, does the sidebar main image have to be edited differently or fancy before use for it to work correctly?
Jan. 25th, 2018 05:20 pm (UTC)
It does need a transparent background to look the way it does in the demo, but it won't break if you use regular images or gifs! At most you may find yourself wanting to crop the bottom off an image in some cases if it takes up too much height and makes itself super teeny.

If you don't know how to do transparent images (or just don't want to because it's definitely pretty time consuming) you can filter Google's image search by color, and there's an option for "transparent" and that's usually the fastest way to find nice transparent images ready-made of your PBs.

Once you're in the image search of whatever you're looking for you'll want to click Tools and then Color and choose Transparent; here's an example!

If an image ever looks odd to you (this is especially true if you decide not to use transparent images) you'll want to edit this (most likely to 100%):

.slide-inner img{
Feb. 5th, 2018 04:45 am (UTC)
With a bit of fiddling, I'm using it here :)