- Logo RPU - Webgraphx:
Exemple: http://webgraphx-forumteste.forumactif.org/
Crédits: Moi-même (ouai j'ai pas le même pseudo je sais x)) pour le forum "RolePlay universe" Ne pas redistribué sans mon accord, merci de laisser mes crédits
Alors commençons
La Partie HTML
Dans votre overall_footer_end
remplacé tout par:
- Code:
<!-- BEGIN html_validation -->
<!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">
<body>
<table>
<tr>
<td>
<div>
<div>
<div>
<!-- END html_validation -->
</div>
</div>
<!-- BEGIN switch_footer_links -->
<div align="center">
<div class="gen">
<!-- BEGIN footer_link -->
<!-- BEGIN switch_separator --> | <!-- END switch_separator -->
<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
<!-- END footer_link -->
</div>
</div>
<!-- END switch_footer_links -->
</div>
{PROTECT_FOOTER}
</td>
</tr>
</table>
<table class="footerwg">
<tr>
<td>
<div class="leforum">
<div class="titrefooter">Le Forum...</div>
<br/><li class="bmenu"><a href="http://" target="_blank">Reglements</a></li>
<li class="bmenu"><a href="http://" target="_blank">Contexte</a></li>
<li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
<li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
<li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
<li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
<li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
</div>
<div class="milieufooter">
<div class="titrefooter">Information...
</div>
{TOTAL_POSTS}<br/>
{TOTAL_USERS}<br/>
{RECORD_USERS}<br/>
{TOTAL_USERS_ONLINE}<br/>
{LOGGED_IN_USER_LIST}<br/><br/>
<table class="DeBug">{L_CONNECTED_MEMBERS}</table>
{TOTAL_CHATTERS_ONLINE}<br/>{CHATTERS_LIST}<br/>
{NEWEST_USER}
</div>
<div class="groupefooter">
<div class="titrefooter">Groupes...</div>
<li class="fonda"><a href="http://" target="_blank"><font color="#00A5FF">Fondateur</font></a></li>
<li class="admin"><a href="http://" target="_blank"><font color="#FC0000">Administrateur</font></a></li>
<li class="modo"><a href="http://" target="_blank"><font color="#13ED00">Modérateur</font></a></li>
<li class="help"><a href="http://" target="_blank"><font color="#FFD000">Helpeur</font></a></li>
<li class="humain"><a href="http://" target="_blank"><font color="#004FED">groupe</font></a></li>
<li class="asgard"><a href="http://" target="_blank"><font color="#D27FFF">groupe</font></a></li>
<li class="ancien"><a href="http://" target="_blank"><font color="#D94D00">groupe</font></a></li>
<li class="jaffa"><a href="http://" target="_blank"><font color="#CEAF79">groupe</font></a></li>
<li class="vip"><a href="http://" target="_blank"><font color="#A0A3FF">groupe</font></a></li>
<li class="membre"><a href="http://" target="_blank"><font color="#C1C1C1">groupe</font></a></li>
</div>
</td>
</tr>
</table>
<table class="copy"><tr><td><center><font color="#7F7F7F">Par Databar, En libre service sur: <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a></font></center></td></tr></table>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({appId: '{switch_facebook_login.FACEBOOK_APP_ID}', status: true, cookie: true, xfbml: true, oauth: true});
//]]>
</script>
<!-- END switch_facebook_login -->
<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
if ($('a#logout'))
{
var lien_redir = $('a#logout').attr('href');
if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
{
document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
}
}
});
$(document).ready( function() {
$('a#logout').click( function() {
FB.logout();
} );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>
Explication des modifications
- Les Groupes
- Code:
<li class="fonda"><a href="l'URL DU GROUPE" target="_blank"><font color="COEULEUR DE LA POLICE TEXTE">NOM DU GROUPE</font></a></li>
- Code:
<li class="bmenu"><a href="URL DE LA PAGE" target="_blank">TITRE DU LIEN</a></li>
Le CSS
Partie la plus simple (enfin x) ) copier ceci dans votre feuille CSS
- Code:
.footerwg{
background: #121317;
width: 980px;
height: 300px;
padding: 15px;
margin-left: auto;
margin-right: auto;
border-top: 5px solid #0ba8d3;
}
.leforum{
width: 200px;
height: 240px;
border: 1px solid #303034;
margin-top: 10px;
margin-left: 5px;
float: left;
}
.milieufooter{
width: 478px;
height: 240px;
border: 1px solid #303034;
margin-top: 10px;
margin-left: 20px;
font-size: 10px;
float: left;
}
.groupefooter{
width: 200px;
height: 240px;
border: 1px solid #303034;
margin-top: 10px;
margin-left: 20px;
float: right;
position: fixe;
}
.fonda
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.fonda:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #0074B2;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.admin
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.admin:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #B20000;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.modo
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.modo:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #05AF00;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.help
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.help:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #BFA200;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.humain
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.humain:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #224491;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.asgard
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.asgard:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #9F6AB7;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.ancien
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.ancien:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #935D00;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.jaffa
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.jaffa:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #B79B6C;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.vip
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.vip:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #A186AA;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.membre
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.membre:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #939393;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
a:link{
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
a:link:hover{
text-align: center;
color: #FFFFFF;
}
li {list-style-type: none;}
.titrefooter{
font-size: 20px;
font-weight: bold;
font-family: monotype corsiva;
color: #FFFFFF;
margin-top: -17px;
}
.bmenu
{
width: 100%;
/*background: #202126;*/
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.bmenu:hover
{
width: 100%;
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
background: #0ba8d3;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.leforum, .milieufooter, .groupefooter,
{
display: inline-block;
horizontal-align: left;
}
.copy{
background:#1D1F20;
height: 30px;
width: 980px;
border-top: 2px solid #3F3F3F;
margin-left: auto;
margin-right: auto;
}
Pour changer les blocs de la colonne groupes remplacé les propriétés de ceci (le :hover est obligatoire pour le changement de couleur du fond au passage de la souris)
- Code:
.membre
{
width: 100%;
border-top: 1px solid #303034;
color-link: #1998FF;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
.membre:hover
{
width: 100%;
border-top: 1px solid #303034;
background: #939393;
border-bottom: 1px solid #5A5A5A;
color: #FFFFFF;
text-shadow: #000000 0 0 2px;
text-align: center;
margin: auto;
-moz-transition : all 1s;
-webkit-transition : all 1s;
}
Le reste, je vous laisse chercher
Merci de ne pas retirer mes crédits, cela serai respectueux de votre part :)Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
Dernière édition par daniel shepard le Mar 2 Sep 2014 - 14:51, édité 2 fois
).
Meric
