Audiosoft Forums Last active: Never
Not logged in [Login - Register]
Go To Bottom

Printable Version | Subscribe | Add to Favourites   Post new thread Poll:
 Pages:  1  2  3
Author: 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 Edit Post Reply With Quote
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:
overtext.jpg - 48.22kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-17-2009 at 10:21 AM Edit Post Reply With Quote
Ah ah.. beautiful effect Audiosoft!
No doubt this new layer of PNGs will help us to produce even more surprising effects. Thanks.




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 3-17-2009 at 08:58 PM Edit Post Reply With Quote
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".

.title div{ margin-top: -10px; background: url(overglow.png); background-repeat:no-repeat; position: absolute; }
.titlehi div{ margin-top: -10px; background: url(overglow2.png); background-repeat:no-repeat; position: absolute; }
.titleedithi div{ margin-top: -10px; background: url(overglow3.png); background-repeat:no-repeat; position: absolute; }

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:
overglow2.png - 4.69kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-17-2009 at 11:08 PM Edit Post Reply With Quote
Interesting explanations Audiosoft..

In songlist.dis can I use .artistshow span {} or .artistshow div {} as well ?




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 3-17-2009 at 11:11 PM Edit Post Reply With Quote
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;}




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-17-2009 at 11:46 PM Edit Post Reply With Quote
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:
artist.jpg - 29.16kb




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 3-17-2009 at 11:56 PM Edit Post Reply With Quote
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:

Layer png over songlist.dis artist name:
-----------------------------------------
.artistshow span { margin-top: -6px; background: url(overglow.png); background-repeat:repeat-y; height: 100%; }
.artistshowhi span { margin-top: -6px; background: url(overglow2.png); background-repeat:repeat-y; height: 100%; }
.artistshow div{ margin-top: 16px; }
.artistshowhi div{ margin-top: 16px; }




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-18-2009 at 10:26 AM Edit Post Reply With Quote
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.




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 3-30-2009 at 09:45 PM Edit Post Reply With Quote
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{}




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-30-2009 at 10:39 PM Edit Post Reply With Quote
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.




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 3-31-2009 at 08:18 AM Edit Post Reply With Quote
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.




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 3-31-2009 at 09:15 AM Edit Post Reply With Quote
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"?




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-5-2009 at 09:34 PM Edit Post Reply With Quote
v4.99.89

optionally can now add the following to colors.ini to set independent styles for albumlist bar pin:

[AlbumListPin]
Background=
Text=
HiBackground=
HiText=
Style=




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-10-2009 at 12:15 AM Edit Post Reply With Quote
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:
Copy of Gelbutton.png - 9.89kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-10-2009 at 01:29 AM Edit Post Reply With Quote
.

Audiosoft has attached this image:
Gelbutton2.png - 8.87kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-10-2009 at 01:29 AM Edit Post Reply With Quote
.

Audiosoft has attached this image:
buttonglow.png - 13.35kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-12-2009 at 05:23 AM Edit Post Reply With Quote
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.




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

shocked.gif posted on 6-23-2009 at 06:08 AM Edit Post Reply With Quote
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.

.title span{
margin-top: -5px;
height: expression(this.parentNode.childNodes(1).offsetHeight+5);
background: transparent;
background-position: left top;
background-repeat: repeat;
background-image: url(songlisttitlespan.png);
}

use this in artistlist.dis to overlay a png and match the row height

.Artistrow span {
margin-top: -3px;
left: 5px;
background: transparent;
height: expression(this.parentNode.offsetHeight+3);
background-position: left top;
background-repeat: repeat;
background-image: url(artistrowspan.jpg);
}

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. :D

Audiosoft has attached this image:
songlistscreen.jpg - 63.36kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-23-2009 at 07:31 AM Edit Post Reply With Quote
here is another screen this time with the .title span{} text shading showing over multiple lines of text

Audiosoft has attached this image:
multilinescreen.jpg - 86.21kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-23-2009 at 07:53 AM Edit Post Reply With Quote
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:
onlyspan.jpg - 108.1kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 6-23-2009 at 09:05 AM Edit Post Reply With Quote
Very interesting Audiosoft! I will try your new formula.. of course! :D
Thanks a lot.




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Pirk
Posting Freak
*****




Posts: 3976
Registered: 3-11-2003
Location: France
Member Is Offline

posted on 6-23-2009 at 07:36 PM Edit Post Reply With Quote
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. :D




:cool: Pirk
View User's Profile Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 6-23-2009 at 09:40 PM Edit Post Reply With Quote
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.




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 7-1-2009 at 05:01 AM Edit Post Reply With Quote
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 805 times





:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 7-15-2009 at 10:26 AM Edit Post Reply With Quote
v4.99.92 - optionally add a "songlistshadow.png" to your skin

Audiosoft has attached this image:
songlistshadow.png - 9.68kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 7-16-2009 at 04:48 AM Edit Post Reply With Quote
Keyboard Skin

v4.99.93

optionally add these to your skin to replace the default keyboard

keyboardbg.jpg <-background
keyboard.png <-foreground

in colors.ini:

[KeyboardButtons]
Background=0
Text=16777215
HiBackground=0
HiText=16777215
Style=9
PNG=keyboardbutton.png

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 824 times





:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 8-18-2009 at 09:47 PM Edit Post Reply With Quote
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




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 9-3-2009 at 07:52 PM Edit Post Reply With Quote
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




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 9-30-2009 at 02:11 AM Edit Post Reply With Quote
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:

[HiArtistBackground]
Color=#627599
Color2=#627599
TextColor=#676767
TextColorHi=#FFFFFF
TextColor2=#676767
TextColor2Hi=#FFFFFF


*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




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
Audiosoft
Super Administrator
*********




Posts: 3397
Registered: 3-11-2003
Member Is Offline

posted on 10-7-2009 at 06:48 AM Edit Post Reply With Quote
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 has attached this image:
newpcontrolskino.jpg - 39.84kb




:cool: Audiosoft
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U Member
 Pages:  1  2  3
Post new thread Poll:

Go To Top

Audiosoft Home | Download EJukebox for Windows | Register EJukebox
©2019 Audiosoft Network. All rights reserved.
[queries: 16]
HTML5 Color Picker for CSS Opacity
Short Url Service with Stats