Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Create themes
#1
Hello,
I think opendocman can be a very good opensource. But, I do not understand why all web pages are not in smarty template. The advantage of smarty is that all user can define his template, if he know HTML. I start to modify the index.php to put the login page in the smarty concept. I make a quickly example.
The first think is to extract the php code of the login page, initialize the requiered variables and create a login.tpl file.
For exemple, I modify the lines of index.php (107-153) to put :

if(isset($_REQUEST['redirection']))
{
$GLOBALS['smarty']->assign('redirection', $_REQUEST['redirection']);
}
else
{
$GLOBALS['smarty']->assign('redirection', false);
}
$GLOBALS['smarty']->assign('allow_password_reset',$GLOBALS['CONFIG']['allow_password_reset']);
$GLOBALS['smarty']->assign('allow_signup',$GLOBALS['CONFIG']['allow_signup']);
$GLOBALS['smarty']->display('logon.tpl');

I created an logon.tpl file :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 8 - <!-- m --><a class="postlink" href="http://www.wysiwygwebbuilder.com">http://www.wysiwygwebbuilder.com</a><!-- m -->">
<link rel="stylesheet" type="text/css" href="addon/css/login_style.css" />
<script src="addon/js/validform.js" type="text/javascript"></script>
</head>
<body>
<div id="wb_Image2" style="position:absolute;left:32px;top:7px;width:226px;height:151px;z-index:12;padding:0;">
<img src="images/altimirambitecnia.jpg" id="Image2" alt="" border="0" style="width:226px;height:151px;"></div>
<div id="wb_Text4" style="position:absolute;left:146px;top:167px;width:737px;height:62px;z-index:13;">
<span style="color:#00008B;font-family:Arial;font-size:53px;"><strong>Accès al vostre espai client</strong></span></div>
<div id="wb_Form1" style="position:absolute;left:261px;top:259px;width:387px;height:209px;z-index:10;">
<form name="Form1" method="post" action="index.php" id="Form1" onsubmit="return ValidateForm1(this)">
<input type="text" id="Editbox1" style="position:absolute;left:153px;top:94px;width:221px;height:19px;line-height:19px;z-index:0;" name="frmuser" value="">
<input type="password" id="Editbox2" style="position:absolute;left:153px;top:119px;width:221px;height:19px;line-height:19px;z-index:1;" name="frmpass" value="">
<div id="wb_Text1" style="position:absolute;left:21px;top:101px;width:50px;height:16px;z-index:2;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Usuari</span></div>
<div id="wb_Text2" style="position:absolute;left:21px;top:122px;width:82px;height:16px;z-index:3;">
<span style="color:#000000;font-family:Arial;font-size:13px;">Mot clau</span></div>
<div id="wb_Image1" style="position:absolute;left:14px;top:5px;width:88px;height:87px;z-index:4;padding:0;">
<img src="images/login.jpg" id="Image1" alt="" border="0" style="width:88px;height:87px;"></div>
<div id="wb_Text3" style="position:absolute;left:112px;top:11px;width:260px;height:34px;z-index:5;">
<span style="color:#00008B;font-family:Arial;font-size:29px;"><strong>Altimir</strong></span><span style="color:#000000;font-family:Arial;font-size:29px;"><strong> </strong></span><span style="color:#00008B;font-family:Arial;font-size:29px;"><strong>Ambi</strong></span><span style="color:#005500;font-family:Arial;font-size:29px;"><strong>tècnia</strong></span></div>
<input type="submit" id="Button1" name="login" value="Submit" style="position:absolute;left:275px;top:170px;width:96px;height:25px;z-index:6;">
{if $redirection}
<input type="hidden" id="Editbox3" style="position:absolute;left:154px;top:68px;width:94px;height:19px;line-height:19px;z-index:7;" ame="redirection" value="{$redirection}">
{/if}
{if $allow_password_reset == 'True' }
<div id="wb_Text5" style="position:absolute;left:20px;top:154px;width:250px;height:16px;z-index:8;">
<a href="$g_base_url/forgot_password.php">"$g_lang_forgotpassword"</a>
{/if}
{if $allow_signup == 'True'}
<div id="wb_Text6" style="position:absolute;left:20px;top:173px;width:250px;height:16px;z-index:9;">
<a href="$g_base_url/signup.php">$g_lang_signup}</a>;
{/if}
</form>
</div>

And it is all.
Now I will modify my logon.tpl to put css style.
See you early.
Bye


Attached Files
.png   sample login form.png (Size: 13.31 KB / Downloads: 24,937)
#2
Hello,
The next step is define a structured template. First I make a new folder adddon on the root directory with the subfolders images js css
I created the tpl file :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="addon/css/login_style.css" />
<script src="addon/js/validform.js" type="text/javascript"></script>
</head>
<body>
<div id="header_page">
<div id="header_logo">
<img src="addon/images/altimirambitecnia.png" alt="Iso Altimir ambitecnia"/>
</div>
<div id="header_text">
<h1><span class="blau_alti">Altimir </span><span class="blau">Ambit&egrave;</span><span class="vert">cnia</span></h1>
</div>
<div id="header_time">
<iframe src="http://free.timeanddate.com/clock/i2zpgj1q/tlfr2/fn12/fs42/fcfff/tct/pc090/ftb/bls0/brs0/bts4/btc00b/bbs4/bbc00b/th1" frameborder="0" width="211" height="52" allowTransparency="true"></iframe>
</div>
</div>
<form name="Form1" id="form_page" method="post" action="index.php" id="Form1" onsubmit="return ValidateForm1(this)">
<img src="addon/images/login.jpg" id="Image1" alt=""/>
<table>
<tbody>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_username}</span></td>
<td colspan="2"><input type="text" id="Editbox1" name="frmuser" value=""></td>
</tr>
<tr align="Left">
<td width=45%><span class="label">{$g_lang_password}</span></td>
<td colspan="2"><input type="password" id="Editbox2" name="frmpass" value=""></td>
</tr>
</tbody>
</table>
<input type="submit" id="Button1" name="login" value="Submit">
{if $redirection}
<input type="hidden" id="Editbox3" ame="redirection" value="{$redirection}">
{/if}
{if $allow_password_reset == 'True' }
<div class="link">
<a href="$g_base_url/forgot_password.php">{$g_lang_forgotpassword}</a>
</div>
{/if}
{if $allow_signup == 'True'}
<div class="link">
<a href="$g_base_url/signup.php">{$g_lang_signup}</a>;
</div>
{/if}
</form>
</body>
</html>

the css file (login_style.css)

body
{
background-color: #FFFFFF;
color: #000000;
}

/*---------------------------------------------------------*/
/* Header definition */
/*---------------------------------------------------------*/
#header_page
{
width: 90%;
height:151px;
margin-left: auto;
margin-bottom:30px;
background:#FFFFFF;
}
#header_logo
{
display: inline-block;
width: 20%;
height:151px;
vertical-align: top;
background:none;
}
#header_logo img
{
display: inline-block;
height:151px;
width:auto;
vertical-align: top;
}
#header_text
{
display: inline-block;
width: 40%;
height:151px;
vertical-align: top;
background:none;
text-align:center;
}
#header_text h1
{
font-size: 3.5em;
font-family: 'Trebuchet MS', serif;
}
#header_time
{
display: inline-block;
width: 30%;
height:151px;
background:none;
vertical-align: top;
margin-top:45px;
margin-left:70px;
}
.vert
{
color:#26ec06;
}
.blau
{
color:#2c05f3;
}
.blau_alti
{
color:#064975;
}
/*---------------------------------------------------------*/
/* form definition */
/*---------------------------------------------------------*/
#form_page
{
width: 410px;
height:300px;
margin-left: 30%;
margin-bottom:30px;
background:none;
border: 4px solid orange;
opacity:0.7;
filter:alpha(opacity=70);
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
box-shadow: 8px 8px 0px #aaa;
filter:progidBig GrinXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=12);
zoom: 1;

}
#form_page img
{
display: inline-block;
width:88px;
height:87px;
vertical-align: top;
margin-top:20px;
margin-left:15px;
}
#Editbox1, #Editbox2
{
display: inline-block;
border: 1px #000000 solid;
background-color: #E6E6FA;
color :#000000;
font-family: Arial;
font-size: 18px;
text-align: left;
vertical-align: middle;
width:200px;
height:25px;
}
#Editbox1:focus, #Editbox2:focus{
border: 1px red solid;
}
#Button1
{
margin-left:295px;
margin-top:10px;
width:80px;
height:30px;
}
.label
{
margin-left:20px;
font-family: Arial;
font-size: 18px;
}
.link
{
margin-left:20px;
margin-top:10px;
}
.link a
{
font-family: Arial;
font-size: 12px;
color:blue;
}

And a litle js for the form validation:

function ValidateForm1(theForm)
{
var regexp;
if (theForm.Editbox1.value == "")
{
alert("Please enter a value for the \"frmuser\" field.");
theForm.Editbox1.focus();
return false;
}
return true;
}

The index.php file must have the previous post modificacions.
And the result is:


Attached Files
.png   login.png (Size: 48.55 KB / Downloads: 24,935)
#3
Hello,
If we have an login error, the best way is to restart the lgin page.
To do this we can modify the error.php file and modify at the top, to display the login page if we are not connected, and not display the menu and the error status bar. :

if (!isset($_SESSION['uid']))
{
draw_login();
}
else
{
draw_header('Error');
draw_menu($_SESSION['uid']);
@draw_status_bar('Error', $_REQUEST['last_message']);
}


And modiy at the bottom to not display the foter if noboddy is connected.

if (isset($_SESSION['uid']))
{
draw_footer();
}
#4
Hello Olivier,

We will be moving all of the HTML over to smarty soon. It is important for us to separate the logic from the design, but we have had other important issues we have had to deal with.

Are you using 1.2.5.7? If so, 1.2.6 has some of the smarty templates created.

Steve
#5
Hello,
I use the 1.2.6
Yes it is important to separe all HTML from the php files. Actualy I modify the users pages. If you want the source I send you all files when it work fine.
I put css horizontal menus to access directly at all functions, and I look why the datatables does not look like the jquery datatables samples.
Best regard,
Olivier
#6
Hello,
I send you the first version for the user managment and the css menu. I use the user2.php source to have a copy of oficial version. I modified the admin.php to call to the user2.php. I added function in the user class to seek user informations to fill the form.
Best regard,
Olivier


Attached Files
.zip   source.zip (Size: 127.22 KB / Downloads: 330)
#7
Hello,
I put new files with css menu and list user with direct access to update/delete/view buttons.
Best regard,
Olivier
[attachment=0]


Attached Files
.zip   opendocman.zip (Size: 102.03 KB / Downloads: 347)
#8
Hello,
I put screens with the modifications.
Best regard,
Olivier


Attached Files
.zip   view.zip (Size: 43.48 KB / Downloads: 330)
#9
Can i create my own theme
#10
I am currently working on moving all the HTML over to smarty template files. This will make it much easier to create/use custom templates.

Steve


Forum Jump:


Users browsing this thread: 1 Guest(s)