Login

hindraj · (This post was last modified: 07-21-2012, 07:26 AM by hindraj.)

Hi All,

I recently play with WebERP again... after a long time Smile

I realize that while it's getting more and more powerful, it's user interface is 'archaic' Big Grin

... the available themes is very poor.... except 'aquapop'... too bad the newer version 'break' it into a an even uglier theme. Confused

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... Big Grin

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...

Rgds,
Hindra

Here are some more screenies:

....

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 Smile

Rgds,
Hindra

Here is the new AguaPop theme:
.zip

hj aquapop new.zip (Size: 141.83 KB / Downloads: 38)

Replace the index.php, header.inc, and footer.inc with these modified files:
.zip

hj modified.zip (Size: 4.9 KB / Downloads: 25)
Backup first please, just in case!!! Angel

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.
.zip

standard themes fixed.zip (Size: 21.77 KB / Downloads: 26)
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... Big Grin

Rgds,
Hindra

***phil*** · 07-21-2012, 03:23 PM,

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

hindraj · 07-22-2012, 03:53 PM,

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 Smile

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:

I'm still working to get the rest done...

Wish me luck! Smile

Hindra Joshua

Exsonqu_Qu · 07-22-2012, 06:58 PM,

Hindra,

It's nice!

Best regards!

Exson

hindraj · (This post was last modified: 07-23-2012, 02:42 AM by hindraj.)

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 Smile

) 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' Big Grin

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.... Big Grin

Best regards!
Hindra Joshua

Login
Username:
Password:	Lost Password?
	Remember me