Menu admin en CSS
Publié: 21 Juin 2010, 02:50
Les modifications ci-dessous ne sont faites que pour la version 1.4.8 et suivantes.
1 - Remplacer le fichier admin/view/template/common/header.tpl par celui-ci :
1 - Remplacer le fichier admin/view/template/common/header.tpl par celui-ci :
- Code: Tout sélectionner
<?php echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" xml:lang="<?php echo $lang; ?>">
<head>
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>" />
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<link rel="stylesheet" type="text/css" href="view/stylesheet/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="view/javascript/jquery/ui/themes/ui-lightness/ui.all.css" />
<?php foreach ($styles as $style) { ?>
<link rel="<?php echo $style['rel']; ?>" type="text/css" href="<?php echo $style['href']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script type="text/javascript" src="view/javascript/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="view/javascript/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="view/javascript/jquery/superfish/js/superfish.js"></script>
<script type="text/javascript" src="view/javascript/jquery/tab.js"></script>
<?php foreach ($scripts as $script) { ?>
<script type="text/javascript" src="<?php echo $script; ?>"></script>
<?php } ?>
<script type="text/javascript">
//-----------------------------------------
// Confirm Actions (delete, uninstall)
//-----------------------------------------
$(document).ready(function(){
// Confirm Delete
$('#form').submit(function(){
if ($(this).attr('action').indexOf('delete',1) != -1) {
if (!confirm ('<?php echo $text_confirm; ?>')) {
return false;
}
}
});
// Confirm Uninstall
$('a').click(function(){
if ($(this).attr('href') != null && $(this).attr('href').indexOf('uninstall',1) != -1) {
if (!confirm ('<?php echo $text_confirm; ?>')) {
return false;
}
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<div class="div1"><img src="view/image/logo.png" title="<?php echo $heading_title; ?>" onclick="location = '<?php echo $home; ?>'" /></div>
<?php if ($logged) { ?>
<div class="div2"><img src="view/image/lock.png" alt="" style="position: relative; top: 3px;" /> <?php echo $logged; ?></div>
<?php } ?>
</div>
<?php if ($logged) { ?>
<div id="menu">
<ul id="navmenu-h">
<li id="dashboard"><a href="<?php echo $home; ?>" class="top"><?php echo $text_dashboard; ?></a></li>
<li id="catalog"><a class="top"><?php echo $text_catalog; ?></a>
<ul>
<li><a href="<?php echo $category; ?>"><?php echo $text_category; ?></a></li>
<li><a href="<?php echo $product; ?>"><?php echo $text_product; ?></a></li>
<li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li>
<li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
<li><a href="<?php echo $review; ?>"><?php echo $text_review; ?></a></li>
<li><a href="<?php echo $information; ?>"><?php echo $text_information; ?></a></li>
</ul>
</li>
<li id="extension"><a class="top"><?php echo $text_extension; ?></a>
<ul>
<li><a href="<?php echo $module; ?>"><?php echo $text_module; ?></a></li>
<li><a href="<?php echo $shipping; ?>"><?php echo $text_shipping; ?></a></li>
<li><a href="<?php echo $payment; ?>"><?php echo $text_payment; ?></a></li>
<li><a href="<?php echo $total; ?>"><?php echo $text_total; ?></a></li>
<li><a href="<?php echo $feed; ?>"><?php echo $text_feed; ?></a></li>
</ul>
</li>
<li id="sale"><a class="top"><?php echo $text_sale; ?></a>
<ul>
<li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
<li><a href="<?php echo $customer; ?>"><?php echo $text_customer; ?></a></li>
<li><a href="<?php echo $customer_group; ?>"><?php echo $text_customer_group; ?></a></li>
<li><a href="<?php echo $coupon; ?>"><?php echo $text_coupon; ?></a></li>
<li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
</ul>
</li>
<li id="system"><a class="top"><?php echo $text_system; ?></a>
<ul>
<li><a href="<?php echo $setting; ?>"><?php echo $text_setting; ?></a></li>
<li><a class="parent"><?php echo $text_users; ?></a>
<ul>
<li><a href="<?php echo $user; ?>"><?php echo $text_user; ?></a></li>
<li><a href="<?php echo $user_group; ?>"><?php echo $text_user_group; ?></a></li>
</ul>
</li>
<li><a class="parent"><?php echo $text_localisation; ?></a>
<ul>
<li><a href="<?php echo $language; ?>"><?php echo $text_language; ?></a></li>
<li><a href="<?php echo $currency; ?>"><?php echo $text_currency; ?></a></li>
<li><a href="<?php echo $stock_status; ?>"><?php echo $text_stock_status; ?></a></li>
<li><a href="<?php echo $order_status; ?>"><?php echo $text_order_status; ?></a></li>
<li><a href="<?php echo $country; ?>"><?php echo $text_country; ?></a></li>
<li><a href="<?php echo $zone; ?>"><?php echo $text_zone; ?></a></li>
<li><a href="<?php echo $geo_zone; ?>"><?php echo $text_geo_zone; ?></a></li>
<li><a href="<?php echo $tax_class; ?>"><?php echo $text_tax_class; ?></a></li>
<li><a href="<?php echo $length_class; ?>"><?php echo $text_length_class; ?></a></li>
<li><a href="<?php echo $weight_class; ?>"><?php echo $text_weight_class; ?></a></li>
</ul>
</li>
<li><a href="<?php echo $error_log; ?>"><?php echo $text_error_log; ?></a></li>
<li><a href="<?php echo $backup; ?>"><?php echo $text_backup; ?></a></li>
</ul>
</li>
<li id="reports"><a class="top"><?php echo $text_reports; ?></a>
<ul>
<li><a href="<?php echo $report_sale; ?>"><?php echo $text_report_sale; ?></a></li>
<li><a href="<?php echo $report_viewed; ?>"><?php echo $text_report_viewed; ?></a></li>
<li><a href="<?php echo $report_purchased; ?>"><?php echo $text_report_purchased; ?></a></li>
</ul>
</li>
<li id="store"><a class="top"><?php echo $text_front; ?></a>
<ul>
<?php foreach ($stores as $stores) { ?>
<li><a onclick="window.open('<?php echo $stores['href']; ?>');"><?php echo $stores['name']; ?></a></li>
<?php } ?>
</ul>
</li>
<li id="help"><a class="top"><?php echo $text_help; ?></a>
<ul>
<li><a onclick="window.open('http://www.opencart-france.com/');"><?php echo $text_opencart; ?></a></li>
<li><a onclick="window.open('http://www.opencart-france.com/index.php?route=documentation/introduction');"><?php echo $text_documentation; ?></a></li>
<li><a onclick="window.open('http://forum.opencart-france.com/');"><?php echo $text_support; ?></a></li>
</ul>
</li>
</ul>
<ul class="nav right">
<li id="store"><a class="top" href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
</ul>
</div>
<?php } ?>
<div id="content">
<?php if ($breadcrumbs) { ?>
<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>
<?php } ?>
- Code: Tout sélectionner
/* Author: Craig Erskine Description: Dynamic Menu System - Horizontal/Vertical
modified by delete (opencart-france.com) for opencart
*/
ul#navmenu-h {
margin: 0;
padding: 0;
list-style: none;
position: relative;
height: 34px;
background: url('../image/menu.png') repeat-x;
min-width: 900px;
}
ul#navmenu-h ul {
width: 150px;/* Sub Menu Width */
margin: 0;
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
}
ul#navmenu-h ul ul, ul#navmenu-h ul ul ul {
top: 0;
left: 100%;
}
ul#navmenu-h li {
float: left;
display: inline;
position: relative;
width:115px;
}
ul#navmenu-h ul li {
width: 100%;
left:-40px;
/* IE7 hack */
//left:1px;
top:-5px;
display: block;
}/* Root Menu */
ul#navmenu-h a {
padding: 12px;
float: left;
display: block;
color: #FFF;
text-decoration: none;
height: 1%;
}/* Root Menu Hover Persistence */
ul#navmenu-h a:hover, ul#navmenu-h li:hover a, ul#navmenu-h li.iehover a {
color: #FFFF;
}/* 2nd Menu */
ul#navmenu-h li:hover li a, ul#navmenu-h li.iehover li a {
float: none;
background: url('../image/transparent.png');
}/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover, ul#navmenu-h li:hover li:hover a, ul#navmenu-h li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover a {
background: black;
}/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li a {
background: url('../image/transparent.png');
}/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover, ul#navmenu-h li:hover li:hover li:hover a, ul#navmenu-h li.iehover li.iehover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover a {
background: black;
}/* 4th Menu */
ul#navmenu-h li:hover li:hover li:hover li a, ul#navmenu-h li.iehover li.iehover li.iehover li a {
background: #666;
}/* 4th Menu Hover */
ul#navmenu-h li:hover li:hover li:hover li a:hover, ul#navmenu-h li.iehover li.iehover li.iehover li a:hover {
background: #333;
}/* Hover Function - Do Not Move */
ul#navmenu-h li:hover ul ul, ul#navmenu-h li:hover ul ul ul, ul#navmenu-h li.iehover ul ul, ul#navmenu-h li.iehover ul ul ul {
display: none;
}
ul#navmenu-h li:hover ul, ul#navmenu-h ul li:hover ul, ul#navmenu-h ul ul li:hover ul, ul#navmenu-h li.iehover ul, ul#navmenu-h ul li.iehover ul, ul#navmenu-h ul ul li.iehover ul {
display: block;
}
/* Fin du menu admin */
html {
margin: 0;
padding: 0;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #FFFFFF;
}
body, td, th, input, select, textarea, option, optgroup {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
input[type='text'] {
padding: 2px;
}
select {
padding: 1px;
}
textarea {
padding: 2px;
}
a, a:visited {
color: #003366;
cursor: pointer;
}
form {
margin: 0;
padding: 0;
}
#header {
height: 56px;
padding: 0px 30px;
background: url('../image/header.png') repeat-x;
min-width: 900px;
}
#header .div1 {
color: #FFFFFF;
padding: 18px 0px 0px 0px;
float: left;
}
#header .div2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
text-align: right;
padding: 14px 0px 0px 0px;
float: right;
}
#header .div2 span {
font-weight: bold;
}
#menu {
background: url('../image/menu.png') repeat-x;
position: relative;
z-index: 1;
height: 34px;
clear: both;
padding: 0px 30px;
min-width: 900px;
}
ul.left {
float: left;
}
ul.right {
color: #000;
float: right;
}
.nav {
position: relative;
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
background: url('../image/transparent.png');
}
.nav a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 5px;
}
.nav > li + li {
background: url('../image/split.png') center left no-repeat;
}
.nav .top, .nav li li.sfhover {
padding: 10px 15px 9px 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
text-align: center;
}
.nav ul li {
padding: 2px;
}
.nav .selected .top {
background: url('../image/selected.png') repeat-x;
color: #FFFFFF;
}
.nav .selected:hover a.top, .nav .sfhover a.top {
}
.nav .parent {
background: url('../image/arrow_right.png') 95% center no-repeat;
}
.nav li {
float: left;
list-style: none;
}
.nav li ul {
position: absolute;
}
.nav li li {
clear: both;
}
.nav li ul a {
color: #FFFFFF;
height: 15px;
width: 145px;
}
.nav li ul ul {
margin: -27px 0 0 157px;
}
.nav li li:hover, .nav li li.sfhover {
background: #333;
color: #000000;
}
#content {
background: #FFFFFF url('../image/background.png') 0px 1px repeat-x;
padding: 10px 30px 0px 30px;
min-width: 900px;
padding-bottom: 128px;
}
#container {
height: 100%;
}
body > #container {
height: auto;
min-height: 100%;
}
#footer {
background: #FFFFFF url('../image/footer.png') repeat-x;
height: 90px;
padding-top: 38px;
text-align: center;
font-size: 12px;
color: #333;
position: relative;
margin-top: -128px;
clear: both;
}
#footer a {
color: #333;
text-decoration: underline;
}
.breadcrumb, .breadcrumb a {
font-size: 12px;
color: #666;
margin-bottom: 15px;
}
.success {
padding: 15px 0px;
margin-bottom: 15px;
background: #E4F1C9;
border: 1px solid #A5BD71;
font-size: 12px;
text-align: center;
}
.warning {
padding: 15px 0px;
margin-bottom: 15px;
background: #FFDFE0;
border: 1px solid #FF9999;
font-size: 12px;
text-align: center;
}
.attention {
padding: 15px 0px;
margin-bottom: 15px;
background: #FEFBCC;
border: 1px solid #E6DB55;
font-size: 12px;
text-align: center;
}
.box {
margin-bottom: 15px;
}
.box > .heading {
height: 40px;
background: url('../image/box_center.png') repeat-x;
margin-bottom: 0px;
}
.box > .left {
float: left;
width: 7px;
height: 40px;
background: url('../image/box_left.png') no-repeat;
}
.box > .right {
float: right;
width: 7px;
height: 40px;
background: url('../image/box_right.png') no-repeat;
}
.box > .heading h1 {
background-position: 2px 9px;
background-repeat: no-repeat;
margin: 0px;
padding: 11px 0px 11px 30px;
color: #003A88;
font-size: 16px;
float: left;
}
.box > .heading .buttons {
float: right;
padding-top: 8px;
}
.box > .content {
padding: 10px;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
min-height: 300px;
}
.button {
padding-left: 8px;
display: inline-block;
margin-right: 5px;
background: url('../image/button_left.png') top left no-repeat;
}
.button span {
color: #FFF;
display: block;
padding: 5px 10px 5px 2px;
background: url('../image/button_right.png') top right no-repeat;
}
.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
margin-bottom: 20px;
}
.list td {
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
}
.list thead td {
background-color: #EFEFEF;
padding: 0px 5px;
}
.list thead td a, .list thead td {
text-decoration: none;
color: #222222;
font-weight: bold;
}
.list tbody a {
text-decoration: underline;
}
.list tbody td {
vertical-align: middle;
padding: 0px 5px;
}
.list tbody tr:odd {
background: #FFFFFF;
}
.list tbody tr:even {
background: #E4EEF7;
}
.list .left {
text-align: left;
padding: 7px;
}
.list .right {
text-align: right;
padding: 7px;
}
.list .center {
text-align: center;
padding: 7px;
}
.list .asc {
padding-right: 15px;
background: url('../image/asc.png') right center no-repeat;
}
.list .desc {
padding-right: 15px;
background: url('../image/desc.png') right center no-repeat;
}
.list .filter td {
padding: 5px;
background: #E7EFEF;
}
.pagination {
margin-top: 30px;
border-top: 1px solid #EEEEEE;
background: #F8F8F8;
display: inline-block;
width: 100%;
}
.pagination .links, .pagination .results {
padding: 9px;
}
.pagination .links {
float: left;
}
.pagination .links a {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
}
.pagination .links b {
border: 1px solid #CCCCCC;
padding: 4px 7px;
text-decoration: none;
color: #000000;
background: #FFFFFF;
}
.pagination .results {
float: right;
}
.form {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
table.form tr td:first-child {
width: 200px;
}
.form > * > * > td {
padding: 10px;
color: #000000;
border-bottom: 1px dotted #CCCCCC;
}
.help {
color: #999;
font-size: 10px;
font-weight: normal;
font-family: Verdana, Geneva, sans-serif;
display: block;
}
.required {
color: #FF0000;
font-weight: bold;
}
.error {
color: #FF0000;
padding-top: 3px;
display: block;
font-size: 12px;
font-weight: normal;
}
.scrollbox {
border: 1px solid #CCCCCC;
width: 350px;
height: 100px;
background: #FFFFFF;
overflow-y: scroll;
}
.htabs {
padding: 0px 0px 0px 10px;
height: 30px;
border-bottom: 1px solid #DDDDDD;
margin-bottom: 15px;
}
.htabs a {
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
background: #FFFFFF url('../image/tab.png') repeat-x;
padding: 6px 15px 7px 15px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #000000;
margin-right: 2px;
}
.htabs a.selected {
padding-bottom: 8px;
background: #FFFFFF;
}
.vtabs {
width: 180px;
padding: 10px 0px;
min-height: 300px;
float: left;
display: block;
border-right: 1px solid #DDDDDD;
}
.vtabs a {
display: block;
float: left;
width: 150px;
margin-bottom: 5px;
clear: both;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
background: #F7F7F7;
padding: 6px 14px 7px 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: right;
text-decoration: none;
color: #000000;
}
.vtabs a.selected {
padding-right: 15px;
background: #FFFFFF;
}
.vtabs_page {
margin-left: 195px;
}
.scrollbox div {
padding: 3px;
}
.scrollbox div input {
margin: 0px;
padding: 0px;
margin-right: 3px;
}
.scrollbox div.even {
background: #FFFFFF;
}
.scrollbox div.odd {
background: #E4EEF7;
}
.add {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../image/add.png) no-repeat scroll right center;
color:#000000;
display:inline-block;
padding-right:20px;
cursor: pointer;
}
.remove {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../image/delete.png) no-repeat scroll right center;
color:#000000;
display:inline-block;
padding-right:20px;
cursor: pointer;
}