*UPDATE* Relay Theme 1.0 BETA

[bartsidee]

Hi,
I'm concurrently working on a theme based on the relay ajax directory manager. I was hoping to get some response and tips for the further development. I'm currently still working on the positioning of the hotlist, the design of the mp3table and loginpage, here are some screenshots:
The page layout is based on div and css. I further used the prototype toggle function to get some dynamics into the page. As you can see on the screenshots there is an options box to support the search function, an info box when clicking the kplaylist logo with an enhanced version checker and of course the stream, information and admin boxes on the left that can open/close. All is based on the 'standard' kplaylist theme template and till now no modification to the core index.php have been made. I was hoping to integrate the jw music player into a side box, but to be honest I think this isn't quit possible without drasticly altering the core php file so I probably leave this as it is. The theme will be made public when ready!

[bartsidee]

[07-11-2008]Update:
Today i finished my Relay theme! Rounded up de last view flaws in de code and it should be working just fine now. The theme uses some of the prototype function so it's imported to install en configure prototype before using this theme!

[changes so far]
- New layout and logo
- Information boxes are able to toggle (open/close)
- 1 day toggle state memory for the info boxes (uses a javascript cookie, can be turned off)
- Search box moved to top bar
- Improved version updater: Shows 'Update Now' only when new version is available (still needs to be turned on in the admin settings)
- Clean layout, some information hidden
+Version and statistics hidden, click on the logo to toggle (still needs to be turned on in the admin settings)
+Search option hidden, click on the small button left from the search box to toggle

[Screenshots]




[install instructions]
- Update to the latest kplaylist (1.8+)
- Download and install prototype (Forum Support)
- Download the Relay theme
- Make a new direcory called 'kptheme' in the same folder as index.php and copy the 'relay' folder from the zip file to that new folder
- Add the following code to you're Kplaylist configuration and modify it if needed:

Code: Select all

//JS cookie on for toggle cart memory 0 = off 1 = on
$jscookie = 1;
//Basedir of this theme, end the last folder with a '/'
$themebase = "kptheme/relay/";


- Change the theme configuration on the site
- Done!

[Working Browsers]
-Firefox 2+
-IE6+
-Chrome
-Safari 3+

Still working on a workaround for the png bug in ie6, the script will work in ie6 only the logo looks a bit distorted. Having some problem getting this all organised from within the theme directory without altering the main javascript or php file. You can edit the IEPNGFix.blankImg variable in 'css/iepngfix.htc' for best support with IE.

Have fun using this theme and ofcourse any comments or suggestion are welcome!

Credits to the main layout designers at http://www.ecosmear.com and for the free icon support at http://www.famfamfam.com

[jmelhus]

Hi,

Great work! This is one of the best themes so far I would say...

But there is some bug still..? By example the search options? I couldnt mark any of the settings there...

[bartsidee]

Thanx for the info, turned out that the bug slipped in while trying to solve another bug related to some specific IE z-index behaviour. A quick fix would be to edit the relay.css file and change the z-index in the #head div section.

The #head code with fix:

Code: Select all

#head {
   width:865px;
   height:100px;
   position:absolute;
   top:8px;
   left:16px;
   * z-index: 25;
   *+ z-index: 25;
}

I'm currently working on a fully based ajax version, so I will updat ethe files when I finished that. Full based ajax makes it possible to have a bit more specific file info, and maybe a inbound jwplayer.

[jmelhus]

Sounds very interesting... Looking forward to that

And thanks for the quick fix

[jmelhus]

Search doesn't work now. Do you know why?

[bartsidee]

That's strange, all is working fine here. Have you got javascript enabled in your browser and prototype correctly installed and configured on the configuration tab of kplaylist? To be sure I included the correct css file: LINK

[jmelhus]

Strange, tried both Firefox3 & Internet Explorer7. JS enabled in the browsers. Prototype 1.6.0.3 installed. Seems to be a JS error though. What browser are you using?

[bartsidee]

Tested it on firefox 2 /3 and ie 6 /7 all had no js errors. Do you get a specific error or a blank screen? Mark that the search uses a specific prototype function and it is easy to misconfigure. You can identify a correctly installed prototype at the stream box. This will give you an up-to-date percentage of the current streams. If you don't see a rising percentage (ex: 15%,16%,17% etc) prototype isn't correctly installed.

If this is true check the following:
- In the admin config window you have to set the url to the prototype file correctly, so for example a configuration where prototype js is located in a javascript folder: 'javascript/prototype.js'. Mark that there is no slash on the the beginning! (worked for me on a Apache server config)
- Edit the index.php script and change the $cfg['livestreamajax'] variable to true.

If you got a fresh install my advice would be to renew the database, because it could just be that it is still empty and therefore find nothing.

Hope this helps...

[gueri]

Hi bartsidee,
Very nice work!
Like jmelhus, the search function doesn't work. Impossible to change any of the sittings (album, artist, title...). It's possible to enter text but click the "Search" button do nothing! There is no error message.

[jmelhus]

Hi bartsidee,
Very nice work!
Like jmelhus, the search function doesn't work. Impossible to change any of the sittings (album, artist, title...). It's possible to enter text but click the "Search" button do nothing! There is no error message.

Hi gueri,

To get the settings to work, change to another css file or update the values described in this thread. Or just download this css-file: http://rapidshare.com/files/164928319/kplaylist.css

The interesting part would be if the search button works or not afterwards. I cant get it to work, and I guess the same thing will happen to you. Please give it a try and let me know

[jmelhus]

Update on search-button: I can get a search to work if I press the enter key on my keyboard, instead of using the search-button in the script. Anyone else having the same issue?

[bartsidee]

Does it only work if you push the enter button? I will check the script for that again, hope I will find something for you!

Update on this:
Confirmed that search only works with the enter button. After a fast search in the code I think the problem is the the following section of infobox.kpp (line 33 I believe):

Code: Select all

<input type="button" name="startsearch" value="Zoek" id="searchbtn" alt="Search" onclick="search.start()" />

haven't got the chance to try it out on my own server but I think you can solve the problem by replacing it with the following:

Code: Select all

<input type="button" name="startsearch" value="Zoek" id="searchbtn" alt="Search" onclick="javascript: document.search.submit()" />

Hope it will work!

[bartsidee]

update on the ajax based vesion:
Main code is working. Just having some problems implenting this the playlist editor section. It's a bit hard to debug, but hope to give an update on this soon.

[jmelhus]

Code: Select all

onclick="javascript: document.search.submit()"

Brilliant! That was it

Looking forward to have a look at the version you're describing here...