New Layout: Voodoo Dream

[roddy]

Layout Name: Voodoo Dreams
Version: 3.0
Creator: Roddy of the Frozen Peas (roddy)

Derivative Information:
Based on the Wordpress "Voodoo Dolly" layouts (v. 1.0 by Theme Labs; v. 2.0, Culture Shock, by pogy366.) Attribution is in the CSS.

Screenshots:

Want to try out this layout on your own account? Click here!

Installation Instructions

To install the base layout, follows these instructions very, very carefully:

1. Go to this link and copy the code under the heading "S2 Layout Code."


2. Go to the Advanced Customization page. Under the heading Create a Layer, go to where it says Create a top-level layer, select "Layout" from the Type drop-down, "2" from the Version drop-down, and click "Create."


3. There should be a new item in the table under the heading Your Layers. (It's probably the one with the name (none).) Click the "Edit" button next to that new layer item.


4. The upper-right text box (the really big one) should have some text that says stuff like layerinfo "type" = "layout";. Highlight all the text and delete it.


5. Paste all the code from Step 1 into this upper-right text box. Click "Save & Compile" up at the very top of the screen. A message should appear in the lower-right box that says something along the lines of "S2 Compiler Output. Compiled with no errors."


6. Click "Back to Layers List" at the top of screen. Then go to the Your Styles page.


7. This step depends on the type of account you have:
   
   • If you have a free account: You are not allowed to actually create styles. Click "edit" next to the style in bold text under the heading Your Styles.
   
   
   • If you have a paid account: In the text-box under the heading Create Style, type "Voodoo Dream" and click Create.A new style will be created. Click "edit" next to that new style.
   
   
8. You should now be on the Edit Style page. Fill in the following information:
   
   • Name: Voodoo Dream
   
   
   • Core Version: 2
   
   
   • Language: (none)
   
   
   • Layout: Voodoo Dream (you'll need to click "change" after selecting this)
   
   
   • Leave the rest blank.
   
   
9. Click Save Changes. You will be returned to the Your Styles page. Find the style called Voodoo Dreams under the heading Your Styles and click "Use."

Go back to your journal and click refresh. It should show up as the basic version of Voodoo Dream.

Images

There are four images used by this theme: a header, a footer, the navigation bar, and the grey double arrow bullets. The Voodoo Dolly 2.0 header had a funky looking computer graphic as a logo on the left which I've edited out, but I left the spacing of the header text so that if a logo was added back in, it wouldn't look too weird.

The base header image can be downloaded here (as a PNG): link.
The base footer image can be downloaded here (as a PNG): link
The navigation bar can be downloaded here (as a JPG): link.
The grey bullets can be downloaded here (as a PNG): link.
Both images can be downloaded together, along with the bullets, here: link. (tar.gz)

We would prefer that you download all of the images and host them yourself to save on our bandwidth.

Some free image hosts to consider: ImageShack, PhotoBucket.

Installing Custom Images

Installing the custom images involves setting custom CSS. To do this, navigate Organize > Customize Style > Custom CSS. In the big text box that says "Use embedded CSS. If you'd like to add custom CSS to this style, enter it here.", copy paste the appropriate code:

If you have a custom header:
div#canvas div#header { background-image: url('THE URL HERE'); }

If you have a custom footer:
div#footer { background-image: url('THE URL HERE'); }

If you have a custom bullet:
li { background-image: url('THE URL HERE'); }

Replace THE URL HERE in the various code snippets with the appropriate URL of the image in question.

Make sure that "Use layout's stylesheet(s)" remains checked.

Alternate Installation

If the instructions in the first section are giving you difficulty, it is possible to install this layout by simply copy-pasting CSS code into the custom css field (no layout creation required.) If you intend to do this, be aware that you will no longer be able to do any custom styling by using the color fields in the Customize Style part of Dreamwidth.

1. Set your Style to Tabula Rasa Plain. Click on Customize Your Theme.


2. On the "Display" subpage, set the following options:
   
   
   • Show entry pages in my journal style rather than the site layout: Checked.
   
   
   • Layout Type: Three columns (sidebars on either side.)
   
   
   • Type of tags display on tags page: Multilevel.
   
   
3. Go to this page and select all of the code underneath the heading CSS Code. Copy it (Ctrl+C).


4. Go to the Customize Your Theme > Custom CSS page and paste the CSS code into the box marked "Use embedded CSS" (the really big box.) Uncheck the option titled "Use layout's stylesheet(s)"

If you use this method of installation, note that any additional CSS you add must be placed at the bottom. So if you have any custom images as described in the previous section, copy-paste the CSS code to the bottom of the box, after all of the code that you've copy-pasted from the instructions in this section.

Questions? Comments? Suggestions? Hit me!

Comments

[arobynsung]

This is gorgeous.
Just stunning =D