ooc. LAYOUT POST | Minimalism: "Basic Functionality"

Dec 21, 2011 02:43

I am no longer using Livejournal. I will no longer be updating this code except to fix serious bugs. Feel free to take it and fix it up as you like.

(I've decided that "Basic Functionality" is the name of this layout. Because when LJ is a dick to its users, its users get to be dicks right back.)

Hey! So. Livejournal kind of blows right now, am I right?

Until (a) they revert the changes, or (b) someone comes up with a custom layout that looks exactly like the old comment pages used to, I'm using my shoddy, patchwork CSS learnings (and a LOT OF HELP from other people!) to come up with something that's not exactly awful.

If you're okay with the new comment pages, or if you were already using custom comment pages of your own to view everything: Keep on trucking! Otherwise, hopefully this will help.

The layout I'm currently using is the Minimalism style "Georgia", with a few things tweaked with custom CSS to make it look more like an actual comments page. This won't work with a non-Minimalism layout, and will look weird with any theme but Georgia. Custom comment pages are turned on. (You need a plus or paid account to be able to see them. To reiterate: YOU DO NOT NEED A PAID ACCOUNT TO USE S2 CUSTOM COMMENT PAGES. Go with plus, and install an adblocker.)

If you have this layout installed, you can add ?style=mine to the end of any journal or comments page and see them with this layout. Here is a site with a bookmarklet you can use to automatically append it to any URL.

Userpics are turned off by default on this layout. You can turn them on here.

Now, here's the code you need to paste into the custom CSS box:

.content .entry .entry-text {
color:#000;
font-family:Verdana;
}

body {background-color: #fafafa;}

.sidebar { display:none; }

small {font-size:80%;}

big {font-size:120%;}

.username, .entry-title { font-family:Arial; }

.header, .hr { width:97% !important; }

.content-inner, .entry-wrap {
margin-left:25px !important;
overflow:visible;
width:95%;
}

.content .entry {
width:100% !important;
overflow:visible;
font-family:Verdana, Georgia, serif;
}

.username {max-width:120px;}

h3 { margin-top:0px !important; }

.entrymenu a {padding-top:20px !important; }

.comment-wrap { margin-bottom:.5em; min-width:35%; }

.layout-inner{overflow:visible;}
.entry-comments-text {overflow:visible;}

A:link,
A:visited {
border-bottom:1px solid #999;
text-decoration:none;
color:#003261;
}

.entry-content A:link {
border-bottom:1px solid #999;
text-decoration:none;
color:#003261;
}

.entry-content A:visited {
border-bottom:1px solid #999;
text-decoration:none;
color:#3D2961;
}

.entry-comments-text>table {
background: none repeat scroll 0 0 #BDF;
border: 5px solid #BDF;
margin: 0 auto;
width: 450px !important; }

#qrdiv form {
display: block;
padding: 5px;
border: 1px solid black;
margin: 5px auto 10px auto;
width: 720px;
border-image: initial;
}
(Most recent update: Comment box is now a fixed width thanks to thescarlet.)

Admittedly, some of these bits of code are just for my own personal preference, so feel free to do whatever you like if you use them. Specifically, I changed the body background because staring at an all-white page hurts my eyes so feel free to delete that if you want.

Courtesy of sostaygold, if you want to change the font used in entries, use this:

.content .entry .entry-text {
font-family:Verdana, Georgia, serif;
}

If you don't like Verdana, Georgia, or serif fonts in general, change them to whatever you prefer.

KNOWN ISSUES:
  • Sometimes comments don't expand. Sometimes they do! Also if you are in a thread view and leave a comment it spits you back out to the full comments page. This seems to be a problem with custom comment pages in general and probably isn't something I can fix.
  • Hovering over icons still doesn't make the display name/keywords pop up. I don't think I can fix that, since it looks like they removed the title attribute from them altogether.
  • Tags are at the bottom of the post when they should be at the top.
  • This issue with userpics that are smaller than 100x100.
  • Subject line smilies are gone! This can get them back but there must be an easier way.
THINGS THAT ARE NOT QUITE BUGS BUT THAT I WOULD LIKE TO DO:
  • Losing the sidebar means tag lists, links lists, etc vanish. I'd like to be able to put the sidebar elements at the top of the page, hopefully in a non-cluttered manner.
  • Maybe put the journal title and subtitle on the same row as the navigation links?
  • Stuck here so I'll remember it -- a request to add the previous/next page links on recent/friends views to the top of the page as well as the bottom.
I am more or less done with LJ, so probably won't be actively working on any of these unless I get really bored. If you'd like to submit fixes for them, though, go ahead.

This comment should help you if you prefer keeping the sidebar on the side of the page.

Another note: If you're using an Expressive/Mixit theme, this code might come in handy for you.

SPECIAL THANKS FOR CODING HELP:
- infinitegraces
- sostaygold
- andrusi
- articletwelve
- hey_capn_jack
- eccentriclycool
- sunnyspringhome
- thescarlet
Without these people, this layout would be 100 times less pretty and functional than it is now.

what is technology, !ooc

Previous post
Up