+- webERP Forum (http://www.weberp.org/forum)
+-- Forum: webERP Discussion (http://www.weberp.org/forum/forumdisplay.php?fid=1)
+--- Forum: Development Discussion & Specification (http://www.weberp.org/forum/forumdisplay.php?fid=10)
+--- Thread: AguaPop Theme is Back!!! (/showthread.php?tid=287)
AguaPop Theme is Back!!! - hindraj - 07-21-2012
Hi All,
I recently play with WebERP again... after a long time
I realize that while it's getting more and more powerful, it's user interface is 'archaic'
... the available themes is very poor.... except 'aquapop'... too bad the newer version 'break' it into a an even uglier theme. 
So, I decided to take a look of what I can do to fix it!!!
I plan to add a better theming support for WebERP, that will make theming easy and fun... Hope that will bring many more new theme for WebERP...
It's not too hard to add theming support, the hardest is to tidying things up in WebERP codes to make theming as consistent and flexible as can be!
Ok, here is for some screeny for you to see...
[attachment=76]
[attachment=77]
Rgds,
Hindra
Here are some more screenies:
[attachment=78]
[attachment=79]
....
[attachment=80]
To use this new theme... you'll need a the new AguaPop theme...
and the following modified files:
index.php
header.inc
footer.inc
I've added some new DIV tags... to make theming easier.
The DIVs are called:
CanvasDiv that contains these more divs:
HeaderDiv
BodyDiv
FooterDiv
In the future, I may add more divs to make theming even more fun
Rgds,
Hindra
Here is the new AguaPop theme: [attachment=81]
Replace the index.php, header.inc, and footer.inc with these modified files: [attachment=82]
Backup first please, just in case!!!
Under those modifed files, the standard themes will be 'broken' (abit)... but, to fix it is really easy... it just need a single change to the default.css file.
Here I included the fixed 'standard themes' to be used with the new theming support. [attachment=83]
Just put the default.css file to the respective css folders in your weberp location.
Next, I'll give you a brand new theme... in a moment...
Rgds,
Hindra
RE: AguaPop Theme is Back!!! - phil - 07-21-2012
I tried to apply you changes to the trunk and aguapop is looking good ... thanks for this. I breifly checked the other themes and these seem ok too. Great that you considered the fixes necessary for other themes too.
Thanks for this work Hindra
RE: AguaPop Theme is Back!!! - hindraj - 07-22-2012
Hi Phil,
I'm working to replace most of the tables from the UI part of the WebERP with the DIVs to 'modernize' it into a tableless, CSS based UI, i.e. separating the presentation from the codes.... more or less
here are some part of the work I've done:
=============================================
<?php
/* $Id: header.inc 5193 2012-04-01 17:56:40Z vvs2012 $ */
// Titles and screen header
// Needs the file config.php loaded where the variables are defined for
// $rootpath
// $title - should be defined in the page this file is included with
$StrictXHTML=False;
if (!headers_sent()){
if ($StrictXHTML) {
header('Content-type: application/xhtml+xml; charset=utf-8');
} else {
header('Content-type: text/html; charset=utf-8');
}
}
if($title == _('Copy a BOM to New Item Code')){//solve the cannot modify heaer information in CopyBOM.php scritps
ob_start();
}
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
echo '<html xmlns="http://www.w3.org/1999/xhtml"><head><title>' . $title . '</title>';
echo '<link rel="shortcut icon" href="'. $rootpath.'/favicon.ico" />';
echo '<link rel="icon" href="' . $rootpath.'/favicon.ico" />';
if ($StrictXHTML) {
echo '<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />';
} else {
echo '<meta http-equiv="Content-Type" content="application/html; charset=utf-8" />';
}
echo '<link href="' . $rootpath . '/css/'. $_SESSION['Theme'] .'/default.css" rel="stylesheet" type="text/css" />';
echo '<script type="text/javascript" src = "'.$rootpath.'/javascripts/MiscFunctions.js"></script>';
echo '</head>';
echo '<body>';
//HJ===========================================
echo '<div id="CanvasDiv">'; //start of CANVAS div
echo '<div id="HeaderDiv">'; //start of HEADER div
//HJ===========================================
//echo '<table class="HeaderTbl">'; //HJ=======================
echo '<div id="HeaderWrapDiv">';
//echo '<tr>';
//echo '<td colspan="2" rowspan="2">';
if (isset($title)) {
//echo '<table cellpadding="0" cellspacing="0" border="0" id="quick_menu" class="quick_menu">';
//echo '<tr>';
//echo '<td align="left" style="width:100%;" class="quick_menu_left">';
echo '<div id="AppInfoDiv">';
// Use icons for company and user data, saves screen realestate, use alt tag in case theme icon not avail.
echo '<img src="'.$rootpath.'/css/'.$theme.'/images/company.png" title="' . _('Company') . '" alt="' . _('Company') . '" />';
echo ' ' . stripslashes($_SESSION['CompanyRecord']['coyname']) . ' <a href="' . $rootpath . '/UserSettings.php"><img src="'.$rootpath.'/css/'.$theme.'/images/user.png" title="User" alt="' . _('User') . '" />' . stripslashes($_SESSION['UsersRealName']) . '</a>';
// Make the title text a class, can be set to display:none is some themes
echo '<br />' . $title . '</td>';
echo '</div>'; //AppInfoDiv
//echo '<td class="quick_menu_tabs">';
echo '<div id="QuickMenuDiv"> <ul>';
//echo '<table cellpadding="0" cellspacing="0" class="quick_menu_tabs"><tr>';
//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/index.php"><span style="text-decoration:underline;">1</span> ' . _('Main Menu') . '</a></td>';
echo '<li><a href="' . $rootpath . '/index.php"><span style="text-decoration:underline;">1</span> ' . _('Main Menu') . '</a></li>';
if (count($_SESSION['AllowedPageSecurityTokens'])>1){
//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectCustomer.php"><span style="text-decoration:underline;">2</span> ' . _('Customers') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectCustomer.php"><span style="text-decoration:underline;">2</span> ' . _('Customers') . '</a></li>';
//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectProduct.php"><span style="text-decoration:underline;">3</span> ' . _('Items') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectProduct.php"><span style="text-decoration:underline;">3</span> ' . _('Items') . '</a></li>';
//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/SelectSupplier.php"><span style="text-decoration:underline;">4</span> ' . _('Suppliers') . '</a></td>';
echo '<li><a href="' . $rootpath . '/SelectSupplier.php"><span style="text-decoration:underline;">4</span> ' . _('Suppliers') . '</a></li>';
//$DefaultManualLink = '<td class="quick_menu_tab" align="center"><a rel="external" href="' . $rootpath . '/doc/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></td>';
$DefaultManualLink = '<li><a rel="external" href="' . $rootpath . '/doc/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></li>';
if (mb_substr($_SESSION['Language'],0,2) !='en'){
if (file_exists('locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php')){
//echo '<td class="quick_menu_tab" align="center"><a target="_blank" href="' . $rootpath . '/locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></td>';
echo '<li><a target="_blank" href="' . $rootpath . '/locale/' . $_SESSION['Language'] . '/Manual/ManualContents.php"><span style="text-decoration:underline;">8</span> ' . _('Manual') . '</a></li>';
} else {
echo $DefaultManualLink;
}
} else {
echo $DefaultManualLink;
}
}
//echo '<td class="quick_menu_tab" align="center"><a href="' . $rootpath . '/Logout.php" onclick="return confirm(\'' . _('Are you sure you wish to logout?') . '\');"><span style="text-decoration:underline;">0</span> ' . _('Logout') . '</a></td>';
echo '<li><a href="' . $rootpath . '/Logout.php" onclick="return confirm(\'' . _('Are you sure you wish to logout?') . '\');"><span style="text-decoration:underline;">0</span> ' . _('Logout') . '</a></l>';
//echo '</tr></table>';
echo '</ul></div>'; //HJ=== QuickMenuDiv
//echo '</td></tr></table>';
//echo '</td></tr></table>';
}
//echo '</td>';
//echo '</tr>';
//echo '</table>';
echo '</div>'; //HJ=== QuickMenuDiv
//HJ======================
echo '</div>'; //end of HEADER div
echo '<div id="BodyDiv">'; //start of BODY div - contains left menu, three columns menu, forms, data, etc
//HJ======================
?>
=======================================================
the CSS file for the 'theme' will be like this: (for the 'header' part only)
==========================================
/*** HEADER ***/
#HeaderDiv{
}
a:active, a:visited, a:link {
color: lightgreen;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: yellow;
text-decoration: none;
}
#HeaderWrapDiv{
background:olivedrab;
height:40px;
border:thin outset olivedrab;
padding-top:3px;
}
#AppInfoDiv{
background:olivedrab;
float:left;
height:40px;
}
#QuickMenuDiv{
background:olivedrab;
float:right;
width: 600px;
height: 40px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
}
#QuickMenuDiv ul{
list-style:none;
margin: 10px 1px 0px 3px;
}
#QuickMenuDiv ul li{
display:inline;
margin: 0px 10px;
float: right;
}
========================================
on the following screenshot, you can see that the 'header' part are all using DIVs now:
[attachment=84]
I'm still working to get the rest done...
Wish me luck!
Hindra Joshua
RE: AguaPop Theme is Back!!! - Exsonqu_Qu - 07-22-2012
Hindra,
It's nice!
Best regards!
Exson
RE: AguaPop Theme is Back!!! - hindraj - 07-23-2012
Hi All,
Sorry, I'm changing the topic here...
At post#1, I only trying to fix the aguapop theme back into a working state! (cause it's broken, since weberp version ???) and at this point it's basically has been fixed!!!.
But, now I'm thinking to fix the 'true' cause of it! i.e. the lack of appropriate theming support in the codes itself: most of the 'UI' stuff are still using tables (which is not intended for structuring UI
) and by the fact that the UI part is not well thought off in the code!Well, allow me to humbly offering a fix, or an upgrade to a hopefully better UI framework for weberp... that will include a background image support for many of the UI part, easier theme making, etc., just like any modern web apps.
It will probably not going to be fast, as to be honest, I only a by-doing learner, ie. doing this programming while i'm learning it from 'google'
alot of searching and reading from many resources on the web.So, from now on, I'll mostly working on bringing the WebERP into a tableless UI design.... and I'll post my progress on the new thread.
Any help from anyone moved by the same cause are very very welcomed....
Best regards!
Hindra Joshua