PDA

View Full Version : Main Admin Panel CSS'd out



cguild
08-07-2006, 09:51 AM
Hey all,
I don't know how useful vetrans of Open Realty will find this Admin Panel display, however the data entry folks in my office suggested an Admin panel which seperates the different functions for different level of users.

Here it is a CSS'd out version of the main Admin Panel. It seperates the different functions into 3 boxed in areas with easy to read headings and contrasting backgrounds. It is very easy to install and should work for versions 2.0 and above. (I made it using 2.2.0)


The icons are attached and the code is below.

JUST COPY AND PASTE THE FOLLOWING CODE INTO A NEW HTML FILE.


<style type="text/css">
<!--

#divAdminMainWrap {
padding: 8px;
width: 90%;
}
#divAdminMainWrap a {
color: #000000;
text-decoration: underline;
}
#divAdminMainWrap a:hover {
color: #333333;
text-decoration: none;
}
#divSpaceDiv {
height: 22px;
}
#divAdminMainWrap img {
border: 0px;
}
#divAdminTitleBoxL {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
padding-left: 6px;
border-top: 4px solid #990000;
border-right: 1px solid #990000;
border-bottom: 4px solid #990000;
border-left: 1px solid #990000;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
}
#divAdminContentBoxL {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding-top: 4px;
padding-left: 6px;
padding-right: 4px;
padding-bottom: 4px;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
}
#divAdminTitleBoxR {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
background-color: #990000;
padding-left: 6px;
border-top: 4px solid #990000;
border-right: 1px solid #990000;
border-bottom: 4px solid #990000;
border-left: 1px solid #990000;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
}
#divAdminContentBoxR {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
background-color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
padding-top: 4px;
padding-left: 6px;
padding-right: 4px;
padding-bottom: 4px;
border-right-color: #990000;
border-bottom-color: #990000;
border-left-color: #990000;
}
#divAdminLeftWrap {
float: left;
width: 46%;
}
#divAdminRightWrap {
float: right;
width: 46%;
}
-->
</style>


<div id="divAdminMainWrap">
<div id="divAdminLeftWrap">
<div id="divAdminTitleBoxL">LISTING INFORMATION</div>
<div id="divAdminContentBoxL">
<a href="{baseurl}/admin/index.php?action=add_listing_property_class"><img src="images/{lang}/web_icons.gif" alt="Add Product" /> Add New Listings </a>
<br />
{check_edit_all_listings}
<a href="{baseurl}/admin/index.php?action=edit_listings"><img src="images/{lang}/edit.gif" border="0" />Edit All Listings</a>
{/check_edit_all_listings}
<br />
<a href="{baseurl}/admin/index.php?action=show_property_classes"><img src="images/{lang}/classes.gif" border="0" />Add/Edit Property Types</a>
<br />
</div>
<div id="divSpaceDiv"></div>
<div id="divAdminTitleBoxL">SITE INFORMATION</div>
<div id="divAdminContentBoxL">
{check_edit_pages}
<a href="{baseurl}/admin/index.php?action=edit_page"><img border="0" src="images/{lang}/page_editor.gif" />Edit Pages</a>
{/check_edit_pages}
<br />
{check_edit_site_config}
<a href="{baseurl}/admin/index.php?action=configure"><img src="images/{lang}/config.gif" border="0" />Site Config</a>
{/check_edit_site_config}
<br />
{check_edit_agent_template}
<a href="{baseurl}/admin/index.php?action=edit_user_template&type=agent"><img src="images/{lang}/new_user.gif" border="0" />Edit Agent Form Template</a>
{/check_edit_agent_template}
<br />
{check_edit_member_template}
<a href="{baseurl}/admin/index.php?action=edit_user_template&type=member"><img src="images/{lang}/edit.gif" border="0" />Edit Member Form Template</a>
{/check_edit_member_template}
<br />
{check_edit_listing_template}
<a href="{baseurl}/admin/index.php?action=edit_listing_template"><img src="images/{lang}/listing_temp.gif" border="0" />Edit Listing Template</a>
{/check_edit_listing_template}
<br />
{check_view_logs}
<a href="{baseurl}/admin/index.php?action=view_log"><img src="images/{lang}/log.gif" border="0" />View Logs</a>
{/check_view_logs}
</div>
</div>
<div id="divAdminRightWrap">
<div id="divAdminTitleBoxR">AGENT INFORMATION</div>
<div id="divAdminContentBoxR">
{check_edit_all_users}
<a href="{baseurl}/admin/index.php?action=user_manager"><img src="images/{lang}/edit_users.gif" border="0" />Add/Edit Agents </a>
{/check_edit_all_users}
<br />
<a href="{baseurl}/admin/index.php?action=edit_my_listings"><img src="images/{lang}/edit.gif" border="0" />Edit My Listings </a>
<br />
<a href="{baseurl}/admin/index.php?action=user_manager&edit={user_id}"><img border="0" src="images/{lang}/edit_1_user.gif" />Edit Your Account</a>
<br />
</div>
<div id="divSpaceDiv"></div>
<div id="divAdminTitleBoxR">TOTALS</div>
<div id="divAdminContentBoxR">{general_info}</div>
</div>
</div>

Save the file in admin/template/yourtemplate as or_index.html. (be sure to back up the original or_index.html file)

Unzip and Add the icons from the zip file to
admin/images/en directory on your server.

Below is a scren shot of the panel in red and black.
http://www.lansinglinks.com/a_base_or_files/adminpanel.jpg

If there are any questions feel free to ask them here.

Remember this is completely done in css there are no tables.

Hope this helps someone somewhere.