Page 1 of 6

Outlook Theme

PostPosted: Sun Jul 10, 2011 4:18 am
by trickydick
So tell me what you think?

I have been working on these themes for a few weeks now. I just finished the blue theme and am working on the silver and black versions.
The theme does add a few more features in subsonic like hover over menu, calendar and structure change (playlist). I made sure that this theme do not effect any other themes available. The only real change to subsonic is the the frames have been slightly rearranged (playlist.jsp and right.jsp) and I've moved the search bar as a static div under the main area.
The calendar does not hold a purpose but only a visual aspect...until I learn jsp that is. I have also incorporated the player mod and am working to add the accordian mod with outlook button images....

take a look...

Image

...please let me know if there are any modifications to be made.

Once complete, if anyone is interested, i will post the themes.

Latest mods

PostPosted: Sun Jul 10, 2011 5:05 am
by trickydick
ok, so i noticed i was using the wrong color scheme (bgcolor1 and bgcolor2 were swapped) and I finally put the accordian menu in. i will be modifying it to get it to look like outlooks buttons.

take a look...

Image

Blue theme complete!!!

PostPosted: Mon Jul 11, 2011 4:26 am
by trickydick
Here is the final blue theme:

Image

Features added: Accordion dropdown (with different css styles for all themes), player mod with upload button, calendar. frame up/down resizing for playlist.

What do you think?

PostPosted: Mon Jul 11, 2011 6:36 am
by Qbix
I must say...GREAT JOB! Looks very good!
Can you share the code to make me able to resize the playlist frame?

I will download your theme later this week but I want to implement that part
of your theme in my theme as well.

But again...it looks really really cool...I like the color scheme and the calendar! :)

PostPosted: Mon Jul 11, 2011 9:39 am
by Qbix
It seems that you can re size the frames by default. I just hold my cursor
on the line between two frames and I was able to drag them around, I didn't change anything.

The only question is, can you also make the mouse cursor change as soon as it's above one of the lines? So people know they can re size it?

PostPosted: Mon Jul 11, 2011 11:09 am
by djsubsonic
Where can we download this amazing theme

PostPosted: Mon Jul 11, 2011 11:21 am
by SparkyRih
Very nice job... Can't wait to give it a try :)

Resizing the playlist window

PostPosted: Mon Jul 11, 2011 7:24 pm
by trickydick
I will be posting the source files for the themes in time. I am working on Outlooks black and silver themes. I want to post them as an Outlook Pack.

I am also going to see if i can get the mouseover affect for the resize and i am working on a font resizer scroll bar next to the player, this way we can resize the playlist for less scrolling.

by default i believe the resizing is there...just really hard to see. I just put a line there to identify it, but as I made my own frame here is what i did:

For resizing the playlist, you will need to remove the noresize in the index.jsp file. change this:
Code: Select all
<frame src="playlist.view?" name="playlist" noresize="noresize" />


to:
Code: Select all
<frame src="playlist.view?" name="playlist" />


The only problem is subsonic's structure needs to be changed too, otherwise your right frame will be resized. Here is the modified version of the index.jsp. I use this same exact one for the outlook themes.

Code: Select all
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="iso-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<html><head>
    <%@ include file="head.jsp" %>
    <link rel="alternate" type="application/rss+xml" title="Subsonic Podcast" href="podcast.view?suffix=.rss">
</head>

<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
    <frame src="top.view?" name="upper" scrolling="No" noresize="noresize" />
  <frameset rows="*" cols="245,*" framespacing="0" frameborder="no" border="0">
     <frame name="left" src="left.view?">
   <frameset rows="*" cols="*,${model.showRight ? 232 : 0}" framespacing="0" frameborder="no" border="0">
     <frameset rows="*,220" cols="*" framespacing="0" frameborder="no" border="0">
      <frame src="nowPlaying.view?" name="main" />
      <frame src="playlist.view?" name="playlist" />
     </frameset>
      <frame  src="right.view?" name="right" noresize="noresize" />   
   </frameset>
  </frameset>
</frameset>
<noframes></noframes>


</html>


Now if you want a line you will have to modify a small section fo the the default.css or the theme file you would like it to be visible:

Search for the .playlistframe then add "border-top: color solid 1px;" within the {} should look like this:

Code: Select all
.playlistframe {
    border-top: #849dbd solid 1px;
}

PostPosted: Wed Jul 20, 2011 11:52 am
by sergiocos
Amazing theme, congrats! And count me in as a subscriber to this thread for a release.

PostPosted: Thu Jul 21, 2011 8:52 pm
by rino655
this theme is UNREAL! thank you sir :)
Cant wait for it to be done

Its ready!!!! Take a look :)

PostPosted: Wed Jul 27, 2011 3:21 am
by trickydick
Ok sorry for the wait...i have done ALOT of modifications and I wanted to add them to the themes. Changes made:
    -Cleaned up graphics, better edges, cleaner lines
    -converted as TONS of tables into DIV's (controlled by CSS now)
    -Implemented my player mod (version 2.0)
    -Cleaned up calendar colors.
    -Added cursor arrows on playlist frame when sizing the frame
    -Modified some JSP code to support themes


Now i have tried very hard to make this themes compatible with the original subsonic code and its themes; to get everything fluent and clean looking, i had to change some code around, add new jsp code, etc. I have kept all the original themes intacked, although the CSS codes have been modified some. All of this will be included in the download but first here are the screenshots:

Outlook Black
Image
Image

Outlook Blue
Image
Image

Outlook Silver
Image
Image

I know what you are all waiting for...where is the d#$% download!!! Well I am still working on that. I am collecting all the required files and should have the download available in a few days to include the player mod. Sorry again for delay. Please give me any feedback on the screenshots.

IE9 Compatible

PostPosted: Wed Jul 27, 2011 3:24 am
by trickydick
oh and i made it compatible with IE 9, if you notice the compatiblity button is not enabled. I think you will love it!

PostPosted: Wed Jul 27, 2011 4:42 pm
by Ultraviolet
Looks fantastic. Sign me up as a user as soon as you can put up the files.

This theme + The ability to drag and drop items on the playlist to sort (instead of current arrows) would be my dream solution.

Finally. Download Available

PostPosted: Thu Jul 28, 2011 3:30 am
by trickydick
I had to make a modification to the player (added avanced menu) but, here it is:

https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B1iBWlUz8eUkNTFmOWFlOTMtNzQ4Zi00MWQ3LTgxZmEtYzg5YzJkZjAwYzM1&hl=en_US

NOTE: This theme has been tested on Subsonic ver 4.4 and 4.5 beta 1 hosted on a Windows/tomcat server

Installation steps:
    1.) BACKUP the subsonic webapp/root folder before continuing
    2.) Stop the tomcat/jetty service. close all browsers
    3.) Extract all files to the webapp root folder OVERWRITE ALL files.
    4.) Start service and reopen browser.

IMPORTANT: I updated the themes.txt with all subsonic themes includeing mine and the buff theme (buff theme files are not included). Any additional themes will have to be removed from the list. ALSO This theme pack will change some configurations in CSS/JSP/JS files. If you have any mods prior to this, this may change the design.

CUSTOMIZATIONS: I've added alot of separate CSS files to render specific designs (calendar, playermod, accordion, etc)....all of them are linked to the original CSS theme files. If you want to change these or remove these, just look for:
Code: Select all
@import "accordion-darkness.css";
@import "default.css";
@import "playermod-cccccc.css";

within a theme files such as in the midnight.css. Its as simple as removing or changing the import css to one you like best.
Please let me know if somethign doesn't look right or is missing

The accordion themes are named as "accordion-<theme>.css" all based on the jQUERY UI site (http://jqueryui.com/themeroller/)

The playermod themes are named "playermod-<colorcode>.css". They use the images located in a cooresponding folder named the same as its colorcode.

KNOWN ISSUES
    - Internal Player width is 600px; if playlist frame is smaller than that it will disappear.


Again, please let me know if something doesn't look right or is missing


Enjoy

PostPosted: Thu Jul 28, 2011 3:34 pm
by Ultraviolet
Overall, I really really like it. I have some oddities happening with the calendar: buttons are on top of date and year. I just installed it a minute ago so I'll play with it more now and let you know. Thanks for all the hard work--it's looking great.