Outlook Theme
Moderator: moderators
browser?
by trickydick » Thu Jul 28, 2011 9:17 pm
which browser are u using? i noticed the same poblem in firefox, its an issue i cant seem to resolve, but i am still looking into. i also noticed the playlist won't scroll in firefox. thanks for the input.....
Tricky
-
trickydick - Posts: 147
- Joined: Wed Mar 30, 2011 12:43 am
- Location: Sanford, North Carolina
by Hellscream » Fri Jul 29, 2011 9:33 pm
Great job, i like the way u reorganize SS playlist window thats the thing in my mind for a few days. + from me
-
Hellscream - Posts: 160
- Joined: Fri Apr 22, 2011 11:47 am
- Location: Serbia
changecoverart.jsp
by trickydick » Tue Aug 02, 2011 10:13 pm
here is a little mod for the changecoverart.jsp page for the outlook themes; its the one page i left out: just coopy the code into notepad and name it changeCoverArt.jsp.
- Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<html><head>
<%@ include file="head.jsp" %>
<script type="text/javascript" src="<c:url value="/dwr/interface/coverArtService.js"/>"></script>
<script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
<script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
<script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
dwr.engine.setErrorHandler(null);
google.load('search', '1');
var imageSearch;
function setImage(imageUrl) {
$("wait").show();
$("result").hide();
$("success").hide();
$("error").hide();
$("errorDetails").hide();
$("noImagesFound").hide();
var path = dwr.util.getValue("path");
coverArtService.setCoverArtImage(path, imageUrl, setImageComplete);
}
function setImageComplete(errorDetails) {
$("wait").hide();
if (errorDetails != null) {
dwr.util.setValue("errorDetails", "<br/>" + errorDetails, { escapeHtml:false });
$("error").show();
$("errorDetails").show();
} else {
$("success").show();
}
}
function searchComplete() {
$("wait").hide();
if (imageSearch.results && imageSearch.results.length > 0) {
var images = $("images");
images.innerHTML = "";
var results = imageSearch.results;
for (var i = 0; i < results.length; i++) {
var result = results[i];
var node = $("template").cloneNode(true);
var link = node.getElementsByClassName("search-result-link")[0];
link.href = "javascript:setImage('" + result.url + "');";
var thumbnail = node.getElementsByClassName("search-result-thumbnail")[0];
thumbnail.src = result.tbUrl;
var title = node.getElementsByClassName("search-result-title")[0];
title.innerHTML = result.contentNoFormatting.truncate(30);
var dimension = node.getElementsByClassName("search-result-dimension")[0];
dimension.innerHTML = result.width + " × " + result.height;
var url = node.getElementsByClassName("search-result-url")[0];
url.innerHTML = result.visibleUrl;
node.show();
images.appendChild(node);
}
$("result").show();
addPaginationLinks(imageSearch);
} else {
$("noImagesFound").show();
}
}
function addPaginationLinks() {
// To paginate search results, use the cursor function.
var cursor = imageSearch.cursor;
var curPage = cursor.currentPageIndex; // check what page the app is on
var pagesDiv = document.createElement("div");
for (var i = 0; i < cursor.pages.length; i++) {
var page = cursor.pages[i];
var label;
if (curPage == i) {
// If we are on the current page, then don"t make a link.
label = document.createElement("b");
} else {
// Create links to other pages using gotoPage() on the searcher.
label = document.createElement("a");
label.href = "javascript:imageSearch.gotoPage(" + i + ");";
}
label.innerHTML = page.label;
label.style.marginRight = "1em";
pagesDiv.appendChild(label);
}
// Create link to next page.
if (curPage < cursor.pages.length - 1) {
var next = document.createElement("a");
next.href = "javascript:imageSearch.gotoPage(" + (curPage + 1) + ");";
next.innerHTML = "<fmt:message key="common.next"/>";
next.style.marginLeft = "1em";
pagesDiv.appendChild(next);
}
var pages = $("pages");
pages.innerHTML = "";
pages.appendChild(pagesDiv);
}
function search() {
$("wait").show();
$("result").hide();
$("success").hide();
$("error").hide();
$("errorDetails").hide();
$("noImagesFound").hide();
var query = dwr.util.getValue("query");
imageSearch.execute(query);
}
function onLoad() {
imageSearch = new google.search.ImageSearch();
imageSearch.setSearchCompleteCallback(this, searchComplete, null);
imageSearch.setNoHtmlGeneration();
imageSearch.setResultSetSize(8);
google.search.Search.getBranding("branding");
$("template").hide();
search();
}
google.setOnLoadCallback(onLoad);
</script>
<style type="text/css">
/*Google powered by branding*/
td.gsc-branding-text div.gsc-branding-text, td.gcsc-branding-text div.gcsc-branding-text { display:none; }
td.gsc-branding-img-noclear, td.gcsc-branding-img-noclear { display:none;}
</style>
</head>
<body class="mainframe bgcolor1">
<div class="bgcolor1 static searchbox" style="left: 0; top: 0; margin-left:-5px; padding: 10px 0px 0px 10px; border-width:1px; width: 100%; height: 30px; z-index:100;">
<div class="searchboxleft">
<sub:url value="main.view" var="backUrl"><sub:param name="path" value="${model.path}"/></sub:url>
<div class="back"><a href="${backUrl}"><fmt:message key="common.back"/></a></div>
</div>
<div id="pages" style="float:left; margin-top:5px;"></div>
<div class="searchboxright">
<form action="javascript:search()">
<table class=""><tr>
<td><input id="query" name="query" size="70" type="text" value="${model.artist} ${model.album}" onClick="select()"/></td>
<td style="padding-left:0.5em"><input type="submit" value="<fmt:message key="changecoverart.search"/>"/></td>
</tr></table>
</form>
</div>
</div>
<div style="height:3.5em"></div>
<h1><fmt:message key="changecoverart.title"/></h1>
<div style="float:right;padding-right:1em; margin-top:-1em">
<form action="javascript:setImage(dwr.util.getValue('url'))">
<table><tr>
<input id="path" type="hidden" name="path" value="${model.path}"/>
<td><label for="url"><fmt:message key="changecoverart.address"/></label></td>
<td style="padding-left:0.5em"><input type="text" name="url" size="50" id="url" value="http://" onClick="select()"/></td>
<td style="padding-left:0.5em"><input type="submit" value="<fmt:message key="common.ok"/>"></td>
</tr></table>
</form>
</div>
<h2 id="wait" style="display:none"><fmt:message key="changecoverart.wait"/></h2>
<h2 id="noImagesFound" style="display:none"><fmt:message key="changecoverart.noimagesfound"/></h2>
<h2 id="success" style="display:none"><fmt:message key="changecoverart.success"/></h2>
<h2 id="error" style="display:none"><fmt:message key="changecoverart.error"/></h2>
<div id="errorDetails" class="warning" style="display:none">
</div>
<div id="result">
<div id="branding" style="float:right;padding-right:1em;padding-top:0.5em">
</div>
<div style="clear:both;">
</div>
<div id="images" style="width:100%;padding-bottom:2em">
</div>
<div style="clear:both;">
</div>
</div>
<div id="template" style="float:left; height:190px; width:220px;padding:0.5em;position:relative">
<div style="position:absolute;bottom:0">
<a class="search-result-link"><img class="search-result-thumbnail" style="padding:1px; border:1px solid #021a40; background-color:white;"></a>
<div class="search-result-title"></div>
<div class="search-result-dimension detail"></div>
<div class="search-result-url detail"></div>
</div>
</div>
</body></html>
Tricky
-
trickydick - Posts: 147
- Joined: Wed Mar 30, 2011 12:43 am
- Location: Sanford, North Carolina
new enhancements
by trickydick » Tue Aug 09, 2011 2:04 am
So i'm working on the themes again. this time I'm changing all the html to DIV/CSS instead of Tables. I've also changed some items like pagination feature, mouseover effects, jquey items (scrollable 3d music list) and I added google chat API internally.
I was really curious in designing the site with no frames, but have had no success. i've seen the itunes theme do it, but i wanted it make the changes minimum to the original themes or at least keep there structure in place, but I believe once I get all the structure in DIV format, they will be easier to rearrange for a single frame design.
I'll keep you posted.
I was really curious in designing the site with no frames, but have had no success. i've seen the itunes theme do it, but i wanted it make the changes minimum to the original themes or at least keep there structure in place, but I believe once I get all the structure in DIV format, they will be easier to rearrange for a single frame design.
I'll keep you posted.
Tricky
-
trickydick - Posts: 147
- Joined: Wed Mar 30, 2011 12:43 am
- Location: Sanford, North Carolina
Re: Outlook Theme
by trickydick » Thu Aug 18, 2011 3:23 am
New screenshots for an updated cleaner outlook theme
Basically, i'v added jquery mouseover effect for top menu (this works with all themes as it will detect if you have a rollover image for each icon, if not it won't rollover). I've added cleaner buttons for the playist (more bubbly), bigger rating stars too. there is a few new icons in the top menu now, chat (to an extenal jsp google chat system), and a donate button (this is the personal donate button, not the subsonic donate; if you haven't donated this will still show up below the logout link)
other changes:
changes accordion colors to match outlooks mouseover
added gradient mouser color to album select screen (3rd image)
added cleaner pagination style to coverart selector page (4th image)
Screenshots:
my next project is this one (read my post):
http://forum.subsonic.org/forum/viewtopic.php?f=8&t=7456#p30310
Basically, i'v added jquery mouseover effect for top menu (this works with all themes as it will detect if you have a rollover image for each icon, if not it won't rollover). I've added cleaner buttons for the playist (more bubbly), bigger rating stars too. there is a few new icons in the top menu now, chat (to an extenal jsp google chat system), and a donate button (this is the personal donate button, not the subsonic donate; if you haven't donated this will still show up below the logout link)
other changes:
changes accordion colors to match outlooks mouseover
added gradient mouser color to album select screen (3rd image)
added cleaner pagination style to coverart selector page (4th image)
Screenshots:
my next project is this one (read my post):
http://forum.subsonic.org/forum/viewtopic.php?f=8&t=7456#p30310
Tricky
-
trickydick - Posts: 147
- Joined: Wed Mar 30, 2011 12:43 am
- Location: Sanford, North Carolina
Re: Outlook Theme
by precipitous » Thu Aug 18, 2011 4:40 pm
Really love what you have done so far! In fact, I would love to see it become the default theme.
I am experiencing one odd behavior, though... I have Subsonic installed on an Ubuntu Maverick box. After installing your theme, if I access it with Firefox 6 on the same computer, everything looks perfect. When I access it from my computer at work, which is running Windows 7 and Firefox 6 - everything looks perfect except for the main toolbar at the top. It still has the old subsonic icon and toolbar buttons. Does anybody know what might be going on?
I am experiencing one odd behavior, though... I have Subsonic installed on an Ubuntu Maverick box. After installing your theme, if I access it with Firefox 6 on the same computer, everything looks perfect. When I access it from my computer at work, which is running Windows 7 and Firefox 6 - everything looks perfect except for the main toolbar at the top. It still has the old subsonic icon and toolbar buttons. Does anybody know what might be going on?
-Precipitous
http://themapmakersdilemma.blogspot.com/
http://themapmakersdilemma.blogspot.com/
-
precipitous - Posts: 91
- Joined: Fri Aug 14, 2009 6:43 pm
- Location: Santa Barbara CA USA
Re: Outlook Theme
by precipitous » Thu Aug 18, 2011 5:04 pm
precipitous wrote:Really love what you have done so far! In fact, I would love to see it become the default theme.
I am experiencing one odd behavior, though... I have Subsonic installed on an Ubuntu Maverick box. After installing your theme, if I access it with Firefox 6 on the same computer, everything looks perfect. When I access it from my computer at work, which is running Windows 7 and Firefox 6 - everything looks perfect except for the main toolbar at the top. It still has the old subsonic icon and toolbar buttons. Does anybody know what might be going on?
Issue resolved. I cleared the browser cache, logged out of Subsonic, then back in. Re-selected theme, and voilà.
-Precipitous
http://themapmakersdilemma.blogspot.com/
http://themapmakersdilemma.blogspot.com/
-
precipitous - Posts: 91
- Joined: Fri Aug 14, 2009 6:43 pm
- Location: Santa Barbara CA USA
Re: Outlook Theme
by switch81 » Sat Aug 20, 2011 4:55 pm
Sorry if I missed it, but how do you install this for an Ubuntu setup? I'm running Subsonic 4.5 and I used the "Debian/Ubuntu installation" procedure found on Subsonic's main page.
Do I install the theme pack to the /var/subsonic folder?
Do I install the theme pack to the /var/subsonic folder?
- switch81
- Posts: 4
- Joined: Wed Aug 03, 2011 10:45 pm
Re: Outlook Theme
by precipitous » Sat Aug 20, 2011 7:46 pm
switch81 wrote:Sorry if I missed it, but how do you install this for an Ubuntu setup? I'm running Subsonic 4.5 and I used the "Debian/Ubuntu installation" procedure found on Subsonic's main page.
Do I install the theme pack to the /var/subsonic folder?
All you need to do is extract the contents of the theme pack *.zip file to your /var/subsonic/jetty/####/webapp/ folder, making sure to over-write all preexisting files. There is a ReadMe file in the theme pack *.zip file that gives complete instructions...
-Precipitous
http://themapmakersdilemma.blogspot.com/
http://themapmakersdilemma.blogspot.com/
-
precipitous - Posts: 91
- Joined: Fri Aug 14, 2009 6:43 pm
- Location: Santa Barbara CA USA
Re: Outlook Theme
by switch81 » Sat Aug 20, 2011 8:57 pm
Thank you!
yes, i did read the readme, however I did not realize that the webapp folder was under /var/subsonic/jetty/###/
yes, i did read the readme, however I did not realize that the webapp folder was under /var/subsonic/jetty/###/
- switch81
- Posts: 4
- Joined: Wed Aug 03, 2011 10:45 pm
Re: Outlook Theme
by pdcorcoran » Sat Aug 27, 2011 1:52 am
Thanks for your efforts in creating the Outlook themes. I have a couple of questions - probably having to do with making edits in a file or two:
- How do I increase the vertical width of the menu bar at the top? Right now, in FF, C and IE, there is a scroll bar on the right and only the top 2/3 of the frame is visible. I figure I need to increase the vertical dimension by 30 to 50%.
- I still have the same login screen and not the new screen you showed us with the screenshots. I cleared out the FF cache, and also get the same login screen in C and IE.
Thanks much
- How do I increase the vertical width of the menu bar at the top? Right now, in FF, C and IE, there is a scroll bar on the right and only the top 2/3 of the frame is visible. I figure I need to increase the vertical dimension by 30 to 50%.
- I still have the same login screen and not the new screen you showed us with the screenshots. I cleared out the FF cache, and also get the same login screen in C and IE.
Thanks much
- pdcorcoran
- Posts: 19
- Joined: Mon May 11, 2009 1:52 am
Re: Outlook Theme
by trickydick » Sat Aug 27, 2011 6:10 am
Make sure you use the index.isp file in the theme. This will set the top correctly.
Did u make the Outlook theme the default screen in the admin console (the same page u setup your welcome message)? Once this is changed it will take affect, then log off.
Did u make the Outlook theme the default screen in the admin console (the same page u setup your welcome message)? Once this is changed it will take affect, then log off.
Tricky
-
trickydick - Posts: 147
- Joined: Wed Mar 30, 2011 12:43 am
- Location: Sanford, North Carolina
Re: Outlook Theme
by pdcorcoran » Sat Aug 27, 2011 12:44 pm
trickydick wrote:Make sure you use the index.isp file in the theme. This will set the top correctly.
Did u make the Outlook theme the default screen in the admin console (the same page u setup your welcome message)? Once this is changed it will take affect, then log off.
I made the change in the admin console and that worked great.
When I installed the theme, I unzipped and overwrote what was in the webroot folder. The index.jsp file has a datestamp of 07/15/2011. I still have the too-thin top bar.
I wonder if Subsonic is looking at another file rather than the index.jsp file in the webroot folder.
Thanks again.
- pdcorcoran
- Posts: 19
- Joined: Mon May 11, 2009 1:52 am
Return to Mods, Apps and Clients
Who is online
Users browsing this forum: No registered users and 18 guests