Previous | Next

Layout: Shadowbox


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



Information

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

SLIDING SIDEBAR ONLY
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!

FONTS
Open Sans - Page text
Dosis - Header text

COLORS
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)

IMAGES
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!

Comments

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;">

TITLE HERE

</div>
</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! ♥