Dreamwidth Layout: Paper Me

[cimorene]

I polished up the layout that I created for my DW journal to share with everybody else. It is not a theme for the existing layouts, but a new layout with all the links in a right-hand sidebar and a text title, meant to be used with wallpaper. Also I went crazy and made thirteen themes for it. :D

ETA: Sorry, the links work now!

Theme Previews (click images for a larger image preview):

1-2. Sugary (Milk Script in header, lowercase Century Gothic in sidebar)

Live (fonts won't work until you install them): 1.Freesias 2.Bobby Pins

3-4. Playfully (Sacchi Handwriting in header, Arial in sidebar)

Live (fonts won't work until you install them): 3.Plummy 4.Chiyo


5-6. Retro (Pussycat in header, Trebuchet in sidebar)

Live (fonts won't work until you install them): 5.Know Where 6.AquaMod


7-8. Emphatically (Pointedly Mad in header, uppercase serif in sidebar)

Live (fonts won't work until you install them): 7.Clover Garden 8.Take It


9-10. Nouveau (FantaisieArtistique in header, uppercase Century Gothic in sidebar)

Live (fonts won't work until you install them): 9.Going Under 10.Kingdom


11-12. Serif (lowercase serif in header and sidebar)

Live: 11.Meep 12.Jim Beam


13. Header IMG (custom header, lowercase serif in header, uppercase serif in sidebar)

Live: 13.Header IMG

Six more themes here - 2 each Crush (playful handwriting font), Curlicue (decorative Art Nouveau font), and Soothing (1930's-inspired in pale, low-contrast neutral colors).


Notes: All fonts are freeware easily findable with Google; I've only reuploaded them for convenience. Some wallpapers from colourlovers.com.


ETA: A bunch more alternate wallpapers (mostly other colors of the harlequin and floral styles + about 3 wavy and diagonal stripes) here. About half of them have pre-made pale versions for the text area.

Instructions:

1. Go to the Your Layers page. Under Create Layer - Create a Top-Level Layer, select Type: Layout and Core Version:2 from the drop-down menus. Click Create.

2. When the page reloads, your layer will be listed under Child of layer 550: Dreamwidth S2 Core, v2. Click Edit next to it.

3. Delete the two lines in the box. Copy all the text from here and paste it into the box instead. Click Save & Compile. (If you did it right, the box at the bottom should display "Compiled with no errors.")

4. Go back to the Your Layers page. Under Create Layer - Create a Layout-Specific Layer, select Type: Theme and Layout: Paper Me. Click Create.

5. Your layer will be listed under Child of layer [#]: Paper Me. Click Edit next to it.

6. Delete the two lines in the box. Copy the entire content of your chosen theme layer (links below) and paste it into the box.

1.Sugary - Freesias
2.Sugary - Bobby Pins
3.Playfully - Plummy
4.Playfully - Chiyo
5.Retro - Know Where
6.Retro - AquaMod
7.Emphatically - Clover Garden
8.Emphatically - Take It
9.Nouveau - Going Under
10.Nouveau - Kingdom
11.Serif - Meep
12.Serif - Jim Beam
13.Header IMG

7. You're done if you don't want custom images for anything and don't want to change the fonts or colors! You can click Save & Compile and skip to step 11.

8. Colors: You can change the colors in the Customization wizard; after you save your style, just go to the Customize Your Journal Style page; the colors are under Style-Colors.

9. Images: You don't have to host the images you want yourself, but it will ensure that they don't vanish if my webspace goes down. You can also easily replace the wallpapers in the style with images of your own, or with solid colors (as in theme #13, which does not use wallpaper patterns). To replace the images, scroll down to where it says

body {
background-image: url(http://...);
background-position: top center;
background-attachment: fixed;
background-repeat: repeat;
}

#primary {
background-image: url(http://...);
background-position: top center;
background-attachment: fixed;
background-repeat: repeat;
}

and replace the url in parentheses with the url of your own images. The top image is the background of the entire page. The bottom image (#primary) is the background of the box containing the entries. In order to replace an image with a color, delete the line "background-image: url();" and replace it with "background-color: #ffffff;".

Special instructions for #13 Header Img:
The header image is the page background in this style (scroll to the same place mentioned above). The header image used here is a png with about 60 transparent pixels at the top because otherwise the navbar would cover the top of it. My header image is 250 pixels high, not counting the transparent pixels. If yours is much different you'll need to make the header space taller; to do that, scroll to where it says

/* --------------------- Page header, entry titles, sidebar nav, & sidebar headers -------------------- */

and under that heading you'll see "/* Move the title up and down by changing margin-top and margin-bottom or use text-align right or left instead of center */" - there's 150 pixels above the title and 100 pixels below it right now. You can also move the title to the left or right by changing "text-align:center" to left or right.

10. Fonts: This layout uses three main fonts: the base font (currently Verdana for all themes), the header font on the entry titles and sidebar headers, and the decorative font at the top of the page (download links for these above with the previews).

• To change the base font, scroll to where it says
  

  
  ##==============================
  ## Font
  ##==============================
  set font_base = "Verdana";
  set font_fallback = "sans-serif";
  

  
  and change "Verdana" to the name of the font you prefer. "Font Fallback" should be a font family such as sans-serif or serif.


• To change the header or page title fonts, scroll to where it says
  

  
  /* --------------------- Page header, entry titles, sidebar nav, & sidebar headers -------------------- */
  /* Header */
  h1, h5 { font-weight: normal; }
  
  /* Journal title */
  h1 {
  font-family: YOUR FONTS HERE, $*font_fallback;
  font-size: 3.5em;
  color: $*color_module_link;
  text-decoration: none;
  text-align: left;
  margin-left: 50px;
  margin-top: 50px;
  margin-bottom: 0px;
  }
  
  /* Journal subtitle */
  h5 {
  font-family: $*font_base, $*font_fallback;
  font-size: 0.7em;
  color: $*color_module_link;
  text-align: left;
  margin-left: 50px;
  margin-top: 5px;
  }
  
  #secondary .module-header, #secondary .module-header a, .module-section-two, .entry-title, .entry-title a {
  font-family: YOUR FONTS HERE, $*font_fallback;
  }
  

  
  For the main title, replace YOUR FONTS HERE under "Journal title" with the font you prefer. For the other headers, replace YOUR FONTS HERE under "#secondary .module header..." with the font you prefer.

11. After you've got it the way you wanted and clicked Save & Compile, assuming you've done it right, you should get "Compiled with no errors". If so, to use your new layout go to the Your Styles page. (If you're a basic user you can only have 1 style, so delete any other ones there.) Under Create Style, type in a name for your new style (for example, "paper me - playfully plummy by cimorene") and click Create.

12. Under Style Layers - Layout, select "Paper Me" from the drop-down menu and click Change. Then select your theme layer from the drop-down menu and click Save Changes.

13. Your new style should appear in the list of styles. Click "Use" next to it and you're done!

ETA: A DW codepush on 18 May rearranged the profile module; a patch to revert to the way it looked before is here, if you don't like it!

Comments

[plures]

You are AWESOME. I am going to take and save several of these, and credit. <3

[sierra]

these are pretty awesome!

[plures]

Although, when I try to get to the layer, it says I'm not authorised to view it.

[allegory]

These are lovely! ♥ You have a great sense of aesthetics.

[beyourwings]

LOVE IT! I want to use them all XDD

[evelyn]

I'm also told I can't view some of the text

[beyourwings]

I was going to say the same thing ):

[raynedanser]

RE #3:
There is an error and I'm not authorized to view it.

[hendrix]

Oh man. Thank you. I put this entry in my memories. :) I will credit when I use one!

[lucybird]

And me :(

[cimorene]

Oh man, sorry about that! I didn't realise the layer source was SECRET. All the links are fixed now!

[cimorene]

Oh man, sorry about that! I didn't realise the layer source was SECRET. All the links are fixed now!

[cimorene]

Sorry! The links are fixed now.

[beyourwings]

Thank youuuu! I'm changing my layout ASAP, your work is wonderful!!

[cimorene]

Uh-oh. I didn't realise the layers were private. Links are fixed now!

[cimorene]

Sorry about that. The links are fixed now!

[cimorene]

Thank you! :)

[cimorene]

Thanks. :)

[cimorene]

Thank you! :)

[cimorene]

Thanks! :D

[beyourwings]

BTW, are these layouts IS compatible? :o

[my_daroga]

Nice! I've been looking for something vaguely nouveau-themed, and I'm using Going Under now, with credit. Thanks so much!

[plures]

Thank you! Used here, and will also put one of these on my personal journal.

[ex_milkshake156]

all these layouts are really beautiful!
My only problem with them is that you can't see the user names under the icons...

[nerakrose]

is there a way to get custom comment pages? just curious, absolutely not a necessity. i'm trying to choose which one to use, will def. credit when/if i make up my mind. :)