21 March 2010 @ 05:41 pm
Blanket - Down There
Layout: Blanket
Style: Peach
Browsers: Firefox 3.6, IE 8, Flock 2.5.6
Navbar: Yes
Customized Comments/Tags/Archive Pages: Yes
Resolutions: 1024x768, 1280x800, 1440x900

Preview:


click on the image for the original size; a live preview can be found at my journal. :)



Instructions:
1. Go to the "Select Journal Style" page and choose "Blanket Peach" by clicking "Base Layouts" (it's the third one for me).
2. On the Customize Style page, make sure in the Modules section, Navigation is in the "Fixed" section, if it not already is; everything else in the "Column" Section.
3. In the Customize CSS section uncheck "Use layout's stylesheet(s)" and paste the code into the "Use embedded CSS" box and save your changes.
4. Please upload the images (IMAGE 1 & IMAGE 2) to your own host. Thanks. :)




adding a header image - please read carefully

first off, I did not intent for a custom header to be used with this layout. But because I have been asked for it, I came up with a workaround. It may not be perfect, but at least it gives the possibility to use a custom header. :) The code below is merely an example how to add a header, if you want the image to be larger or smaller, you must adjust the widths and heights accordingly. If you run into problems or have a question, don't hesitate to ask and I will do my best to assist. :)

to my knowledge, a separate header image (above the already existing one) cannot be added, but you can add a background image to #header>.inner. It lays underneath the journal and page title, so you might want to include your preferred journal name in the header image and remove those parts from the code. Also, for the exact code below to work, your header must be exactly 640 x 200 px. If you want it to be larger or smaller than suggested, you must adjust the values in other parts of the code as well (please follow the additional step 3 in that case).

Step 1: copy the code below and replace the original code with it. Put the URL to your image where it says "URL TO YOUR IMGAE HERE" and adjust the background colors if needed.

#header {width:640px; height:200px; margin: 0 auto 2em auto; background: #000000; }
#header>.inner {width:639px; height:200px; background: #000000 url(URL TO YOUR IMGAE HERE);padding:1px;}


Setp 2: look for the code below and add the bolded parts. You can leave the rest, if you want to remove the header later and return to the original one, otherwise, you can remove it.

div#header h1#title {display:none; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; color: #aaaaaa; font-family: sans-serif; font-size: 1.3em;}
div#header h2#subtitle {display:none; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #aaaaaa; font-family: sans-serif; font-size: 1em;}
div#header h2#pagetitle {display:none; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #c8c8c8; font-family: sans-serif; font-size: 1em;}


this gives you:



additional Step 3: if you want your header to be smaller or larger or smaller in width than suggested above, you must change the values accordingly in other parts of the code as well, I have put them below. Just replace "YOUR WIDTH" with the preferred width for the content, navigation and footer:

#primary {width: YOUR WIDTH; margin: 0 auto; z-index: 0; padding: 0;}
#secondary {width: YOUR WIDTH; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff;}


also, you must push your content lower if you want your header to be larger or smaller in height as well. Just replace the bolded part with your preferred spacing amount and add the other three zeroes.

#content {padding: 0; margin: 0 0 0 0;}

combine both parts in step 3 if you want it to be larger or smaller in height and width. :)

Like I said above, if this is too confusing or you need help with adding the image, don't hesitate to ask. I hope I did this right. :)
Background image by netykavka@dA.




Please credit [personal profile] heylove when using the layout. Thank you. :)
Also, feel free to ask here if you have any questions, but please bear in mind that I cannot answer questions regarding paid accounts. Sorry.
 
6 | +
 
( Post a new comment )
dcillusioned[personal profile] dcillusioned on June 25th, 2010 02:00 am (UTC)
Hey There. I really love this layout and have taken it to use on my journal. It's gorgeous, thank you. I have one question. Is it possible to get the comments to display with the transparent & black background as they do on the livejournal layout you created above? Thanks! =)
(Reply) (Thread) (Link)
heylove[personal profile] heylove on June 25th, 2010 03:03 am (UTC)
heyhey! thank you! :D of course it's possible to use the background of the LJ version. if you're css-savvy, you can simply modify it, if not I'll post the code later today (it's 5am with me right now *lol*), if you want. ^^
(Reply) (Parent) (Thread) (Link)
dcillusioned[personal profile] dcillusioned on June 25th, 2010 04:39 am (UTC)
My CSS skills leave something to be desired. I can change colors, fonts, sizes, small things like that. I haven't delved into much further. It's on my list. I'd LOVE the code to change the comments though! Thank you very much! And sorry 'bout the time, it's only 11:30 pm here. I don't expect anyone to function that early. lol

Thanks again! =)
(Reply) (Parent) (Thread) (Link)
heylove[personal profile] heylove on June 26th, 2010 08:29 am (UTC)
hey! I've updated the code above, because there were several things to change. simply copy and paste it and the comments should be the same as in the LJ version. :) if you need help or have a question, feel free to ask away. ^^
(Reply) (Parent) (Thread) (Link)
dcillusioned[personal profile] dcillusioned on June 26th, 2010 05:34 pm (UTC)
Thank you! =)
(Reply) (Parent) (Link)