irinafan (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} irinafan) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} cartonage,@ 2007-06-02 20:43:00 |
|
| Entry tags: | layouts, style: dear diary |
Pretty It Up Part IV 1/2
 | Style: S2 Dear Diary Layout Type: Layout Replypages: Customized. Browsers : IE and FF. Live Preview: iri_laytest |
Because everyone and their mother was whining...a version of the last layout with the userpics at 100x100.
Changeable « - » Not Changeable
| Changeable » Header(s) » Height of the header (s) » The Color Green to something else | Not changeable » Everything else :P |
CSS and Pictures
Download CSS/Pictures
You can use the css file as it is, but I can't guarantee that the images will always stay online at imageshack, you never know...so if you want to be certain, upload them to your own server. =)
You can use the css file as it is, but I can't guarantee that the images will always stay online at imageshack, you never know...so if you want to be certain, upload them to your own server. =)
Instructions
» Download the zip file, unzip it and if you want to, upload the pics to your own server.
» Add your own header (must be 614px wide, but can be as high as you want), or leave the one(s) that is/are in there right now. [see below]
» Go to http://www.livejournal.com/customiz
» Choose "S2", click on save changes, go to "Look and Feel", choose "Dear Diary" in the drop down menu and save again.
» Go to http://www.livejournal.com/customize/op
» Go to the "Text" chart and make your changes to the menu links (keep them short)
» Go to "Custom Css", set "Use layout's stylesheet(s)" to "no" (THIS IS IMPORTANT) and copy and paste the whole code from the css file. If LJ times out, delete everything that comes before body in the css file and try again. And if that doesn't work, try again a few hours later, LJ has been weird with this for the past two weeks.
» Press "Save" and you're done!
Oh, and if you're wondering why there's no linklist in your sidebar, you can edit that list here.
Add your own header
» Create your own header(s), 614px wide and whatever height you want it/them to be. My header for the entry page is 190px height, the friends one is 290px high.
» Find the following part in the stylesheet:
| #pagecontainer { width:823px; background:url(http://img355.imageshack.u margin:0px; padding:0px; } #title { width:210px; height:190px; /*height of header*/ background-color:#ffffff; font-size:11px; } |
Bold parts are the importan ones:
background:url(http://img355.imageshack.u
height:190px; --> That's probably obvious as well, replace 190 with the height of your header.
Final example code could look like this:
| #pagecontainer { width:823px; background:url(http://yoururl/header.jp margin:0px; padding:0px; } #title { width:210px; height:190px; /*height of header*/ background-color:#ffffff; font-size:11px; } |
Now, below that you have this part in the code:
| .page_friends #pagecontainer{ background:url(http://img355.imageshack.u } .page_friends #title { height:290px; /*height of friends header*/ } |
If you want the same header on your friends page as on your recent page, you can just delete this section completely. Otherwise, just as above, enter the url of your header and the height.
Change the color green to something else
Links, the subject title and other stuff are green, I used two different shades of green to be exact, this one (#67a648) and this one (#2d893a). [At least I hope I didn't use another shade, feel free to
» Open the css file in notepad.
» Choose the color you want for the darker green and get a hex code for it. (For example, black would be #000000), google if you have trouble.
» Go to Edit - Replace, a little box pops up.
» - Enter "#2d893a" in the search field.
- Enter the hex code of your desired color in the replace field.
-----> Click on "Replace all", and then save the file.
» Do the same for the lighter green, #67a648. And that's it!
