Subject: Development Notes (All Skin Engine Additions Listed Here)
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-17-2009 at 06:47 AM
eJukebox v4.99.57
-new skin ability to create custom faded/gradient/shadowed looking text on each artist name in the artist list and each song title in the songlist
-can now optionally add any of the following to artistlist.dis to layer an alpha PNG image OVER each Artist name's text:
.Artistrow span {background: url(your.png) repeat-x;}
.Artistrow2 span {background: url(your.png) repeat-x;}
-can now optionally add any of the following to songlist.dis to layer an alpha PNG image OVER each Song Title's text:
.title span {background: url(your.png) repeat-x;}
.titlehi span {background: url(your.png) repeat-x;}
.titleedithi span {background: url(your.png) repeat-x;}
it is hard to see in this white skin screenshot but the new .dis pngs actually blend over the text (based on alpha channel in png). The png used in
this screenshot is very transparent. It should be possible for skins to display fading/gradient looking text with the right png.
Audiosoft has attached this image:
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-17-2009 at 10:21 AM
Ah ah.. beautiful effect Audiosoft!
No doubt this new layer of PNGs will help us to produce even more surprising effects. Thanks.
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-17-2009 at 08:58 PM
songlist track title effects
Add text line shadows and/or overlay/fade/gradient style text effects on the songlist track titles by using a png image:
requires eJukebox v4.99.57 or newer
Song title overlay effect:
add the following to songlist.dis:
.title span { margin-top: -6px; background: url(overglow.png); background-repeat:no-repeat; }
.titlehi span { margin-left: -3px; margin-top: -6px; background: url(overglow2.png); background-repeat:no-repeat; }
.titleedithi span { margin-left: -3px;margin-top: -6px; background: url(overglow3.png); background-repeat:no-repeat; }
change the "margin-top:-6px;" to adjust the png related to the text. add "height: 100% to make the png display equal to the lines of text
Song title shadow/under text effect:
To show a png image BEHIND the text you can use "div" instead of "span".
add "position: absolute;" to the .title div{} to make the png appear behind the text portion only and not extend to the full area width.
just remember that songlist.dis's .title and .artistshow DIV is behind the text and SPAN is on top of the text.
Audiosoft has attached this image:
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-17-2009 at 11:08 PM
Interesting explanations Audiosoft..
In songlist.dis can I use .artistshow span {} or .artistshow div {} as well ?
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-17-2009 at 11:11 PM
Behind artist name text shadow in songlist.dis:
.artistshow div{ background: url(overglow.png) repeat-y;}
.artistshowhi div{ background: url(overglow.png) repeat-y;}
Behind album name text shadow in songlist.dis:
.albumwimage span{ background: url(overglow.png) repeat-y;}
.albumwimagehi span{ background: url(overglow.png) repeat-y;}
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-17-2009 at 11:46 PM
Well in fact I would like to add a artist icon in front of the artist name in songlist.dis. But it seems your latest tricks are reserved for the text
area, behind or ontop, but not separate from the text. The only Big advantage in my case would be the additional PNG is not affected by the css
filters. I'll test more..
Pirk has attached this image:
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-17-2009 at 11:56 PM
Pirk I updated the .57 exe download and also cleaned up the code in this thread.
now can use songlist.dis .artistshow div{ for the text and span{ for overlaying artist name to. the span will work to show a png over more than just
the text portion if you adjust the margin-top to a negative number:
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-18-2009 at 10:26 AM
Thanks a lot for the update and the css code.
I will try to make that my artist icon not be affected by the css filters in .artistshow and .artistshowhi.
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-30-2009 at 09:45 PM
v4.99.65
-optional add .vidresults{} to songlist.dis to skin netvideo results container
-optional add to songlist.dis to skin netvideo blocks different than your .title and .title hi:
.vidstream{} .vidstreamhi{}
and optional for text area .vidstream span{} .vidstreamhi span{}
and optional for thumbnail image .vidstream img{} .vidstreamhi img{}
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-30-2009 at 10:39 PM
Audiosoft, when you work around.. There is no option to Enlarge my Internet Bandwidth? It's a bit too slow for videos.. As I know you can do
impossible things!
More seriously, if we could have the youtube Rating Stars displayed beside the video thumbnails, that would help us to choose the best video
streams..
Thanks anyway for these new skinning options.
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 3-31-2009 at 08:18 AM
lol Pirk glad you like it despite your slow connection! buffers pretty good if you wait.
also the tube results layout could be improved. will need to at least update it to show 2 columns instead of 3 for non-edv so titles shows. i don't
know if stars are really needed but i will look into it. i might be able to sort them highest rated first instead of by relevance.
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 3-31-2009 at 09:15 AM
Sometimes it works pretty good, no break with some videos, but which ones?
Quote:
Message original : Audiosoft
i might be able to sort them highest rated first instead of by relevance.
I think that could be a good idea! (rating -> relevance)
Maybe it exists another criterion for the streaming "availability"?
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-5-2009 at 09:34 PM
v4.99.89
optionally can now add the following to colors.ini to set independent styles for albumlist bar pin:
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-10-2009 at 12:15 AM
v4.99.895
-new ability to further skin eJukebox buttons in colors.ini with PNG images
-optional PNG images appear stretched OVER the original button with 50% opacity when the mouse is not over it.
when the mouse is over the button there is a new animation effect that fluctuates the PNG's opacity between 50% and 100%
-can now add the following under any of the style button {Headers} in colors.ini:
PNG=yourimage.png
-note the PNG must be in your images skin folder. also the PNG should have some opacity near the middle otherwise it will cover the button text when
fully highlighted.
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-10-2009 at 01:29 AM
.
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-10-2009 at 01:29 AM
.
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-12-2009 at 05:23 AM
Re-Style eJukebox Buttons and Morph between 2 PNGs for Button Highlight Effect
v4.99.90
-greater flexibility when skinning eJukebox buttons. can now restyle eJukebox buttons with 2 PNGs and morph between the 2 for the highlight effect.
-under any of the style button {Headers} in colors.ini add PNG=yourimage.png
-when a yourimageHI.png is in skin folder yourimage.png will render 100% over the button and it will morph to the HI.png for the highlight animation.
when there is no yourimageHI.png in the skin folder the PNG=yourimage.png will appear at 50% opacity and fluctuate opacity for the highlight
animation.
Including a yourimageHI.png will ensure your yourimage.png can cover the edges of the original button and give you full control over the normal and
highlight. just make sure to leave some opacity near the center in the png file or it will cover the button caption. for some buttons you can add the
caption in the png if you wish but others like the a-z bar you will need at least some transparency near the center.
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-23-2009 at 06:08 AM
How to set span{} equal to the height of the text
When using .title span{}'s in the songlist.dis to shadow the songlist title text....instead of using height: 100%; you should use the expression
below so that the title text stays aligned to the middle vertically and the png covers all lines of the text and nothing more.
this is just one example yours can look totally different. Notice the difference in the TEXT in this screenshot. first the .titlehi has no span in
this skin so that text is not shaded. shading is achieved on the texts of the other titles using the .title span{} above and a PNG (purple->clear)
that matches up with the height of 1 line text....which then repeats when there are multiple lines.
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-23-2009 at 07:31 AM
here is another screen this time with the .title span{} text shading showing over multiple lines of text
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-23-2009 at 07:53 AM
here it is with a different .title span{} png and a transparent .title{} background so you can see the area better...the only thing visible is the
.title span{} png over the text.
Audiosoft has attached this image:
Audiosoft
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 6-23-2009 at 09:05 AM
Very interesting Audiosoft! I will try your new formula.. of course!
Thanks a lot.
Pirk
Pirk
Posting Freak
Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline
posted on 6-23-2009 at 07:36 PM
well Audiosoft.. your formula just freezes my skin and ejukebox too!
that's OK.. no more freezing when I put the formula in span instead of div.
Pirk
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 6-23-2009 at 09:40 PM
yes forgot to mention...be careful with expressions!
if you use an incorrect value ej will freeze up! if it happens again just end ejukebox.exe from taskmanager and correct the expression in the dis
before restating ej!
also doesn't height: 100% work for the div? if not you can let me know which div and i will figure out the correct expression for it.
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 7-1-2009 at 05:01 AM
4.99.91
-new ability to use png images for the 'now playing' stars
-optionally include a "\nowstars\" folder in your skin images folder with 0-10.png files like the images in the albumpop folder but any size
-add optional \nowstars\layout.ini containing the following to set number of pixels from the top of eJukebox for the stars
[StarPos]
Y=15
Create "nowstars" folder first then extract zip to the \eJukebox\images\skinname\nowstars\ folder
then you can freely resize the 0-10.png images in photoshop to any dimensions and it will automatically center horizontally
Attachment: nowstars.zip (49.67kb)
This file has been downloaded 976 times
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 7-15-2009 at 10:26 AM
v4.99.92 - optionally add a "songlistshadow.png" to your skin
Audiosoft has attached this image:
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 7-16-2009 at 04:48 AM
Keyboard Skin
v4.99.93
optionally add these to your skin to replace the default keyboard
also can include keyboardbuttonHI.png for button over
BTW "Reload Colors" skin menu item reloads the keyboard
Attachment: ejkeyboard.zip (98.64kb)
This file has been downloaded 1027 times
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 8-18-2009 at 09:47 PM
v4.99.95
-fixed a-z buttons alignment so there is never a space between the buttons
Recommended use Style=8 with PNG=your.png and PNG=yourHI.png in colors.ini
-fixed "songlistshadow.png" so it hides when right side hidden
-can now hide left border in colors.ini under [Left] add Hide=1
-in [MainButtons] section can now add the following in colors.ini to alter the button height and top position in pixels
Top=21
Height=21
PNG=your.png
can now add Top= to set middle sizer border pixels from top
[NowPlayingRight]
Background=3947580
HiBackground=8667956
Style=4
Top=43
PNG=your.png
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 9-3-2009 at 07:52 PM
v4.99.96
-can now add the following to colors.ini to change the right edge to a color other than black
[RightEdge]
Background=11908533
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 9-30-2009 at 02:11 AM
New Artist List Highlight Options
eJukebox v4.99.982
-can now give the Artist List a different text color on highlight and have it alternate the text and background highlight colors for odd and even
rows.
Use notepad to add the following to the bottom of artistlist.dis:
*Color (only Color= was supported before 4.99.982) and Color2 are the row background color for odd and even rows
TextColorHi and TextColor2Hi are the odd/even row text color when highlighted
TextColor and TextColor2 are the off text color and should = the color:# in the .Artist { or .Artistrow and .Artistrow2
to make only the text change color and not the background you can set the following
Color=transparent
Color2=transparent
Audiosoft
Audiosoft
Super Administrator
Posts: 3397
Registered: 3-11-2003
Member Is Offline
posted on 10-7-2009 at 06:48 AM
v4.99.984
-new optional [LargePlayControls] Top=X or -X pixels in colors.ini
-skin now will use a lsnglistbrd.jpg if exists over a lsnglistbrd.gif
-skin now will use a rsnglistbrd.jpg if exists over a rsnglistbrd.gif
New Now Playing Control Area Background JPG and Seek PNGs
-new optional add a timeslider.png for a large time seek handle - increase the image height to position the slider how you want.
-new optional add a timeemptybg.jpg for underneath the play controls
-new optional add a timeelapsedbg.png for underneath the play control buttons and have it stretched below timeelapsed.jpg
Audiosoft
posted on 6-23-2009 at 06:08 AM
