Skinning NEWB Q&A; List Of Quick How-To Items

[thekochs]

Well, I'm getting into skinning in XL PL 7...alot of fun. I've read the guides and as good as they are they miss items....some basic. So, I thought I'd start a thread on just the Q&A of quick How-To items.

I figured out while in skin editor (Pause/Break) CTRL S is SAVE, CTRL Z is UNDO, CTRL C copies to clipboard a highlighted item, CTRL V pastes the clip board item (FYI...I noticed right over the previous copied so you have to move to see...it's not askew enough to notice). The last two are good for a newb like me add items I'm learning rather than config from scratch.

Here's my first couple questions......
1) How do you ADD an new item to the screen ? Keystroke CTRL ???
2) I understand that you need to assign an ID (name) to an item so you can associate a show/hide item. This procedure is not straight forward from the guides so can someone baby-step thru how/where in the Skin Editor add the item, associate to a show/hide item.

That's a good start....i'll haev more for sure.

Thanks.,

[sharp_1]

1) How do you ADD an new item to the screen ? Keystroke CTRL ???

Not sure if you mean a button or event or ??? Here is how you add a button...now as for events assigned to the button you can download the Xlobby Skinning guide available on my xlobby.help.pages

Here is a clip from Colby's Skinning Guide to try and help you:

2) I understand that you need to assign an ID (name) to an item so you can associate a show/hide item. This procedure is not straight forward from the guides so can someone baby-step thru how/where in the Skin Editor add the item, associate to a show/hide item.

Here is what I found in the variable guide: You will need to add the button hide or show command to your button event.


Good luck!!

[thekochs]

1) How do you ADD an new item to the screen ? Keystroke CTRL ???

Not sure if you mean a button or event or ??? Here is how you add a button...now as for events assigned to the button you can download the Xlobby Skinning guide available on my xlobby.help.pages

Here is a clip from Colby's Skinning Guide to try and help you:

2) I understand that you need to assign an ID (name) to an item so you can associate a show/hide item. This procedure is not straight forward from the guides so can someone baby-step thru how/where in the Skin Editor add the item, associate to a show/hide item.

Here is what I found in the variable guide: You will need to add the button hide or show command to your button event.


Good luck!!

Thanks....read the skinning guide....guess I missed or brain-freezed on the ADD Button....Ugh.

For the Hide...let me explain. The new default skin and many of the others let you scroll thru buttons on the main menu and on the right collague/pics of say music covers, dvd coverat, etc. come up. I've found in the skin editor where these PNG files are located. I even found on some of them in the text the variable set that points to randomized images (eg. category>movies>randoncover). But what I struggle at (since I'm only in the copy & paste mode of learning) is say if you ADD a new button (not copy) and want to make these images tied to that buttong and only display when the button is rolled over how do you setup ? My particular question comes in the skin editor (I think under Advanced) that shows a list of Hide/Show images but if I click in there XL gives me an error. So, somehow these are tied to the button....just not sure where. If you could point me in the right direction I would appreciate it....the Skinning Guide does not really cover this association too well.

[Marbles_00]

For each image, you can name it via Button ID under Default. Then check off "Hide button" (or whatever it is). Then with your button that you want to show the image, just highlight that button, goto Advanced, and find the name of the image you want to show for that button and highlight it. Voila, when you roll over the button, the image will show.

Your next quest will then be to show/hide images within a category selection... ...come on, you know you want to ask...

[thekochs]

For each image, you can name it via Button ID under Default. Then check off "Hide button" (or whatever it is). Then with your button that you want to show the image, just highlight that button, goto Advanced, and find the name of the image you want to show for that button and highlight it. Voila, when you roll over the button, the image will show.

Your next quest will then be to show/hide images within a category selection... ...come on, you know you want to ask...

Yes...yes...please....please...I'm hooked....please tell.........thanks !!! I did see (not 100% sure location since I'm not in front of HTPC) where I think in Text instead of a hard coded text there was a variable of randomized images which was category>movies>randomcover....something like that ? I think this is just a different randomized version of your how-to on image hide/show on rollover except instead of a fixed image it is a variable. Not 100% sure what you mean by show/hide images within a category selection...example ?

[Marbles_00]

Okay, let's for example say that you want to have a menu system built within a database, and display it within a category. There are many reasons to do this. Mainly buttons are all uniform and in line...you don't have to endless tweak each position. All the same button graphics are used across the whole menu...etc, etc. When adding buttons, it is just a simple...add an extra entry to the database, and associate the event to it (or in this case ...image).

There are two ways to show an image that is associated to a button then. The first way is to follow the example above where you bring an image in, name it with the Default/Button ID tag, then check off the hide button check. Then create your menu database (example of skins that have used menu databases/catagories...Mirage, XPro, Elements, XMedia). Open Setup/Database, select the menu database, and open the DB Editor. Highlight each menu selection and click on the Advanced tab. Enter the Button ID you'd like to show under the line "Show Hide (enter...". You can even add multiple images to show by seperating each Button ID with a ":" (as indicated).

The second way takes the advantage of only adding a simple text box to the screen. Size it accordingly to display your images for each button (one size fits all). Name it "image" (without quotes) under Button ID. If I recall, you don't need to hide this text box. Then in the Setup/Database, select your menu database and open the DB Editor. Under the Default tab, next to the "add field" button, add a field called "image" (without quotes)to each menu entry (just remember that your field tag MUST match the Button ID name). Click on the "Browse" button and locate the image you would like to associate with that menu button. The image location should fill that large box area. Keep doing the above steps for each menu entry. Been a while since I tried this, so I'm totally going on memory. If I made a mistake here, either I will realize it, or correct me please.

Now in either case when you scroll over a menu entry, an image should be displayed that is associated to that particular button.

If you indeed want to learn more about menu databases/catagories, it would be worth your while to try out one of the above mentioned skins. Best way to learn...as your finding out...is by trial and error.

Have fun.

*EDIT*
I stand corrected. I used the second procedure in my current downloadable Mirage skin. I just checked it and it is a little different to how I discribed above. In the skin editor, the text field in which the image will be shown should be:

category>menu>image
where "menu" is the category name
"image" is the field name setup in the database (like how I discribed above)

In my skin I did also identify the text box as "image_show" (minus the quotes), but I'm not sure if it is really required. The rest of the steps are fine. View images below:

[thekochs]

Marbles_00....thanks !!!! I'm going to try out this weekend. I'll let you know how it goes.

[rika]

If you like to share your skin, please use;
skin://buttons/moviereel_can.png
That way your database images will work even if XL is installed in other folder than
C:\Program Files\Xlobby

Rika

[thekochs]

That way your database images will work even if XL is installed in other folder than
C:\Program Files\Xlobby Rika

I don't understand this comment....please clarify. I have........
XL FREE installed in C:\Program Files\Xlobby
XL PL 7 installed in C:\Program Files\Xlobby2 {this is the directory I pointed to during the installer}
My skins I use for each are under Skins subdirectory in each of these XLobby/XLobby2. They are
not shared amoung the two installs.

My Customized skin seems to work fine....are you saying there is some hard coding in XL that points to
C:\Program Files\Xlobby instead of C:\Program Files\Xlobby2 {in my case} ? I would assume since for
XL PL 7 the installer made any default directory browse/link changes needed ?

[Marbles_00]

skin://buttons/moviereel_can.png
That way your database images will work even if XL is installed in other folder than
C:\Program Files\Xlobby

Thanks for the tip rika. See even I learn something all the time with xlobby, and I'm a post whore

[sharp_1]

If you like to share your skin, please use;
skin://buttons/moviereel_can.png
That way your database images will work even if XL is installed in other folder than
C:\Program Files\Xlobby

Question: How does this work if you have two .png images that have the same name? Are you saying that you can use any image from any skin at any time in xl?

[rika]

Question: How does this work if you have two .png images that have the same name? Are you saying that you can use any image from any skin at any time in xl?

You cant have two png:s with the same name in one folder (in this case your skins buttons folder, skin://buttons/imgname.png = Loaded skins buttons folder)
You just call your img with a shortcut "skin://buttons/imgname.png" Insted of the hole path C:\Program Files\Xlobby...
This way anybodey how use your skin get the img´s right even if their xlobby path is D:\Myporgram\XL3...

Rika

[thekochs]

For each image, you can name it via Button ID under Default. Check "Hide button" (or whatever it is). Then with your button that you want to show the image, just highlight that button, goto Advanced, and find the name of the image you want to show for that button and highlight it. Voila, when you roll over the button, the image will show.

I know V3 is on thge horizon but I found a bug in V2 in this HIDE function. When you select the HIDE check for a button that is linked to a image (under Advanced) it works great. However, if you go back into Skin Editor and select the button the HIDE funtion is not checked....it basically clears the check box when you open. Obviously, the last state needs to be saved. The bigger issue for example is I have the main menu screen with several individual images for each selection that are hidden. When I go into the Skin Editor ALL the buttons clear the Hide function. I'm forced under any skin edits to make sure my buttons that are hidden are checked for this function prior to exit. It appears the image linked under Advanced is not cleared but the Hide check box is under Default is.

FYI.