Alright, so after a quick break from ModX (tried/trying drupal as well), I truly realized what is so special about it, and decided to come back. Right now, I’m trying to get a log-in form working for my site (onr23.org/cms). I somewhat have it working for the actual log-in, but it’s very buggy. In Fx, the title goes in the right spot, but not the actual form. In IE, it’s still a little messed up formatting wise, but the actual button goes outside of the sidebar. Now what I did to make it was copy it into dreamweaver for easier viewing and then changed it up slightly to fit in with the template. I just copy and pasted the Forgot Password and Log-Out parts. Also, I realize my CSS is a little messy...I worked out another version of the template and changed CSS, but never changed it to the actual online version. And thanks in advance for anyone who can help!
Edit: I got it to fit, but for some reason the log-in button won’t stay in the div...Still wonderning bout coding the Log Out and other things.
Site: onr23.org/cms
Template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[(site_name)] - [*pagetitle*]</title>
<link href="[(base_url)]assets/templates/onr/style.css" rel="stylesheet" type="text/css" />
</head>
<body><div id="container"><div id="banner"></div><div id="side" class="side"><div class="sidebar"><p class="sidebar">Navigation</p></div><div id="navlist">[!Wayfinder?startId=`0` &level=`1`!]</div>[[WebLogin? &tpl=`login`]]</div><div id="mainbar"></div><div id="content"><center><h2 style="font-family: Tahoma; font-size: 18px; font-weight: normal;">[*longtitle*]</h2><p></p>[*content*]</center><div id="footer">(c) 2007</div></div></div></body></html>
Chunk:
<!-- #declare:separator <hr> -->
<!-- login form section-->
<div id="sidebar"><p class="sidebar">Log-In</p></div><br><form method="post" name="loginfrm" action="[+action+]" style="margin: 0px; padding: 0px;">
<input type="hidden" value="[+rememberme+]" name="rememberme">
<table width="164" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="203">
<table width="164" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="48"><b>User:</b></td>
<td width="116"><input type="text" name="username" tabindex="1" onKeyPress="return webLoginEnter(document.loginfrm.password);" size="5" style="width: 100px;" value="[+username+]" /></td>
</tr>
<tr>
<td><b>Pass</b></td>
<td><input type="password" name="password" tabindex="2" onKeyPress="return webLoginEnter(document.loginfrm.cmdweblogin);" size="5" style="width: 100px;" value="" /></td>
</tr></table></table><table align="left">
<tr>
<td><label for="chkbox" style="cursor:pointer">Remember me: </label></td>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" valign="top"><input type="checkbox" id="chkbox" name="chkbox" tabindex="4" size="1" value="" [+checkbox+] onClick="webLoginCheckRemember()" /></td>
<td align="right">
<input type="submit" value="[+logintext+]" name="cmdweblogin" /></td>
</tr>
</table> </td>
</tr>
<tr>
<td colspan="2"><a href="#" onClick="webLoginShowForm(2);return false;">Forget Password?</a></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<hr>
CSS
html, body {
font-size: 12px;
font-family: Verdana, sans-serif;
background-image: url(images/bg.png);
margin: 0px;
text-align: center;
height: 100%;
}
h1, h2, h3, h4, h5, h6, h7 {
font-family: Verdana, sans-serif;
}
p {
font-size: 1em; /* 12px */
line-height: 1.5em; /* 18px */
margin: 0 0 1.5em 0;
}
#container {
width: 700px;
position:relative;
margin:auto;
height: 100%;
border: 3px solid #cccccc;
background-color: white;
}
.navigation ul {
color: white; }
#banner {
background-image: url(images/onr_02.gif);
width: inherit;
height: 99px;
}
#side {
width: 164px;
max-width: 164px;
display: inline;
background-color: #669999;
border: 1px solid #999999;
float: left;
clear: left;
}
.side { width: 164px; display: inline; }
.sidebar {
width: 164px;
height: 20px;
max-height: 20px;
background-image: url(images/onr_06.gif);
border-bottom: 1px solid #999999;
vertical-align: text-bottom;
float: left;
clear: left;
text-align: center;
}
.navigation a:link {
color: White;
text-decoration: none;
}
#navigation { width: 164px; max-width:164px; text-align: left; max-width: 164px; margin-top: 5px; clear: left; }
#navigation ul {
display: block;
}
p.sidebar {
color: White;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1667em; /* 14px */
font-weight: bold;
}
#mainbar {
width: 532px;
background-image: url(images/image_08.gif);
height: 20px;
border: 1px solid #999999;
margin-bottom: 3px;
float: right;
}
.mainbar {
border: 1px solid #999999;
}
#content {
width: 533px;
height: inherit;
float: right;
}
#footer {
font-size: 8px;
clear: both;
bottom: 0px;
text-align: center;
}
#navlist { text-align: left; clear: left; }
#navlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
}
#navlist li a { text-decoration: none; color: white; font-weight: bold; }
