Custom layout

1.) If you just want to hide elements, this can mostly done with css. For example to hide the playlist-node, add to the feathers.css something like
#SB:Playlists { visibility: collapse; }

2.) I'm not sure, but as far as i know, a complex repositioning of elements can't be done with the css-code alone. I'm pretty sure you will have to use XUL Overlays:
( read this: http://wiki.songbirdnest.com/Develope... ). Anytime i repositioned something (less complex) , I use "margin", "padding" and "position:relative/absolute" with "top" or "left" values. For the Song-showing-window, this might work, but its not a very clean way... You can not move the album-art-pane with this (that would be with XUL)

3.) Sure. Just set the "max-height" and "min-height" settings for albumart-pane in the feathers.css (same with "max/min-width", if you want)

(i haven't tried anything of this out! I only think it might work.)

Thanks for your answer. I completely forgot about the CSS, I was only changing the XUL.

1) I want to hide the pane completely. Maybe something like display:none would help. I will try it.

2) As you might have already guessed, I'm aware of it. Unfortuntely I can't find any documentation on the XUL and the elements I can use.

3) I'm not sure, but in CSS I can't set any object to keep square proportion. I want to have height:100% (that already works) and then set the same size for width. I don't know any way how to do this in CSS.

1.) I think "collapse" will be better, with "hidden" you have an empty row, with "collapse" the row is completely gone: http://www.w3schools.com/CSS/pr_class... (But as you said: just test it out)

2.) The Mozilla website really helped me with better documentation on XUL, even if its not songbird-specific: http://www.mozilla.org/projects/xul/

3.) Did you tried the min- and max-width? Maybe for the width, you have to set the width-values of servicepane, not for album-art-pane? Because albumart-pane is a child of servicepane? But you are right, if you need to set relative-values (100%), you can't achieve a square with css, because you have to check what the height is, to set the width. Absolute values (150px) should work.
To use relative values, I think you have to implement an "observer" via XUL (See tutorial on the extension-developer site), to get the value and changes of the height (the hard part), then you can set the fitting width via Javascript (the easy part).

PS: I think the observer/listener you need to get the height/width changes is one of these:

sbIServicePaneListener:
http://developer.songbirdnest.com/add...

sbIDisplayPaneListener:
http://developer.songbirdnest.com/add...

BTW, you can post you question in the extension/feathers developers-forum, too:
http://groups.google.com/group/songbi...

I have a question, too, i'm hoping you might have an answer, because its "small-screen" related: Did you already find a way to skip the min-width for the Songbird-Application? Currently the window can only be resized to 640x480, not smaller. Setting the min-width-value for #mainplayer didn't help :-/

Thaks for the suggestion to use the observer/listener, I will have a look into it.

The "display:none" CSS property worked well, but I had problems filling the empty space. I found a better way to do it using XUL thanks to DOM inspector.

I'm sorry but I have no idea how to lower the min width and height. The smallest I can get is 700x400, which should be O.K. for MIDs (they usually have 800x480 screens). But if Songbird can run on AMR CPU (Google Android, OpenMoko) then it would be really useful to have smaller window then 640x480 (which is the whole screen of these devices).

This is what I created so far. It finally has the layout I wanted to have.

Looks very nice! The tabs are a great idea! It's a really innovative layout =)

How does library work in such a small window? How is filter-pane usability?

Could you integrate the statusbar into play-controls panel? Or into the menu-bar? Both have much empty space, kind of waste of screen ;-)

I'm looking forward to test it!

How does library work in such a small window? How is filter-pane usability?

I don't have such small device yet. But I'm planning to get one as soon as there will be one with at least 120GB space. Currently the only MID available is Gigabyte M528 which only has 4GB. I hope this layout will be also useful for UMPCs like Asus EEE.

I definitely will have to make all texts a and controllers bigger. The screen size of a MID is usually around 5" (12,5 cm).

I would like to keep the layout independent on used skin, so I don't want to create any custom graphics. I think I just use the default one and stretch it using CSS properties. Since Gecko 1.9 uses cairo, it should look OK I hope. Or do you have any better idea? Btw. do you know why doesn't Songbird use SVG?

Also thanks very much for your suggestions.I will try to implement them. As you can see I just started to learn XUL and everything takes me a lot of time to find out. But it's getting better.

Your plan sound great! I want to buy an UMPC, soon, so i really could use it.

No, sorry, i don't no why songbird doesn't use svg. It should be possible, i think, at least firefox has no problems to render them... could be a nice idea for a new skin (if it really works).

Keeping the layout independent on the used skin is a great idea, too. The "more gonzo" - add-on works like this. Its nice to have more layout for ANY feathers :-)

JeCh - is there any way you could continue working on this!? I would LOVE YOU for it! This is one of the better, unique ideas on GS; and i think a lot of people would have fun playing with it..

and btw, songbird uses svg for album art now.

Yeah and me! :)

...Kinda like what I posted over here:
http://getsatisfaction.com/songbird/t...

Hi, I got stuck with some problems. I need to find out how can I change size of scrollbars and other UI elements. Because the size of these elements makes it unusable for a small touchscreen device (like MID or UMPC).

Also it would be very useful to have a possibility drag the playlists with touchscreen like I can drag webpages using this addon for Firefox.

I currently created similar configuration for foobar2000, because it allows easier customization. But I'll try to work on a Songbird version too.

For changing the size of the scrollbars - I believe in your overlay.css you would need to change scrollbar[orient="vertical"] {} and scrollbar[orient="horizontal"] {} to change the width and height of the scrollbars:

scrollbar[orient="vertical"] {
width: 25px !important;
min-width: 25px !important;
}
scrollbar[orient="vertical"] > * {
width: 25px !important;
min-width: 25px !important;
max-width: 25px !important;
}
scrollbar[orient="horizontal"] {
height: 25px !important;
min-height: 25px !important;
max-height:25px !important;
}
scrollbar[orient="horizontal"] > * {
height: 25px !important;
min-height: 25px !important;
max-height: 25px !important;
}


The " > * " changes the thumb and sliders to the same width.
Then you would also need to change scrollbarbutton & scrollcorner to the same width/height.

So are you mainly trying to make something that looks good on smaller touchscreen devices, or would this be universal and work on normal screens.. Or was your original project separate from what you would work on now... Sorry if im bothering you :-P