How to create a theme layer for advanced customization

[afuna]

This entry is a basic how to; it's meant to answer the question "How do you create and use a theme layer" and (very briefly) "What are layers?", "Why use a theme layer?".

The basic settings to customize your theme can be accessed and modified via the Customize Journal Style page. However, if you're doing something more complicated, you may need to modify code snippets or manually set some variables. For these, you will need to know how to create a theme layer and attach it to your style.

First of all, a quick rundown of terms:

A style is what is applied to your journal, and it is made up of several layers. A layout layer is the basic structure or framework of the style. Customizations via the Customize Journal Style page will be saved as auto-generated customizations in a user layer. Any other modifications you make, you should do in a theme layer. A theme layer can contain system-provided default color settings; it can also contain any additional advanced customizations you wish to apply to your journal.

Technically, you can just modify a user layer, and it seems easier to do that, because it's already been created for you and you can skip the few steps required to create and attach a new theme layer to your style. However, this is a bad idea, because hand-edited changes to a user layer may be erased the next time you use the wizard. To be safe, always create a separate theme layer if you need to edit something manually.

• Find your current style information
  
• Create a new theme layer
  
• Copy existing theme layer settings to your new theme layer
  
• Apply the new theme layer to your style
  
• Tips
  

Find your current style information

I assume that you want to customize the style which is currently applied to your journal. So first, you will have to find your current style information. We're going to skip the more graphical options wizard and jump straight into the advanced customization area:

1. Go to your list of styles
   
2. Look for the bolded style, click "Edit"
   
3. You will see a bunch of dropdown boxes. Take note of the layout name.
   
   For example:
   
   where the dropdown shows that we're using Core 2, the Skittlish Dreams layout with the Red theme, and we have some auto-generated customizations.
   

We'll come back to this page later. For now let's go and create our new theme layer.

Create a new theme layer

This step involves clicking a bit...

1. Go to your list of layers. At the bottom, under "Create a layout-specific layer", create a new layer with type: "theme", layout: "Skittlish Dreams" (or whatever layout it was you noted earlier)
   
2. After the page reloads, note the latest number for the layer that's under your layout. It will look like this:
   
   
   

Copy existing theme layer settings to your new theme layer

(This step is optional, and may not be required if you're not using colors from an existing system theme, or if you are customizing your colors via the wizard)

You may have noticed that above, I mentioned that a theme layer could contain both system-provided default colors (the theme you choose when you select a journal style), or your own advanced customizations.

You start off with the system-provided theme, which is basically a skin of colors and images over your layout. When you create your theme layer, which will replace the existing theme layer, you now have to copy over these colors from the old theme layer.

1. Go to the list of public layers
   
2. Look for your layout name, and click the "Expand" link.
   
3. The page will reload, and you will be given a list of themes for this layout. Click through to your theme
   
4. On this new page, click on "Raw Source Code". Copy everything
   
5. Go back to your your list of layers, edit the theme you had created earlier, and paste in everything. You'll probably want to modify the name, though. Save your changes.
   
   You can edit this layer at any time, now: set variables, add code snippets, modify functions, etc.
   

Apply the new theme layer to your style

One last step: we need to make our current style use the new theme layer, so that any changes we make to the theme layer will show up on our journal.

Go back to the style we edited in the first section. In the theme dropdown, change the theme to your newly created theme. Save your changes.

And we're done!

Tips

Two tips:

• if you want to let others view your layer, so you can debug code, etc, add this line to your theme layer:
  
  layerinfo source_viewable=1;
  
  
• if you want to let others use your layer, or to be able to automatically preview the effects of your layer, given a theme id, then add this line:
  
  layerinfo is_public=1;
  

Comments

[badtzhobby]

Thank you for this tutorial.