Previous | Next

Layout: 8-Bit

image prev | [info]tess026

001: Informative Info
TWO LAYOUTS IN ONE DAY? WHAT IS THIS MADNESS??? Decided to do a fun retro-gamer-80s-whatever-you-wanna-call-it-who-knows-not-me layout; no image recoloring needed to recolor the scheme. Columns and no-columns versions below. Enjoy! <3
002: The Layout


003: Directions
→Go to Basics, choose S2, fill in your title and subtitle if desired, then save.
→Go to Look and Feel, choose Complete Style for the layout, then save.
→Go to Custom Options, and choose the following:
→Layout Type: Two column (Sidebar on left)
→Disable customized comment pages for your journal: Yes

→Link text to leave a comment: Comment

→Body of custom sidebar module: <div class="mytitle"><a href="/">refresh</a> <a href="/profile">profile</a> <a href="/friends">friends</a> <a href="/calendar">archive</a> <a href="http://tessisamess.insanejournal.com/">&copy;layout</a></div>
*links do not need to be filled out; you're good to go
→Custom stylesheet: Input the code above and save
004: CTRL+F This Shit
#000 to change hover color on sidebar and subject links.
#1e4e46 to change minor page font color, archive page headers.
#389788 to change tag links, darkest block shadow on sidebar, entries, userpics, and entry link buttons.
#51b3a3 to change entry link background, second darkest block shadow on sidebar, entries, and userpics.
#7ee5d6 to change lightest block shadow color on sidebar and blockquote.
#83dbd1 to change page background and archive border.
#c1ede8 to change entry and userpic background.
#fff to change link hover color, sidebar, linkbar, and subject link color.

'Press Start 2P', cursive to change the accent font.
HELVETICA,SANS-SERIF to change the bulk font.
http://i.imgur.com/LkO0HO6.png to change/remove squres from the page background. I made this as various-transparency whites (like Strangeness & Charm) so no image recoloring is needed if you just want them a different color.
005: Rules and Shit
→Please put my credit in its designated spot.
→Do not remove my credit from the CSS.
→Do not redistribute in part or in whole.
→If you break something during editing don't be scared to ask me to see what happened. Yep. That's a rule.
→If you're a maker like I am and you do something cool with this I'd really like to see it, but it's not necessary.


Apr. 24th, 2015 04:58 pm (UTC)
akjhdfjkashfa my inner game geek wants me to use this just because and slab it with vintage playstation one gifs xD

Apr. 24th, 2015 11:21 pm (UTC)
Apr. 24th, 2015 05:40 pm (UTC)

Apr. 24th, 2015 11:22 pm (UTC)
Apr. 24th, 2015 11:06 pm (UTC)
Apr. 24th, 2015 11:22 pm (UTC)
EEEEE, thank you! :DDD
Apr. 25th, 2015 01:33 am (UTC)
I can't tell you how much I love this, it's like you dug right into my brain.
Apr. 25th, 2015 09:24 pm (UTC)
How do you know I didn't, huh???
Apr. 25th, 2015 09:26 pm (UTC)
I put nothing past your skills at this point.

I do wonder if I could pick your brain a bit? Do you think it would it be possible for me to add an extra link to my tags page? And if I can figure out how to do that, would you mind me editing it, as long as the credit remains in tact? XD
Apr. 25th, 2015 09:32 pm (UTC)
Just tested it! If you replace the sidebar module I give above with:
<div class="mytitle"><a href="/">refresh</a> <a href="/profile">profile</a> <a href="/friends">friends</a> <a href="/calendar">archive</a> <a href="/tag">filters</a> <a href="http://tessisamess.insanejournal.com/">&copy;layout</a></div>
You should be good to go! I titled it Filters to keep it looking like a square, but if that's not what you want it to look like fee free to change it. "Tags Page" and "View Tags" were both really awk, though, just a heads up. And sure, feel free to edit all you want! ♥
Apr. 25th, 2015 09:34 pm (UTC)
AMAZING ♥ ♥ ♥ Thank you so much!
Apr. 25th, 2015 09:36 pm (UTC)
Hee, no problem! ♥ I kind of desperately wish I had a character this would fit, but I don't and that makes me angry lmfao.
Apr. 25th, 2015 09:37 pm (UTC)
I went through the same thing for about .02 seconds when I realized it fit me better than any character I could ever write. :-P It's even the right color. XD
Apr. 25th, 2015 09:39 pm (UTC)
Ahahah I feel you I feel you. But I can't change my CDJ it matches my design site! [cue dramatic bodily flinging onto the nearest available surface to sob like a little bitch]
Apr. 25th, 2015 08:03 pm (UTC)
this is flipping amazing
Apr. 25th, 2015 09:24 pm (UTC)
Heeee, tysm! ♥
Apr. 25th, 2015 08:29 pm (UTC)
I feel like this speaks to me on a personal level.
Apr. 25th, 2015 09:25 pm (UTC)
This one wound up way more popular than I'd anticipated lmfao. I MEAN I THOUGHT IT WAS COOL BUT IDK LOL. I'm glad you like it! ♥
Apr. 26th, 2015 12:09 am (UTC)
It's amazing. AND IT'S SUPER COOL. ♥
Apr. 26th, 2015 04:24 pm (UTC)
Apr. 28th, 2015 07:47 pm (UTC)

Apr. 28th, 2015 10:31 pm (UTC)

Apr. 28th, 2015 10:57 pm (UTC)
Apr. 28th, 2015 11:24 pm (UTC)
Heeee yes! :D
May. 4th, 2015 04:09 pm (UTC)
May. 4th, 2015 04:10 pm (UTC)
Heee, ty ty! ♥
May. 25th, 2015 01:31 am (UTC)
Recolored and using here :D
May. 25th, 2015 06:41 pm (UTC)
Jun. 1st, 2015 11:15 am (UTC)
OMG I APPLAUD YOU FOR HAVING THE PATIENCE TO CODE THE SHADOW. I'm trying to recolour it all and I gave up and deleted half the shadow around the nav.
Jun. 2nd, 2015 05:42 am (UTC)
LOL oh my fucking shit that was such a pain in my ass. Super super tedious. XD
Jun. 2nd, 2015 07:16 am (UTC)
IT IS. I might tackle it again later tonight but I might just leave it.
Mar. 22nd, 2017 03:27 am (UTC)
This might be a super specific question because I mucked it all up when I tried to do it on my own. My eyes can just not handle the subject lines being shadowed. What line of code do I need to edit to read that? Its sort of actively giving me a migraine and I don't wanna give up on the layout cause I adore it so much but I keep breaking it so here is my HALP if you have the time. ♥
Mar. 22nd, 2017 03:39 pm (UTC)
Heyo, no problem! ♥ just delete the highlighted code from the following section and you should be all set!

h1, h2, h3, h4{text-transform:uppercase;font-family:'Press Start 2P', cursive;font-weight:400;text-shadow:1px 1px 0 #51B3A3,2px 2px 0 #51B3A3,3px 3px 0 #389788,4px 4px 0 #389788;margin:0;padding:0;color:#fff;}

To change the subject line color, just play with these values!

#alpha .entry-header a, #alpha .entry-header a:visited{color:#fff;}
#alpha .entry-header a:hover{color:#000;}
Mar. 22nd, 2017 04:19 pm (UTC)
omg thank you so much ;_;
Mar. 22nd, 2017 04:22 pm (UTC)
You're so welcome! :D
Apr. 8th, 2017 05:36 am (UTC)
hello!! i am absolutely in love with this layout, and i just put the no columns version on this journal. i do have a question though... the no columns version doesn't seem to have the neat animation when you first load the page. i tried swapping to the columns version to see if maybe i just don't have enough posts or something, but it worked fine there. i want to use the no columns version because i like the wider post size, but i'm also super in love with the animation -- is there a good way to have both?