Previous | Next

Layout: Headliner

image preview | [info]tess014


Hey guys! I'm not set to post a free layout until next week, but I'm so excited I just had to post it early, and I've decided to do an extra layout this month! Why am I so excited? Because you guys are great, and I'm just $39 away from hitting my second monthly goal!

What does it mean for us to get to the second goal? Well, once I do, for every month that I earn $500/mo I'll be posting MORE free layouts, MORE free codes, HTML page codes and/or Tumblr codes, and a tutorial EVERY month! All right here in my free posts, as well as continuing to fulfill all monthly rewards for subscribers on Patreon. Don't know what those rewards are? You can go to my Patreon to read all about it!

Thank you all so much for your continued support in the comments, for using my work, and of course for subscribing on Patreon. I couldn't be doing any of this without you guys!

I should probably talk about the layout now, huh? Headliner is made to match the biosheet of the same name, and features a large header with auto-centering content for long or short titles, a wide content area, and THREE page setups to choose from (left sidebar, right sidebar, and no sidebar.) Each entry features a top centered icon to pin it to the content area, and on your Friends page you can hover this for the poster information. Enjoy! ♥

Layout Coding

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, 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), One Column, or Two column (Sidebar on right)
Disable customized comment pages for your journal: Yes
Navlink titles: Recent, Archive, Friends, Profile
Link text to leave a comment: Comment
♡ Fill in sticky note if desired.
Display of tags in sidebar: List
Show tag count in hierarchical list? Yes/No
♡ Order your sidebar as desired! Blurbs are set to display your image(s) as rounded.
Person to credit if you have an individually created layout: Layout by Tessisamess
URL to link the credit to: http://tessisamess.insanejournal.com/
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!

HEADERIMG - Header background
yourname - Top left header name
initials - Center header monogram

Lato - Page text
Playfair Display - Header text

#fff - Header text/links and content background color
#eee - Blockquote and sticky note background
#ddd - Entry border and sidebar links border
#add7c9 - Headings, entry links, entry footer links, image borders
#999 - Date color, tags link color, sidebar links
#333 - Bulk text color

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!


Aug. 3rd, 2017 02:52 pm (UTC)
Well. This is beautiful. As usual. ♥
Aug. 3rd, 2017 08:07 pm (UTC)
Eheheh, thank you! ♥
Aug. 3rd, 2017 03:12 pm (UTC)
Aug. 3rd, 2017 08:07 pm (UTC)
YASSS, SAME HAHA. I'm glad you like it! ♥
Aug. 3rd, 2017 07:51 pm (UTC)
This is perfect! I'm so glad you decided to make a layout to match the biosheet! It's amazing!
Aug. 3rd, 2017 08:08 pm (UTC)
Aw tysm! ♥ As soon as I posted the bio I was just like "...dammit. I know what I'm doing next."
Aug. 3rd, 2017 10:18 pm (UTC)
Fuck. Yes.
Aug. 8th, 2017 05:59 pm (UTC)
:D :D :D
Aug. 9th, 2017 06:21 pm (UTC)
I'm using it here though I haven't put her blurb in yet.
Aug. 16th, 2017 02:29 am (UTC)
Love this layout!

Question: Is there a way to change the color of the Journal Title? I've inserted the color code everywhere I can think and so far no luck.
Aug. 16th, 2017 02:33 am (UTC)
Thank you!

It should just be changing all (or just the first) instances of #add7c9
Aug. 16th, 2017 02:38 am (UTC)
Changing the first one did it! Thank you so much!
Aug. 16th, 2017 02:42 am (UTC)
No problem!
Aug. 16th, 2017 10:13 pm (UTC)
I seem to have a technical issue that I cannot begin to figure out because this has NEVER happened to me with one of your layouts before... but the navigation links (recent/archive/friends/profile) don't seem to be clickable. Any idea what I've done/how to fix it?
Aug. 16th, 2017 10:25 pm (UTC)
Looks like it's a screen resolution issue! On mine they click, but when I make my browser smaller the title runs over top of them.

In #nav-above add in position:relative;z-index:100; and you should be all set! I'm gonna add that to the base code as well tbh.
Aug. 16th, 2017 10:28 pm (UTC)
That fixed it! You're an angel, thank you!
Aug. 16th, 2017 10:30 pm (UTC)
No problem at all, sorry for the oversight!
Aug. 16th, 2017 10:53 pm (UTC)
So not a big deal, really. Besides, you answered pretty quickly with a solution, so really no harm done. Thank you again!
Sep. 20th, 2017 04:03 am (UTC)
I have modified it some :D Using in this journal!
Sep. 20th, 2017 07:35 pm (UTC)
Aw, looks great! :D
Sep. 20th, 2017 05:38 am (UTC)
Hi! I'm trying to install this layout and I'm doing something wrong? I've followed all the steps (I am not good at this, normally) and it's still coming up as a default green layout. I'm in S2 and I don't know what else to try? halp! <3
Sep. 20th, 2017 07:38 pm (UTC)
Hmmm, I'm not sure; I've never seen a layout just not take before. The CSS isn't showing up in your page source at all, so that's definitely weird LOL. Would you mind PMing me screencaps of each of your customize tabs? I'd need Basics, Look and Feel, and Custom Options. I might be able to figure it out from there.
Sep. 20th, 2017 08:36 pm (UTC)
Sure thing! All sent.
Sep. 22nd, 2017 06:40 pm (UTC)
Okay, this is really strange. All of your customization pages are fine as far as I can see! The only thing I can think of (and this is honestly just a shot in the dark) is maybe if you installed it while on mobile it could have had a hiccup?
Sep. 24th, 2017 03:14 am (UTC)
Curious! So I cleared out the CSS and saved it without replacing the image or the name portions, and it worked! Then I went back in and replaced HEADERIMG with my link to the image and it broke again. I wonder if my image is too large and that's what's breaking it?

Sep. 24th, 2017 03:24 am (UTC)
It's definitely not the image (I use some pretty huge images when I'm working LOL) but that does get me thinking. Are you using the direct image link or the Imgur gallery link that you linked me? That could be breaking it!
Sep. 24th, 2017 03:49 am (UTC)
I'm not sure? I tried posting the image to an entry by itself with the link ( https://i.imgur.com/Hjnxhhb.png ) and it showed the image successfully.

Sep. 24th, 2017 03:56 am (UTC)
Yeah, that's the URL you need so I honestly can't figure out why it's doing this LOL. Since it worked when you cleared replacements it's making me think you could have accidentally deleted a closing bracket or something like that, but that it's not even showing the code in the source is super odd. :\ I wish I had a more concrete answer for you.
Sep. 25th, 2017 08:36 pm (UTC)
Well shoot! I'm not deleting a bracket or anything that I know of. I'll just have to try another layout. They're all lovely <3 Thank you for trying!
Sep. 22nd, 2017 03:09 pm (UTC)
This is gorgeous! Do you know who the woman in the sample is?
Sep. 22nd, 2017 06:36 pm (UTC)
Thank you so much! I wish I did, but I don't, I'm sorry. I got the photo off my stock site and I couldn't find any other pictures of her there, but if you reverse image search you might be able to find something I couldn't!
Sep. 22nd, 2017 06:42 pm (UTC)
No worries! I figured it was a stock image but thought I'd ask in case it was a named model. Thank you!
Sep. 22nd, 2017 06:43 pm (UTC)
No problem! I wish I had her name, haha. I'd love to find more stock for other previews; she's so pretty!
Oct. 23rd, 2017 09:33 pm (UTC)
Hi, can I get the huge icon on the left? I can't seem to find the coding to add that one to the IJ. Is this one btw! Thank you.

Your work is beautiful BTW. Not only this layout- I love most of your work! <3
Oct. 23rd, 2017 10:15 pm (UTC)
Thank you very much! The coding for an image in your sidebar is just a standard image source. <img src="URL">
Oct. 23rd, 2017 10:28 pm (UTC)
Thank you! I'll try to add it and if it doesn't work I'll scream for help 😂 I'm really bad for these things with out the extremely explained tutorials.

But I'll try first! ❤️
Jan. 9th, 2018 09:21 pm (UTC)
I love this layout! Currently using. I'm having trouble with the icon that is supposed to show up above the one sticky note on the left side. How do I get that to show?