made to be ruled (morelen) wrote in component_help,
made to be ruled
morelen
component_help

  • Mood:

Skins, anyone?



Somebody asked me how to do this and since I'm on Spring Break and I have nothing better to do, I've made a lame-ass attempt at a tutorial. k1, feel free to edit the crap out of this as you see fit.
******

People often want to know how to "skin" their journals. Well it's actually pretty simple. Hell, if I can do it, anyone with half a brain can. I'm going to assume you know the difference between a theme layer and a user layer. And the difference between a layer and a style. If not, then you might want to read up on that.

Aaanyways...In order to skin your journal, you will need one user layer and several theme layers.

The user layer contains all the parts of the layout that stay the same when you change the skin. That could include additional components and other basic settings.

The theme layers will include the parts of the layout that change with each style/skin. This can include layout colors, background images, banners, etc. It's up to you.

Once you've sorted out what needs to go where, start making those layers. Go to the Your Layers page in Advanced Customization.

Image hosted by Photobucket.com

Create a user layer if you don't already have one. Give it a name, like morelen_user.
Put in whatever coding you need for the "bones" of your layout.

Now for your theme layers.
Make one for each skin and put in the necessary coding.
Here's an example of what your layers page might look like after you're done with this part:

Image hosted by Photobucket.com

Let's head over to the Your Styles page.
Create a new style. For simplicity's sake, you could give it the same name as the theme layer.

Image hosted by Photobucket.com

The next page will ask you to choose a theme layer and a user layer.
Pick out the user layer you made earlier and one of the theme layers.
That takes care of one skin.

Repeat the process with your remaining theme layers.
Again, what your Styles page might look like:

Image hosted by Photobucket.com

Go look at the Styles page. Each style has a number. That number has a link such as http://www.livejournal.com/users/morelen/?s2id=5782840. This link is what changes the skin.

What you can do is create a new component and put in all those style links. That way, whenever someone clicks that link, the style will change.

And that's it.
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 9 comments