(moving this out of the other thread)
I just released a new theme, Marine with the help and infinite patience of Ryan :).
It is meant to be a simple, neutral theme, that also introduces a usability fix: it transforms the top user menu so it behaves like a normal dropdown, activating on mousover (and not on click as it was before) and making it clearer that it's a menu. In order to do this, it is necessary to apply a patch (the theme will not work without it).
Here's the theme project page and here's the patch.
Screenshot
Suggestions, comments and bug reports are very welcome!
Congratulations!
I'm using it it's awesome, i'd love to see it as the new PP default theme :)
Cheers.
Glad you like it tux!
feel free to report any bugs or requests! :)
First off - great work on the theme. It's clarity is astonishing in comparison to AC 0.71 original. I've really only got one request, a download link to the modified files as not all of us have SVN experience. I have NO CLUE how to install the patch, but am quite happy modifying the install and keeping a record of what I have modified. Many thanks.
!! As always please backup all files !!
-------------------------------------------------
In the file: application/layouts/account.php
--Remove the following line(s)
<?phpecho use_widget('UserBoxMenu')
?>
++Add the following line(s) in the same section
<?phpecho add_javascript_to_page('dropdown.js')
?>
-------------------------------------------------
In the file: application/layouts/administration.php
--Remove the following line(s)
<?phpecho use_widget('UserBoxMenu')
?>
++Add the following line(s) in the same section
<?phpecho add_javascript_to_page('dropdown.js')
?>
-------------------------------------------------
In the file: application/layouts/project_website.php
--Remove the following line(s)
<?phpecho use_widget('UserBoxMenu')
?>
++Add the following line(s) in the same section
<?phpecho add_javascript_to_page('dropdown.js')
?>
-------------------------------------------------
In the file: application/views/application/user_box.php
Replace the following line(s)
<div id="userbox">
<?php echo lang('welcome back', $_userbox_user->getDisplayName()) ?> (<a href="<?php echo get_url('access', 'logout') ?>" onclick="return confirm('<?php echo lang('confirm logout') ?>')"><?php echo lang('logout') ?></a>),
<ul>
<li><a href="<?php echo logged_user()->getAccountUrl() ?>"><?php echo lang('account') ?></a> <?php echo render_icon('bullet_drop_down.gif', '', array('id' => 'account_more_icon', 'class' => 'PopupMenuWidgetAttachTo', 'title' => lang('enable javascript'))) ?></li>
<?php if(isset($_userbox_projects) && is_array($_userbox_projects) && count($_userbox_projects)) { ?>
<li><a href="<?php echo get_url('dashboard', 'my_projects') ?>"><?php echo lang('projects') ?></a> <?php echo render_icon('bullet_drop_down.gif', '', array('id' => 'projects_more_icon', 'class' => 'PopupMenuWidgetAttachTo', 'title' => lang('enable javascript'))) ?></li>
<?php } // if ?>
<?php if(logged_user()->isAdministrator()) { ?>
<li><a href="<?php echo get_url('administration') ?>"><?php echo lang('administration') ?></a> <?php echo render_icon('bullet_drop_down.gif', '', array('id' => 'administration_more_icon', 'class' => 'PopupMenuWidgetAttachTo', 'title' => lang('enable javascript'))) ?></li>
<?php } // if ?>
</ul>
<div class="PopupMenuWidgetDiv" id="account_more_menu">
<p><?php echo lang('account') ?>:</p>
<ul>
<li><a href="<?php echo logged_user()->getEditProfileUrl() ?>"><?php echo lang('update profile') ?></a></li>
<li><a href="<?php echo logged_user()->getEditPasswordUrl() ?>"><?php echo lang('change password') ?></a></li>
<li><a href="<?php echo logged_user()->getUpdateAvatarUrl() ?>"><?php echo lang('update avatar') ?></a></li>
</ul>
<p><?php echo lang('more') ?>:</p>
<ul>
<li><a href="<?php echo get_url('dashboard', 'my_projects') ?>"><?php echo lang('my projects') ?></a></li>
<li><a href="<?php echo get_url('dashboard', 'my_tasks') ?>"><?php echo lang('my tasks') ?></a></li>
</ul>
</div>
<script type="text/javascript">
var account_drop_down = new App.widgets.UserBoxMenu('account_more_icon', 'account_more_menu');
account_drop_down.build();
</script>
<?php if(isset($_userbox_projects) && is_array($_userbox_projects) && count($_userbox_projects)) { ?>
<div class="PopupMenuWidgetDiv" id="projects_more_menu">
<p><?php echo lang('projects') ?>:</p>
<ul>
<?php foreach($_userbox_projects as $_userbox_project) { ?>
<li><a href="<?php echo $_userbox_project->getOverviewUrl() ?>"><?php echo clean($_userbox_project->getName()) ?></a></li>
<?php } // if ?>
</ul>
</div>
<script type="text/javascript">
var projects_drop_down = new App.widgets.UserBoxMenu('projects_more_icon', 'projects_more_menu');
projects_drop_down.build();
</script>
<?php } // if ?>
<?php if(logged_user()->isAdministrator()) { ?>
<div class="PopupMenuWidgetDiv" id="administration_more_menu">
<p><?php echo lang('administration') ?>:</p>
<ul>
<li><a href="<?php echo get_url('administration', 'company') ?>"><?php echo lang('company') ?></a></li>
<li><a href="<?php echo get_url('administration', 'members') ?>"><?php echo lang('members') ?></a></li>
<li><a href="<?php echo get_url('administration', 'clients') ?>"><?php echo lang('clients') ?></a></li>
<li><a href="<?php echo get_url('administration', 'projects') ?>"><?php echo lang('projects') ?></a></li>
<li><a href="<?php echo get_url('administration', 'configuration') ?>"><?php echo lang('configuration') ?></a></li>
<li><a href="<?php echo get_url('administration', 'tools') ?>"><?php echo lang('administration tools') ?></a></li>
<li><a href="<?php echo get_url('administration', 'upgrade') ?>"><?php echo lang('upgrade') ?></a></li>
</ul>
</div>
<script type="text/javascript">
var administration_drop_down = new App.widgets.UserBoxMenu('administration_more_icon', 'administration_more_menu');
administration_drop_down.build();
</script>
<?php } // if ?>
</div>
+++++++++With these line(s):
<div id="userbox"><p><?php echo lang('welcome back', $_userbox_user->getDisplayName()) ?> (<a href="<?php echo get_url('access', 'logout') ?>" onclick="return confirm('<?php echo lang('confirm logout') ?>')"><?php echo lang('logout') ?></a>)</p>
<ul id="account_more_menu">
<li><a href="<?php echo logged_user()->getAccountUrl() ?>"><?php echo lang('account') ?></a>
<ul>
<li>
<h6><?php echo lang('account') ?>:</h6>
</li>
<li><a href="<?php echo logged_user()->getEditProfileUrl() ?>"><?php echo lang('update profile') ?></a></li>
<li><a href="<?php echo logged_user()->getEditPasswordUrl() ?>"><?php echo lang('change password') ?></a></li>
<li><a href="<?php echo logged_user()->getUpdateAvatarUrl() ?>"><?php echo lang('update avatar') ?></a></li>
<li>
<h6><?php echo lang('more') ?>:</h6>
</li>
<li><a href="<?php echo get_url('dashboard', 'my_projects') ?>"><?php echo lang('my projects') ?></a></li>
<li><a href="<?php echo get_url('dashboard', 'my_tasks') ?>"><?php echo lang('my tasks') ?></a></li>
</ul>
</li>
<?php if(isset($_userbox_projects) && is_array($_userbox_projects) && count($_userbox_projects)) { ?>
<li><a href="<?php echo get_url('dashboard', 'my_projects') ?>"><?php echo lang('projects') ?></a>
<ul>
<?php foreach($_userbox_projects as $_userbox_project) { ?>
<li><a href="<?php echo $_userbox_project->getOverviewUrl() ?>"><?php echo clean($_userbox_project->getName()) ?></a></li>
<?php } // if ?>
</ul>
</li>
<?php } // if ?>
<?php if(logged_user()->isAdministrator()) { ?>
<li><a href="<?php echo get_url('administration') ?>"><?php echo lang('administration') ?></a>
<ul>
<li><a href="<?php echo get_url('administration', 'company') ?>"><?php echo lang('company') ?></a></li>
<li><a href="<?php echo get_url('administration', 'members') ?>"><?php echo lang('members') ?></a></li>
<li><a href="<?php echo get_url('administration', 'clients') ?>"><?php echo lang('clients') ?></a></li>
<li><a href="<?php echo get_url('administration', 'projects') ?>"><?php echo lang('projects') ?></a></li>
<li><a href="<?php echo get_url('administration', 'configuration') ?>"><?php echo lang('configuration') ?></a></li>
<li><a href="<?php echo get_url('administration', 'tools') ?>"><?php echo lang('administration tools') ?></a></li>
<li><a href="<?php echo get_url('administration', 'upgrade') ?>"><?php echo lang('upgrade') ?></a></li>
</ul>
</li>
<?php } // if ?>
</ul>
</div>
-------------------------------------------------
In the file: public/assets/javascript/dropdown.js
Add the following:
function menuFix() {var sfEls = document.getElementById("account_more_menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
// event added to keep menu items from disappearing
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
// event added to keep menu items from disappearing
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
//onload call
if (document.all) { // Load sfHover only in IE; other browsers don't need it
if (window.attachEvent) window.attachEvent("onload", menuFix);
else window.onload = menuFix; // Mac IE5 needs this
}
Its ok to have "NO CLUE" on how to install the patch, though I would point out there are pretty well laid out documents on how to do this here http://www.projectpier.org/patch/apply While I applaud xeta for writing this up, it will be much quicker to learn how to apply the patch. Plus, then you'll have a new skill =)
With a full time, one-man web development business, I find it hard to make time to learn skills that I have never needed before and don't anticipate using again any time soon. I do thank the user for writing that up for me and I also understand your thought process in trying to get users to be relatively self-sufficient.
Anyhow, I have gotten around all of this by unzipping the project pier files into a folder and applying the patch with tortoiseSVN through it's convenient context menu on a right click, then noting the changed files and then uploading them by FTP to my install.
I do not know how to apply patches by SVN on my web server, but this has worked just fine as the marine theme works PERFECTLY now and once again I must thank you for taking the time to make a semantically coded drop-down menu system and a great looking theme! Cheers.
Just to tell you guys that I just released an update for the marine theme.
It basically fixes bugs, especially in ie6, and makes the colors slightly more muted.
I'm going through all the code and changing it over to JQuery, I'm trying to include as many patches as possible to make it easier to install. I was hoping to talk to you about changing the dom for easier use with js and css if you didn't mind as we also want to make a 'core.css' defaults.
Hit me up
There is a better workaround for user menu. If you are using menus improvement patch, then older type themes does not work.
I made it on the way that it can figure out what of kind menu theme supports.
I post details soon.
Does anyone know if this theme will be updated for the new beta? It appears to mostly work, just some CSS issues. Im not a CSS guru or I would attempt it myself.
Sorry to say, I don't have much time or motivation to keep this updated. I released this over 3 years ago, and don't feel Project Pier has moved forward much since then. I've moved on to other solutions. If anyone wants to take a shot at it, feel free, and I?m here to answer any questions or help along the way.
Today they launched the next version and it has some pretty killer features. If I were to let you into my beta version to look at, could you tell me where to locate the files to fix the CSS issues?
you can send me the details, and I can take a look, and maybe even do some quick fixes! :)
It appears phpFreak has already fixed it and will be in the next beta round. Thanks!
I'm really glad the Marine theme got updated for 0.8.6 because it is definitely our favorite (KampPro is cool and all, but it is just too dark for our preferences/tastes). The Marine theme is a very pleasant theme that feels cheerful while still feeling very professional.
So thank you to the creator for making it, and thank you to phpfreak for updating it for 0.8.6!
Sean
hi there,
marine is the new default and looks nice. though i have enountered some issues.
* the green button bar seems to not go over the fill width in the screenshots, in my case it does. it's quite irritating because everyone thinks of an hierarchical menu with the three bars, but they are different elements (menu, breadcrumbs, action buttons). also the breadcrumbs don't have the same seperator as in the screenshots
* the tasks don't have the checkbox to be marked as completed, but a textual link under them
do i have to apply the hack above to the core files for this to be fixed? i'm wondering, because the post is from 2008, and some people say that is has been updated to be offically released with PP.
thanks for your support, great project!
philipp
Hi Philipp,
I think the patch was meant for the dropdowns on the top of the page, which are now implemented in the 086 release.
The green button bar and the breadcrumb separators were decisions probably by the designer, and really to make changes you would make a new theme/modify the current one. I can help you with accomplishing these tasks as you go along, but am not really willing to just make the changes myself, as I don't see them as improvements TBH (although I understand your points).
The link instead of a checkbox is a total regression in my opinion, so I am motivated to change that myself, but don't find I have a lot of time to work on this most days, but I am certainly planning on changing that in my theme.
Let me know if you need any help with making those changes!
ok, so do I get it right that everyone has the text link instead of the checkbox in the current version, and a | as breadcrumb seperator? that's a difference to this version showed here: http://www.projectpier.org/files/u264/marine_v1.png - which just confused me.
by the way:
when I go to "my tasks" on the dashboard I do have checkboxes to complete tasks, when I navigate to a profect and then into the project tasks, there is only the text link. maybe just some copy & paste work necesarry here? I think I'm still to new to PP to implement it myself. but time will show :)
Yeah, the screenshot was apparently done before the final version of the theme came out...I see the theme the same way as you showed/described.
Yeah, probably would be possible to implement quick. I might do it next time I am working on PP. Otherwise, let us know if you do it.
I had to remove 'private' from class property on line 11 in:
application/views/comment/object_comments.php
because comments (on Messages page) didn't show.
ver. 0.8.6
regards,
--
alen
This is my favorite theme from all of them:).
One tip...
If anyone has problem with permission table (shrinked) CSS fix should be like this:
add these lines:
#userPermissions td.projectPermission { width: 70px; }
#userPermissions #userProjects {overflow-y:auto}
... to public/assets/themes/marine/stylesheets/admin/user_permissions.css
Hope this helpes.