cimorene: A black-and-white vintage photograph of 1920s singer Helen Kane in profile, with a dubious, side-eye expression (we're all mad here)
Cimorene ([personal profile] cimorene) wrote2009-05-08 07:07 pm
Entry tags:

Dreamwidth Layout: Paper Me

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!

Paper Me - Sugary Freesias Paper Me - Emphatically Take It Paper Me - Nouveau Going Under Paper Me - Header Img




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

1-2. Sugary (Milk Script in header, lowercase Century Gothic in sidebar)
Paper Me - Sugary Freesias Paper Me - Sugary Bobby Pins
Live (fonts won't work until you install them): 1.Freesias 2.Bobby Pins

3-4. Playfully (Sacchi Handwriting in header, Arial in sidebar)
Paper Me - Playfully Plummy Paper Me - Playfully Chiyo
Live (fonts won't work until you install them): 3.Plummy 4.Chiyo


5-6. Retro (Pussycat in header, Trebuchet in sidebar)
Paper Me - Retro Know Where Paper Me - Retro Aqua
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)
Paper Me - Emphatically Clover Garden Paper Me - Emphatically Take It
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)
Paper Me - Nouveau Going Under Paper Me - Nouveau Kingdom
Live (fonts won't work until you install them): 9.Going Under 10.Kingdom


11-12. Serif (lowercase serif in header and sidebar)
Paper Me - Serif Meep Paper Me - Serif Jim Beam
Live: 11.Meep 12.Jim Beam


13. Header IMG (custom header, lowercase serif in header, uppercase serif in sidebar)
Paper Me - Header Img
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!
we: A flock of birds against a blue background. (Kerry - Roses)

[personal profile] we 2009-05-08 04:38 pm (UTC)(link)
You are AWESOME. I am going to take and save several of these, and credit. <3
we: A flock of birds against a blue background. (Default)

[personal profile] we 2009-05-08 04:45 pm (UTC)(link)
Although, when I try to get to the layer, it says I'm not authorised to view it.

(no subject)

[personal profile] beyourwings - 2009-05-08 17:14 (UTC) - Expand

(no subject)

[personal profile] lucybird - 2009-05-08 17:54 (UTC) - Expand

(no subject)

[personal profile] we - 2009-05-08 18:22 (UTC) - Expand

(no subject)

[personal profile] lucybird - 2009-05-08 18:52 (UTC) - Expand

(no subject)

[personal profile] beyourwings - 2009-05-08 18:06 (UTC) - Expand

(no subject)

[personal profile] beyourwings - 2009-05-08 18:19 (UTC) - Expand

(no subject)

[personal profile] beyourwings - 2009-05-08 21:03 (UTC) - Expand

(no subject)

[personal profile] beyourwings - 2009-05-08 23:59 (UTC) - Expand

(no subject)

[personal profile] beyourwings - 2009-05-09 00:07 (UTC) - Expand
sierra: ► sierra ( d n s ) (Default)

[personal profile] sierra 2009-05-08 04:42 pm (UTC)(link)
these are pretty awesome!
allegory: (Default)

[personal profile] allegory 2009-05-08 04:45 pm (UTC)(link)
These are lovely! ♥ You have a great sense of aesthetics.

[personal profile] beyourwings 2009-05-08 05:11 pm (UTC)(link)
LOVE IT! I want to use them all XDD
evelyn: nonnetta @ deviantART (Default)

[personal profile] evelyn 2009-05-08 05:13 pm (UTC)(link)
I'm also told I can't view some of the text
raynedanser: (Default)

[personal profile] raynedanser 2009-05-08 05:37 pm (UTC)(link)
RE #3:
There is an error and I'm not authorized to view it.
hendrix: (voodoo child)

[personal profile] hendrix 2009-05-08 05:42 pm (UTC)(link)
Oh man. Thank you. I put this entry in my memories. :) I will credit when I use one!
my_daroga: Mucha's "Dance" (iconic)

[personal profile] my_daroga 2009-05-08 06:20 pm (UTC)(link)
Nice! I've been looking for something vaguely nouveau-themed, and I'm using Going Under now, with credit. Thanks so much!

(no subject)

[personal profile] my_daroga - 2009-05-08 19:15 (UTC) - Expand

[personal profile] milkshake 2009-05-08 06:43 pm (UTC)(link)
all these layouts are really beautiful!
My only problem with them is that you can't see the user names under the icons...

(no subject)

[personal profile] milkshake - 2009-05-08 19:45 (UTC) - Expand
nerakrose: drawing of balfour from havemercy (stairway to heaven)

[personal profile] nerakrose 2009-05-08 06:46 pm (UTC)(link)
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. :)
ramen: (MUSIC ♡ karen o - smile)

[personal profile] ramen 2009-05-08 06:47 pm (UTC)(link)
Using plummy with credit :D Beautiful!
lucybird: (Whiskers)

[personal profile] lucybird 2009-05-08 06:51 pm (UTC)(link)
Thank you! Now I have my dream layout after following your adaptations!
nanceoir: Michael Bubl&eacute; is shocked. (Shock!)

[personal profile] nanceoir 2009-05-08 09:04 pm (UTC)(link)
Nice layouts. I'm not sure I'll switch things around just yet (because I've already done that a few times), but I have to comment. Why? When looking at the preview images, I noticed an icon from the "Moses" number from Singin' in the Rain! That's awesome! And then I saw that you have a lot of SitR icons here, which is more awesome. It's nice to see some SitR love around here. (See, on LJ I'm [livejournal.com profile] cosmob and have almost always had some SitR icon.)

And now I'm considering bringing over a SitR icon, because, well... it's SitR and therefore awesome.
momentomori: (Dali)

[personal profile] momentomori 2009-05-08 09:52 pm (UTC)(link)
These are awesome! Using now with background and color changes but I'll probably switch to one of the originals because they're all so pretty. Thank you :D

(no subject)

[personal profile] momentomori - 2009-05-08 23:30 (UTC) - Expand
torachan: (Default)

[personal profile] torachan 2009-05-09 01:43 am (UTC)(link)
These are really cute. Too busy for me, but I really like them. :)
thymindmaymove: avengers - tony/steve hugging it out (Default)

[personal profile] thymindmaymove 2009-05-09 04:02 am (UTC)(link)
These are gorgeous! Snagging a few with credit.
paper_hand: Sakaki from Azumanga Daioh holding Maaya (Default)

[personal profile] paper_hand 2009-05-09 04:09 am (UTC)(link)
Cool! Thanks! :-)

One thing I can't figure out. On mine, the mood text (where it says "Mood: ___") is showing up as a light grey, which is hard to read on the background I chose. I can't figure out how to change that

(no subject)

[personal profile] paper_hand - 2009-05-09 13:09 (UTC) - Expand
magycmyste: (Default)

[personal profile] magycmyste 2009-05-09 06:25 am (UTC)(link)
These are gorgeous! I think I want to use Emphatically - Clover Garden now. (though I should probably do it in the morning, or I'll manage to screw up the coding)
anglepoiselamp: Harle from Chrono Cross is one of my most favourite videogame characters. :) ([Persona] Chidorita <3)

[personal profile] anglepoiselamp 2009-05-09 03:12 pm (UTC)(link)
Oooh. Most excellent - I've been wanting to do something about my journal layout but didn't feel like starting from scratch. And I've always been a fan of your awesomely colourful journal styles. :)
indeliblesasha: Bright highlighter-pink tulips with yellow tulips in the background surrounded by bright green foliage (Default)

[personal profile] indeliblesasha 2009-05-09 03:56 pm (UTC)(link)
I love and adore Meep. :) Thank you for these, so much.
darth_vader: (Default)

[personal profile] darth_vader 2009-05-09 04:43 pm (UTC)(link)
Thank you so much! I grabbed one of your alternate wallpapers and will be using the lowercase serif theme. I'll credit in my profile. :)
frabjous: (Default)

[personal profile] frabjous 2009-05-09 06:41 pm (UTC)(link)
1. Awesome layout(s).

2. I freaking love the Enchanted Forest series.
angelskuuipo: (eliot by marasho)

[personal profile] angelskuuipo 2009-05-09 06:46 pm (UTC)(link)
Thank you so much! Your instructions were very helpful and quite easy to follow.
evoiiice9a: (Default)

[personal profile] evoiiice9a 2009-05-09 10:54 pm (UTC)(link)
Beautiful *__*
graspthethorn: (prydferth)

[personal profile] graspthethorn 2009-05-10 02:01 am (UTC)(link)
These are so so lovely. I'm very gratefully nabbing Emphatically--Take It. Because it is pretty.

Thanks so much for saving me from my own appalling attempts at coding, hahaha <3333

Page 1 of 3

<< [1] [2] [3] >>