InsaneJournal

Tweak says, "Life Sucks!!! Have a mint."

Pretty Little Liar Mods (pll_mods) wrote in rp_tutorials,
@ 2011-10-15 22:09:00

Entry tags:

layout: question, question: layouts

Hi all! I've decided to code my first Bloggish layout for this game I'm making (this is the mod journal/layout). What I have is still a WIP but I have a couple of questions first.

-> How do I get the layout centered? I feel like I'm missing something obvious
-> I'd prefer the side bar on the left but I'm blanking on that too. I know it has something to do with the alpha, beta code but I'm looking at the tutorial and coming up blank.
-> The calendar, syndicated, powered by are set to display:none in the code... But they're still displaying.

The code is included in the text box below.

/* Pretty Little Liars S2 Bloggish Layout http://asylums.insanejournal.com/abeautifulmind + http://lace-and-cream.insanejournal.com */ body {background-color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:left; color:#FFFFFF; } a, a:visited, a:hover { color:#990000; } #container { width:650px; margin:10px; padding:2px; } #container-inner { width:640px; } #banner { width:640px; background-image:url("http://i303.photobucket.com/albums/nn127/immortalaussie/Journal%20Layouts/Bloggish/PLL/pretty-little-liars.jpg"); height:360px; } h1#banner-header { display:none; } h2#banner-description { display:none; } #pagebody { width:640px; } #alpha { background-color:#000000; color:#000000; width:500px } #beta { background-color:#000000; color:#FFFFFF; width:140px; } .content-nav, .content-nav a, .content-nav a:hover { color:#660000; } h2.date-header { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#00FFFF; background-color:#000000; } .skiplinks { font-size:9px; color:#00FFF; } .entry { border:2px; border-color:#990000; width:600px; color:#FFFFFF; background-color:#000000; } h3.entry-header {color:#FFF; font-size:16px; text-align:center; } .entry-userpic {display:none; } p.poster {display:none} .entry-content {line-height:normal; } .entry-body {line-height:normal;} .metadata {display:inherit; } .ljtags { float:left; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#00FFFF; } .entry-footer {background:background-color:#FFFFFF; color:#000000; .module {width:40px; } .module-photo {display:none; } .module-viewlinks { background-color:#000000; color:#FFFFFF; } .module-calendar {display:none;!important} .module-typelist {font-size:10px; color:#FF0000; background-color:#000000; } .module-categories {display:none;} .module-pagesummary {display:none;} .module-syndicate {display:none;} .module-powered {display:none;} .module-header {font-size:14px; color:#FF0000; background-color:#000000; } .module-content {font:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; } ul.module-list {background-color:#000000; color:#FF0000; } li.module-list-item a {color:#FF0000} .comments {width:600px; background-color:#000000; color:#FF0000; text-align:center; text-transform:uppercase; } h3.comments-header { width:600px; font-size:14px; color:#FFFFFF; } h3.comment-header { font-size:12px;} .comment-userpic {float:right;} .comment-content {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#000000;} .comment-footer {font-size:9px; color:#FF0000;} .comment-replies {background-color:#FFFFFF; color:#000000; }

I'd appreciate any help you are willing to offer :) (If all else fails I might go to a generator or clean/simple as I've coded those ones before with no problem. I just wanted to give Bloggish a try.....)

(Post a new comment)

forsythia
2011-10-15 12:54 pm UTC (link)

Let's see if I can help. :)

-> This one took me some prodding to figure out by comparing other layouts with yours, and I came to the conclusion that it's all in the #container. In your #container section, find margin:10px; and change it to margin: 0px auto; By my understanding, it's a CSS 'hack' that makes the layout appear centered. I tested your code with this change, and it made the layout appear centered in Firefox.

-> You have to set "Two column (sidebar on left)" in the custom options. It's at the very top of the page where you enter custom CSS. Then switch the names of #alpha and #beta in your code, as the order you have right now is for sidebar on right.

-> I'm kind of stumped in terms of the syndicated etc. appearing. I even overwrote your line for the 'powered by' section with a bit from a code I know works, and it still displayed. I'll toy around with it a little more and get back to you if I can figure out how to fix that part.

(Reply to this) (Thread)

forsythia
2011-10-15 01:27 pm UTC (link)

Found it! The culprit making your code break is a missing bracket. Just go to your .entry-footer section and change color:#000000; to


color:#000000;}

and you'll be golden.

Also, when I was prodding around, I noticed that you accidentally put the closing semicolon before the !important in .module-calendar {display:none;!important}. It still works because the !important proves unnecessary, but I thought you might want to know.

And if you don't want entry icons, you'll need to change .entry-userpic {display:none;} to .entry-userpic {display:none !important;} for it to work. The account you're building with doesn't have userpics yet, so I'm guessing that's why you didn't notice; the one I tested with had entry userpics and they still showed until I added the !important.

Hopefully that helps. ♥ Good luck with your layout!

(Reply to this) (Parent) (Thread)

	pll_mods 2011-10-16 03:27 am UTC (link)
	Thank you! It was driving me mad last night so I really appreciate this :) (Reply to this) (Parent) (Thread)

	forsythia 2011-10-16 03:58 am UTC (link)
	Ugh, I know how that goes. You're welcome; I'm glad I could be of assistance. :) (Reply to this) (Parent) (Thread)

	pll_mods 2011-10-16 04:44 am UTC (link)
	Thanks again :) (Reply to this) (Parent)

	pll_mods 2011-10-16 03:29 am UTC (link)
	I'd done the side by on left but didn't think of swapping the alpha/beta thing over. Oops ;p (Reply to this) (Parent)