?

Log in

REN/HEI OTP
Layout #1 
posted on 11 Jun 2008 at 0:35
otp


My first layout, meep. I hope there aren't any confusing parts. /o\ Edit: Sidebar version added.




INFO
  • Style: S2 - Smooth Sailing
  • Two versions: with topbar or sidebar
  • For free, paid, plus accounts (works well when the ads are between entries.)
  • Best viewed at 1024*768 or higher
  • Was tested in Firefox and IE (it works better with Firefox)


INSTALLING THE LAYOUT
1. Pick a header from below and paste its code into the CSS you chose under .pageheaderblock (you can find it in the HEADER section). For example if you choose the Bob header, your .pageheaderblock will look like this.

2. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap)

3. Go to the Theme customization page and choose these options at Presentation, then hit 'Save Changes'. (I marked the important ones, you decide about the rest.)

4. Go to the Sidebar page. With the topbar version the profile userpic and info, page summary, calendar and multisearch box are disabled (free text, links and tags are enabled), so at Profile Position, Summary Position, Latest Month Position and Multisearch Position (under Multisearch Sidebox) choose hide, then hit 'Save Changes'.
NOTE: the topbar is now 160px tall. However, depending on the amount of text/links/tags you have in your sidebar, this height might won't fit. If the topbar overlaps the entries, you'll have to change two numbers in the code:

BASICS --> .bodyblock --> margin-top: 172px

and SIDEBAR --> .sidebar --> margin-top: -160px (increase these numbers if you need a taller topbar, or decrease them if you need a shorter one than 160px).

With the sidebar version every part is enabled and you decide about the sideboxes' visibility and order.

5. Go to Custom CSS, and select the following:
  • Use layout's stylesheet(s): No
  • Use layout's stylesheet(s) when including custom external stylesheet: No
  • Leave the Custom external stylesheet URL box blank.
  • Copy + paste the code to the Custom stylesheet box. (screencap)
Hit 'Save changes', and you're done! I hope.


THE BASIC CODE
WITH TOPBAR


WITH SIDEBAR


THE HEADERS
Choose one and paste its code under .pageheaderblock. Also, upload them to your own server, please (I'm not gonna delete them from photobucket, but y'know, just in case). Photos are mainly from mcr-pics.com and mcr_pic_spam.
PREVIEWS
CODES
background-color: #d5e3ee;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band1.jpg');
background-color: #000700;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01band2.jpg');
background-color: #17100a;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01bob02.jpg');
background-color: #1e241a;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/frank.jpg');
background-color: #b7d2e7;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/gerard01.jpg');
background-color: #cfdbf1;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/01gerard002.jpg');
background-color: #10211b;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/mikey.jpg');
background-color: #201d18;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/ray001.jpg');
I'm not good at making graphics, but hey, I think simple headers work well with this layout. If you'd like to, you can pretty these up, add text to them, etc. Or if you want to make your own, you'll need a good quality picture with a distinct background color, make it 390px tall, then paste its url and the background color's hex code into the CSS.


EDIT: More variety! nokitas made a really, REALLY pretty stock header which is shareable \o/ If you use it, don't forget to credit her as well!
background-color: #000000;
background-image: url('http://i298.photobucket.com/albums/mm249/letsgostupidbabies/Layouts/first/header_nokitas.png');
(If you use this one, replace
HEADER --> .pageheaderblock --> "height: 390px !important;" with "height: 496px !important;",
HEADER --> .header-menu --> "top: 369px;" with "top: 478px;"
plus at BASICS --> .bodyblock --> "margin-top: (172px or 5px);" add 106 to the number.)


RULES!
1. Credit me. CREDITING IS AWESOME. Also, don't repost the codes as your own.
2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask.
3. Enjoy! :)

Comments 
posted on 12 Jun 2008 at 18:42 (UTC)
freakin' sweeeeeeet
good job, girl! :D
posted on 12 Jun 2008 at 18:53 (UTC)
ps. I just tried to install the layout but it looks... way different. I think I'm doing something wrong :\
http://misery-passion.livejournal.com/
posted on 12 Jun 2008 at 19:15 (UTC)
Uh-oh. /o\

Okay, first guessing: do you still have 'height: 390px;' in your .pageheaderblock? When I watched your journal, Firebug didn't show it.
posted on 12 Jun 2008 at 19:10 (UTC)
Ohhh love it! Will credit :)
posted on 12 Jun 2008 at 19:17 (UTC)
Thank you! :)
posted on 12 Jun 2008 at 20:14 (UTC)
i'm saving this for later, thanks!
posted on 12 Jun 2008 at 20:37 (UTC)
Thank you!
posted on 12 Jun 2008 at 22:25 (UTC)
This is beautiful.

I'm using it.
^-^

Will credit.
posted on 12 Jun 2008 at 23:07 (UTC)
I'm glad you like it. :)
posted on 12 Jun 2008 at 23:11 (UTC)
Holy shit, those are so beautiful ♥__♥
posted on 12 Jun 2008 at 23:49 (UTC)
Thank you! :D
posted on 13 Jun 2008 at 2:27 (UTC)
So full of win! Haha! XD Definately snagging for future use. Will credit! <3
posted on 13 Jun 2008 at 10:37 (UTC)
:D! Thank you. <3
posted on 13 Jun 2008 at 2:32 (UTC)
this is so awesome! thankyou :D
will credit (:
posted on 13 Jun 2008 at 10:38 (UTC)
Thank you, I'm glad you like it! :D
posted on 13 Jun 2008 at 3:55 (UTC)
Awesome! I be using it very soon. Will credit. Thank you!
posted on 13 Jun 2008 at 10:41 (UTC)
Thank you. :)
(Deleted comment)
(Deleted comment)
posted on 13 Jun 2008 at 12:30 (UTC)
saving for future use will credit
posted on 13 Jun 2008 at 19:49 (UTC)
Thanks!
posted on 13 Jun 2008 at 21:39 (UTC)
I love you.

I just memmed it, will put it up later. Too tired right now *falls over*
posted on 13 Jun 2008 at 22:05 (UTC)
Haha, thank you. :D Sleep well!
posted on 13 Jun 2008 at 22:58 (UTC)
Used the Frank one, I love it and credited it.

Thanks.
posted on 13 Jun 2008 at 23:22 (UTC)
Thank you, I'm glad you like it. :D
posted on 14 Jun 2008 at 1:19 (UTC)
awesome. I'll mem it thank you for an awesome layout sharing
posted on 14 Jun 2008 at 9:40 (UTC)
Oh man, I'm so happy that people like it. Thanks!
posted on 14 Jun 2008 at 21:20 (UTC)
Using:)

This layoutis amazing. I had some trouble while installing it but I guess I'm just good with CSS because now it works really fine.

Credits on my profile.
posted on 14 Jun 2008 at 21:58 (UTC)
I'm glad you like it, and sorry about the problem! Can you tell me what was it? This is my first posted layout, and I'd really like to know what parts I should pay attention to next time. Thank you!
posted on 17 Jun 2008 at 3:33 (UTC)
using a gerard one, ta. will credit. they are great.
posted on 17 Jun 2008 at 11:46 (UTC)
Thank you!
posted on 20 Jun 2008 at 13:19 (UTC)
using this at greendaycomm at the moment. really great layout :D
posted on 20 Jun 2008 at 14:59 (UTC)
Thank you! :D That header looks awesome.
posted on 20 Jun 2008 at 18:03 (UTC)
Using!
I love the layout.
posted on 20 Jun 2008 at 19:36 (UTC)
Thanks. :)
posted on 22 Jun 2008 at 8:37 (UTC)
these are hot!

Can I ask how you got the coloring for the Frank header?
posted on 22 Jun 2008 at 17:35 (UTC)
Thank you!

I made the header with PS and didn't save it as a .psd, but I tried it again and these settings are close enough.
First I duplicated the base three times. The first two was set to screen, because the photo was really dark, the top one was set to soft light, then I lowered the second screen layer's opacity to 48% and the soft light's to 38%, so the picture looked bright enough and had a bit of contrast, too. Then I added a Selective Color layer. Settings:
Reds: -33, 0, +15, +15,
Yellows: -39, 0, -15, -15,
Whites: 0, +25, -52, -18.
After that I added a Color Balance layer to give a photo bit of yellowish tint:
Midtones: 0, 0, -21,
Shadows: 0, 0, -13. (Preserve Luminosity checked.)
To tone the saturation down I made a darker blue exclusion layer (#144051) and a light greyish-blue linear burn one (#bcd4dd). I lowered the opacity of the exclusion layer to 25%, the linear burn one's to 31%. And finally I added the header's background color (normal, 10% opacity), this way the header blended nicely with the top part of the layout. That's it, I hope it made sense.
posted on 23 Jun 2008 at 13:03 (UTC)
Using!
GREAT JOB, I LOVE IT!
posted on 23 Jun 2008 at 16:37 (UTC)
Thank you! :D
posted on 26 Jun 2008 at 1:35 (UTC)
im using it! and i credit you.
posted on 26 Jun 2008 at 8:13 (UTC)
Thanks.
posted on 28 Jun 2008 at 5:35 (UTC)
Fantastic layouts!

Would you mind if I used the headers on the stylesheet I have now, and credited you for the header?
posted on 28 Jun 2008 at 10:52 (UTC)
Thank you!

I don't mind at all, feel free to use them. :)
posted on 29 Jun 2008 at 4:31 (UTC)
Awesome layout! I'm going to use it as soon as I decide what header I want to use.

Thank you!
posted on 29 Jun 2008 at 11:35 (UTC)
Thank you very much! First I made two headers, one of the band and one of Frank, but then thought why just him and not the others, too? That's when things got a bit out of hand. /o\
posted on 30 Jun 2008 at 15:38 (UTC)
stole and will credit for sure LOVE this thanks hun xoxo
posted on 30 Jun 2008 at 16:52 (UTC)
Thank you. :)
posted on 11 Jul 2008 at 10:56 (UTC)
took this awesome one.
you're already credited on my profile page and i'll do a post about it,crediting you!
thanks so much!
posted on 11 Jul 2008 at 19:56 (UTC)
That's so nice of you, thanks! :) I love the header you made.
Page 1 of 2
<<[1] [2] >>
This page was loaded Jun 23rd 2017, 5:09 pm GMT.