Voilà pour le css (un template joomla modifié) :
body {
background : #000000;
}
tr,th,div {
color : #000000;
font-family : Helvetica, Arial, sans-serif;
font-size : 12px;
}
.clear {
clear : both;
}
/*------------------------------------- Bandeau ---------------------------*/
#bandeau {
width:100%;
overflow:hidden;
padding-top:0;
top:0;
margin-top:0;
}
/*------------------------------------------------------------------------------- Structure ----------------*/
#wrapper {/*définition de l'espace de la structure global du site*/
width : 85%;/*714 init*/
text-align : left;
position : relative;
/* margin : auto;*/
left: 40%;
top: 40%;
position: absolute;
margin-top: -200px;
margin-left: -325px !important;/* IExplorer ignore ce code, mais pas Firefox ! ! */
margin-left: -300px;
}
/*-------------------------------------------- HEADER ---------------------------*/
#header {
width : 252px;
position : relative;
padding-top : 51px;
background : top center url(../images/logo.jpg) no-repeat;
}
h1 {
color : #FDE7C2;
font-style : italic;
font-weight : normal;
font : 23px "Times new roman", sans-serif;
text-align : center;
margin : 0 0 2px 21px;
padding : 4px;
background : #991111;
border : 2px solid #C4B888;
}
#search {
width : 148px;
left : 700px;
bottom : -2px;
text-align : center;
position : absolute;
padding : 6px 0;
background : #E8E7DA url(../images/search_top.jpg) no-repeat;
}
#body {
width : 100%;
position : relative;
}
#content {
width : 670px; /* 462 Init*/ /*en pourcentage = 80%*/
min-width:562px;
min-height : 410px;
margin-left : 202px; /* = width left colone + 2 )*/
background : #E8E7DA bottom right url(../images/body_bottom_right.jpg) no-repeat;
height:410px;
overflow:auto;
}
.left_column {
width : 200px;/* = largeur background*/
top : 0;
left : 0;
position : absolute;
padding-top : 232px; /* définition positionnement du menu = hauteur image*/
background : url(../images/pic_1.jpg) no-repeat;
z-index:100;
}
/*---------------------------------------------------- Center_colomn--------------------------*/
#center_column {
width : 100%;
float : left;
}
.right_column {
width : 134px;
float : right;
padding : 12px;
border-left : 1px solid #D6D3BA;
background : top right url(../images/body_top_right.jpg) no-repeat;
}
.right_column .clear {
height : 10px;
}
#footer {
color : #E8E7DA;
font-size : 11px;
margin : 40px 0 0 260px;
overflow:hidden;
}
#footer a {
color : #00ff00;
}
#footer a:hover {
color : #00ff00;
text-decoration : underline;
}
#privacy {
width : 148px;
right : 8px;
position : absolute;
padding : 4px 0;
background : #E8E7DA bottom left url(../images/footer_tab.jpg) no-repeat;
left:700px; /*== valeur Left de Search*/
}
#privacy a {
color : #000;
font-weight : normal;
}
/*########## Joomla CSS ##########*/
/********** Pathway **********/
.pathway {
font-family : Verdana, Helvetica, Arial, sans-serif;
font-size : 9px;
padding-top : 6px !important;
padding-top : 7px;
padding-left : 4px;
}
a.pathway:link, a.pathway:visited {
color : #0000cc;
font-weight : normal;
}
a.pathway:hover {
color : #666666;
font-weight : normal;
text-decoration : none;
}
/********** MainLevel Links **********/
a.mainlevel:link, a.mainlevel:visited {
color : #fde7c2;
font : 18px "times new roman", serif;
font-style : italic;
padding-right : 8px;
background : #991111;
}
a.mainlevel:hover {
color : #fde7c2;
font-weight : normal;
text-decoration : underline;
}
/********** SubLevel Links **********/
a.sublevel:link, a.sublevel:visited {
padding-left : 1px;
vertical-align : middle;
font-size : 11px;
color : #000000;
text-align : left;
}
a.sublevel:hover {
color : #666666;
text-decoration : none;
}
/********** MainMenu Links **********/
a.mainmenu:link, a.mainmenu:visited {
color : #000080;
font-family : Verdana, Helvetica, Arial, sans-serif;
font-weight : none;
}
a.mainmenu:hover {
color : #000080;
text-decoration : underline;
}
/********** Other Links **********/
a:link, a:visited {
color : #cc0000;
text-decoration : none;
font-size:1.2em;
text-align:center;
}
a:hover {
color : #ff0000;
font-weight : none;
text-decoration : none;
text-align:center;
}
/********** Modules **********/
table.moduletable {
width :217px;
margin-left : 26px;
margin-bottom : 15px;
background : #991111;
}
table.moduletable th {
width : 100%;
font : 22px "times new roman", serif;
font-style : italic;
font-weight : bold;
color : #ffffff;
text-align : left;
text-indent : 5px;
letter-spacing : 1px;
margin : 5px 5px 20px 5px;
}
table.moduletable ul {
padding : 0px;
}
table.moduletable li {
}
table.moduletable td {
padding : 2px 2px 2px 5px;
}
/********** Login Module **********/
table.moduletable-login {
width : 217px;
margin-left : 26px;
margin-bottom : 15px;
background : #991111;
}
table.moduletable-login th {
width : 100%;
font : 22px "times new roman", serif;
font-style : italic;
font-weight : bold;
color : #ffffff;
text-align : left;
text-indent : 5px;
letter-spacing : 1px;
margin : 5px 5px 20px 5px;
}
table.moduletable-login ul {
padding : 0px;
}
table.moduletable-login li {
}
table.moduletable-login td {
color : #fde7c2;
padding : 2px 2px 2px 5px;
}
table.moduletable-login a {
color : #999999;
font-weight : bold;
}
table.moduletable-login a:hover {
color : #ffffff;
text-decoration : none;
}
/********** Poll **********/
.poll {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #666666;
line-height : 14px;
}
.pollstableborder {
border : 1px solid;
padding : 1px;
}
/*############### CONTENT ###############*/
/***** Header for contentpaneopen *****/
.contentheading {
font : 22px "times new roman", serif;
font-style : italic;
font-weight : bold;
color : #991111;
text-align : left;
padding-top : 10px;
}
/***** Home, Mambo License, Blog, Lower Content for Advanced Search *****/
.contentpaneopen {
width : 100%;
/* background-color:#C0C0C0;
margin-left:10px;*/
padding-left:10px;
}
/***** Title for Blog, News Feeds, Wrapper, Links, Advanced Search, Contact Us *****/
.componentheading {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-weight : bold;
color : #000000;
text-align : left;
padding-top : 10px;
}
/***** Top Content for Getting Started, FAQs, News Feeds, Links *****/
.contentdescription {
padding: 0px;
}
/***** Lower Content for Getting Started, FAQs, News Feeds, Wrapper, Links, Contact Us *****/
.contentpane {
padding-top : 10px;
}
/********** Inner Content **********/
.sectiontableheader {
background-color : #CCCCCC;
color : #7B8DA1;
font-weight : bold;
}
.sectiontableentry1 {
background-color : #F0F0F0;
}
.sectiontableentry2 {
background-color : #E0E0E0;
}
/********** Rating **********/
.content_rating {
padding : 5px;
}
.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #3366C0;
text-decoration : none;
font-weight : bold;
}
.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}
.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 10px;
font-weight : bold;
background-color : #F0F0F0;
color : #990000;
border : 1px solid #CCCCCC;
}
.inputbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
background-color : #F0F0F0;
border : 1px solid #CCCCCC;
}
/* For content item titles that are hyperlink instead of Read On */
a.contentpagetitle:link, a.contentpagetitle:visited {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #000000;
text-align : left;
text-decoration : none;
}
a.contentpagetitle:hover {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
text-align : left;
color : #7B8DA1;
text-decoration : underline;
font-weight : bold;
}
a.category:link, a.category:visited {
color : #333333;
font-weight : bold;
font-size : 11px;
}
a.category:hover {
color : #7B8DA1;
}
/* Styles for dhtml tabbed-pages */
.ontab {
background-color : #ffae00;
border-left : outset 2px #ff9900;
border-right : outset 2px #808080;
border-top : outset 2px #ff9900;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : bold;
color : #FFFFFF;
}
.offtab {
background-color : #e5e5e5;
border-left : outset 2px #E0E0E0;
border-right : outset 2px #E0E0E0;
border-top : outset 2px #E0E0E0;
border-bottom : solid 1px #d5d5d5;
text-align : center;
/* Cannot use hand as its not a W3C CSS validator */
/* cursor: hand;*/
font-weight : normal;
}
.tabpadding {
}
.tabheading {
background-color : #ffae00;
text-align : left;
}
.pagetext {
visibility : hidden;
display : none;
position : relative;
top : 0;
}
/* for modifying {moscode} output. Don't set the colour! */
.moscode {
background-color : #f0f0f0;
}
.code {
background-color : #f0f0f0;
border : 1px solid #FFF;
}
/* Text passed with mosmsg url parameter */
.message {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-weight : bold;
font-size : 10pt;
color : #ff6600;
text-align : center;
}
/* Javascript Back button */
.back_button {
text-align : center;
margin-top : 40px;
}
table.contenttoc {
color : #333300;
background-color : #ffffff;
border : 1px solid #333;
}
table.contenttoc td {
font-size : 8pt;
font-weight : normal;
text-align : left;
}
/*apparence géographique du menu*/
ul {
margin : 0;
padding : 5px;
list-style : none; text-align:center;
padding-left:75px;
}
li {
line-height : 15px;
padding-left : 15px;
padding-top : 10px;
background-image : url(../images/arrow.png);
background-repeat : no-repeat;
background-position : 0px 5px;
}
/*-----------------------------------------*/
table.searchinto {
width : 100%;
}
table.searchintro td {
background-color : #293C43;
color : #ffffff;
font-weight : bold;
}
et voilà pour le code index.php :
<?php
/*
* A Joomla! Template
* @package - beautysalon
* @version 1.0
* @date - May 30, 2007
* @author - Mimoun
* @website - www.freewebsitetemplates.com
* @copyright (C) - 2006 - Xtreme Open Source. All Rights Reserved.
* @license - GPL
* @modifications - For Joomla 1.0.x by XOS - www.xtremeopensource.org
*/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?>
</head>
<body>
<center>
<div id="bandeau"><?php include'bandeau.html' ?></div>
<div id="wrapper">
<div id="header">
<h1>Test</h1>
<div id="search">
<?php mosLoadModules ('user4', -1); ?>
</div>
</div>
<div id="body">
<!-- <div id="content">/*-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr valign="top">
<td class="left_column">
<?php mosLoadModules ('left'); ?> </td>
<td>
<div id="content">
<div id="center_column">
<?php mosPathWay(); ?>
<?php mosMainBody(); ?>
</div> </div> <!--rajout fin div--> </td>
<?php if (mosCountModules('right')) { ?>
<td class="right_column">
<?php mosLoadModules ('right', -2); ?>
<div class="clear"></div> </td>
<?php } ?>
</tr>
</table>
<div class="clear"></div>
<!-- </div><!-- /content -->
</div><!-- /body -->
<div id="privacy"></div>
<div id="footer"></div>
</div><!-- /wrapper -->
</center>
</body>
</html>
