Layout: Beachy Keen!

image preview | [info]tess044


Hey guys! Who makes a beach-themed layout in the middle of winter? Me, apparently LOL. It's that time... That's right, the last layout of the year. Does anyone else feel like 2017 went by really fast? (Maybe I'm just willfully blocking some things out.)

Thank you all for a wonderful start on Patreon and being so wonderful and supportive in the comments; I always enjoy talking to you guys! I can't wait to start rolling out content for 2018, so keep an eye out for a start of the year updates post during the first week of the new year!

The final layout of the year, Beachy Keen!, has a fun contained header because I realized I don't really do those very often. Additionally, this layout uses the sidebar links list to create a custom floating top nav under the header. Need options? I got your back! Choose LEFT sidebar for the demo version's page setup, RIGHT sidebar for a no sidebar version that retains the custom links list under the header, or ONE COLUMN if you don't need any of that! Enjoy, and I'll see you all in 2018! ♥

Layout Coding

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:
Layout Type: Two Column (Sidebar on Left) for standard setup, Two Column (Sidebar on Right) for no-sidebar setup WITH links, or One Column for no-sidebar setup WITHOUT links
Disable customized comment pages for your journal: Yes
Link text to read comments: 1 // # This step is important!
Navigation link names: Recent/Archive/Friends/Profile
Fill in sticky note if desired.
Fill in custom sidebar module if desired.
Person to credit if you have an individually created layout: Layout by Tessisamess
URL to link the credit to: http://tessisamess.insanejournal.com/
Disable any sidebar elements you don't want in the dropdowns if desired; all available sidebar elements are active on the demo.
Custom stylesheet: Input the CSS provided and save!

Editing Guide

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

Change height:400px; to your preferred size and your header will resize! After this, you may want to change padding:0 0 120px 0; to resize the gap between the header and the entries; add or subtract however much you have added or taken away from the header height. You will want to do the same to top:430px; for your links list.

This does not apply to One Column as it has no links list, and you should be able to resize just your height:400px; header height to change the header.

Lato - Page text
Vincentia - Header text

https://i.imgur.com/04mJw4n.jpg - Header background
https://i.imgur.com/8rrlf2E.png - Lock & user icons
https://i.imgur.com/4HDm2vx.png - Add comment icon
https://i.imgur.com/CqDacZM.png - View entry icon
https://i.imgur.com/brD8WR4.png - Edit entry icon
https://i.imgur.com/nSm7Sij.png - Edit entry tags icon

#fff - Page background, header text, some calendar elements
#f3b79e - Top nav border hover, entry links hover and tags, some calendar elements, tagslist section header, layout credit
#111 - Page text
#009492 - Headings, link hover, entry links
#000 - Non-entry links, some calendar elements
0,0,0 - Header text shadow, all borders, date (semi-transparent rgba value)

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!


(will be screened)
(will be screened)
Identity URL: 
Don't have an account? Create one now.
No HTML allowed in subject
Notice! This user has turned on the option that logs your IP address when posting.