Lisa Fewell (liabunny) wrote in component_help,
Lisa Fewell

Getting Started

Anyone who's been here for awhile already knows how to use all (or at least most) of the codes, but when people first switch to S2 or Component, they usually have a hard time just getting started with the customizing. I thought I'd write something that was *very* simple for people who are new to Component and don't know where to start.

First, there are a couple of links you need to remember. It might be a good idea to bookmark these... Customize and Advanced Customization

Go to Customize and make sure you are using the S2 style system. If you're not, then go ahead and switch to it.

By "Step 1: Layout" choose "Component" and hit the 'change' button.

Under "Step 2: Customize Layout" choose your language and hit "change" and pick a theme with the colors that you like and hit "change".

Now you're set up to use Component.

Under all that, you'll see a button that says "Edit Customizations". Hit it. The page it takes you to is what is referred to as the UI. This is where you tweak your journal to start getting it to look how you want it. Most of this is pretty self-explanatory.

The first page you come to is the "layout" tab. This is where you edit which components you want and where to put them. By each option, it will tell you what it will change. *If you want to add more extra components later, go ahead and set it to show the 'free text' component.*

The second tab is the "color" tab. Go here and pick the colors you want to use.

The third tab is the "presentation" tab. This is where you choose how many entries to a page, background image options, font options, and userpic options. Set these how you want them.

The fourth tab is the "text" tab. This is where you can change the text in your comments links, change the links in the navigation bar or component, change the "previous" and "next" links, and "mood" and "music" text.

When you're done, hit the "save" button at the bottom.

Ok, that was the easy part. Now to the advanced customizations...

On the customize page, at the bottom there is a link to the advanced customization area. Click that.

At the bottom of advanced customizations click the link to Your Layers

At the bottom, under "Create layout-specific layer" select 'Theme' for type and 'Component' for layout and then click "Create". That should add a new option to the page. It will have an ID number, say "Theme" for type, and "(none)" for name. Click 'edit' next to that.

The page you are at now is where you will make *all* of your customizations, adding in any code from any of the tutorials.

But first, let's name your theme. You should see this:

layerinfo "type" = "theme";
layerinfo "name" = "";

The name goes in between "" by layerinfo "name". So we'll make it look something like this:

layerinfo "type" = "theme";
layerinfo "name" = "My Theme";

So what can you do here? Well, you can manually set properties, override the stylesheet, and use any of the tutorials posted in component_help! Properties are the things you set in the UI. But you can put them in here and change them by hand if you want. You can find a list of Component properties here.

Now you can get codes from the tutorials and add them in!

Each time you add in new code from tutorials, just keep adding it to the end. It doesn't matter what order it's in. I just prefer to add it at the bottom so that I know for sure I'm not going to accidently stick it in the middle of some other code and screw things up.

Let me give you a little example of how you're layer is going to look as you're customizing... Of course you may or may not use all of these features, and you may use others that I'm not even listing here... but this will give you an idea...

layerinfo "type" = "theme";
layerinfo "name" = "My Theme";

set text_post_comment = "love me";
set text_read_comments = "1 // # ";
set text_post_comment_friends = "love me";
set text_read_comments_friends = "1 // # ";
set text_meta_music = "The noise around me...";
set text_meta_mood = "I'm feeling...";

function print_stylesheet() {

***Your Stylesheet code will go here***
You can find out how to do this here: Overriding the Stylesheet


function print_free_text(Page p) {

***Your Free Text code will go here***
You can find out how to do this here: Additional Components


function print_profile(Page p) {

***Your Profile code will go here***
You can find out how to do this here: Editing the Profile Component


It is important to make sure you close everything that you're supposed to with the ; or }. It's best to just copy and paste all the codes, and then tweak them to your liking. This way you are less likely to miss some of the important code you need.

Now click "compile" and it should save your layer. If you put in any code wrong, or forgot to close something with a ; or } it won't compile and you will have to go back through and figure out what you did wrong.

Now you need to go back to the customize page. Under "Theme", change it to "My Theme" (or whatever you named your theme as). Hit "change". Refresh your journal and all your customizations should show up.

This is pretty much like what was said in the Additional Components tutorial, but I wanted to write one without the extra information of how to add the components or or using properties and all that... Trying to make it as easy as possible. Cuz to be honest, I got a bit confused figuring it out from that tutorial when I first started customizing Component...
Tags: admin: deprecated, user: liabunny

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

← Ctrl ← Alt
Ctrl → Alt →
← Ctrl ← Alt
Ctrl → Alt →