boulette
{ Membre }
Messages : 15
| Bonjour, - Objet de la commande: Hiérarchie et mise en page des forums et catégories sur l'index du forum
- Détails:
Voilà j'avais fait une demande d'aide, et on m'a conseillé de venir poser mon problème aussi dans les commandes, donc voilà chose faite.
Mon forum comporte trop de catégories et forum, aussi dans un soucis de clarté j'ai essayé de mettre un système de catégories en onglet. Cependant comme je ne voulais pas un onglet par catégorie, mais pour un groupement de catégories. J'ai donc crée une nouvelle catégorie pour grouper les sous catégories que je voulais voir apparaître dans l'onglet. Le problème c'est que mes sous catégories ne permettent alors plus de montrer sur la page les forum qui sont dedans.
- Aperçu: Voilà ce que j'aimerai obtenir :
et ce que j'obtiens pour l'instant:
- Autoriser un membre à répondre [X] Oui [] Non
Voici pour l'instant les modifications que j'ai faite sur mon forum si cela peut vous aider.
- Avec cette architecture de catégories et forums:
- Et j'ai mis cette structure et hiérarchie:
- Puis dans mon ccs j'ai mis ça: ( la partie en rouge ne fonctionne pas)
- Spoiler:
.my_modified_table{ width: 80%; margin-left: 10%; margin-right: 10%; margin-top: 5px !important;
font-family: Verdana; }
.my_forum_name{ display:none; } .my_img{ width: 10%; margin-left: 50px; } .my_disc{ width: 70%; text-align:center; font-size: 13px; } .my_stats{
width: 20%; text-align:center; }
.myfoo_title{ text-align:center; width: 100%; -moz-border-radius: 6px; border: 1px solid #EAEAEA;
} .my_title{ text-align:center; font-size: 14px; font-family: Arial; }
.my_cat_body{ border: 1px solid #EEE; -moz-border-radius: 3px;
}
.my_cat ul{ margin:0; padding: 0; width: 800px !important; } .my_cat li{ margin-left: 2px; }
.my_cat_style{ border-top: 1px #666 solid; border-left: 1px #666 solid; border-right: 1px #666 solid; border-bottom: 1px #666 solid; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; text-align:center; font-size: 11px; padding-left:10px; padding-right:10px; padding-bottom:3px; padding-top:3px; display:inline; background-color: #B7E1EF; width: 200px; font-family: Arial; font-weight: bold; }
.my_cat_style:hover { border-top: 1px #666 solid; border-left: 1px #666 solid; border-right: 1px #666 solid; border-bottom: 1px #666 solid; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; text-align:center; font-size: 11px; padding-left:10px; padding-right:10px; padding-bottom:3px; padding-top:3px; display:inline; background-color: #DAEDF3; width: 200px; font-family: Arial; font-weight: bold; }
.my_cat_style_selected{ border-top: 1px #666 solid; border-left: 1px #666 solid; border-right: 1px #666 solid; border-bottom: 1px #666 solid; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; text-align:center; font-size: 11px; padding-left:10px; padding-right:10px; padding-bottom:3px; padding-top:3px; display:inline; background-color: #EAEAEA; width: 200px; font-family: Arial; font-weight: bold; }
.clear{ clear: both; } .my_cat a{ text-decoration: none !important; color: #000; }
- Dans le template index_box je l'ai modifié et j'ai obtenue ça:
- Code:
-
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center"> <tr> <td valign="bottom"> <!-- BEGIN switch_user_logged_in --> <span class="gensmall">{LAST_VISIT_DATE}
{CURRENT_TIME}
</span> <!-- END switch_user_logged_in --> <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div> </td> <td class="gensmall" align="right" valign="bottom"> <!-- BEGIN switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- END switch_user_logged_in --> <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> </td> </tr> </table> <div class="my_cat"> <ul></ul> </div>
<div class="my_cat_body"> <!-- BEGIN catrow --><!-- BEGIN tablehead --> <table class="my_modified_table" width="100%" border="0" cellspacing="1" cellpadding="0"> <div class="my_forum_name">{catrow.tablehead.L_FORUM}</div> <!-- END tablehead -->
<!-- BEGIN forumrow --> <tr> <td colspan="3" class="my_title" align="center"><div class="myfoo_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><img src="{SPACER}" alt="" height="5" width="1" /></td> </tr> <tr> <td class="my_img" valign="top"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="" /></td> <td class="my_disc" width="300" valign="top" >{catrow.forumrow.FORUM_DESC}</td> <td class="my_stats" width="200" valign="top"> Topics: {catrow.forumrow.TOPICS}
Posts: {catrow.forumrow.POSTS}
Dernier post: {catrow.forumrow.LAST_POST}
</td> </tr> <!-- END forumrow --> <!-- BEGIN tablefoot --> </table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow --> </div>
- Et dans mon template overall_header il y a ce code: ( la partie modifiée est le code du millieu):
- Spoiler:
- Code:
-
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}> <head> <!-- BEGIN meta_emulate_ie7 --> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <!-- END meta_emulate_ie7 --> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login --> <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script> <!-- END switch_fb_login -->
<!-- BEGIN switch_ticker --> <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script> <!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new --> <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam ) { case 'top' : slid_vert = true; break;
case 'left': break;
case 'bottom': slid_vert = true; auto_dir = 'prev'; break;
case 'right': auto_dir = 'prev'; break;
default: slid_vert = true; }
$(document).ready(function() { var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0) { $('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */ $('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des �l�ments */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } );
/* Redimensionnement des �l�ments et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } });
/* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); }
/* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script> <!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[ $(document).ready(function(){ <!-- BEGIN switch_enable_pm_popup --> pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus(); <!-- END switch_enable_pm_popup --> <!-- BEGIN switch_report_popup --> report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus(); <!-- END switch_report_popup --> <!-- BEGIN switch_ticker --> ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME}); <!-- END switch_ticker --> });
<!-- BEGIN switch_login_popup --> var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; <!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup --> $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup");
$("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); }); <!-- END switch_login_popup --> //]]> </script> {GREETING_POPUP} <!-- BEGIN switch_ticker_new --> <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; }
.jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; }
.jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style> <!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code --> Voilà la modification: - Code:
-
<script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']);
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script> <!-- END google_analytics_code --> <script type="text/javascript" src="http://www.yourjavascript.com/0374901133/script.js" ></script> [/color] - Code:
-
</head> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <!-- BEGIN hitskin_preview --> <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW}
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div> <!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup --> <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div> <!-- END switch_login_popup -->
<a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <!-- BEGIN switch_logo_left --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <!-- END switch_logo_left --> <td align="center" width="100%" valign="middle"> <!-- BEGIN switch_logo_center --> <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<!-- END switch_logo_center --> <div class="maintitle">{MAIN_SITENAME}</div>
<span class="gen">{SITE_DESCRIPTION} </span> </td> <!-- BEGIN switch_logo_right --> <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td> <!-- END switch_logo_right --> </tr> </table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;"> <!-- BEGIN ticker_row --> <li>{switch_ticker.ticker_row.ELEMENT}</li> <!-- END ticker_row --> </ul> </div> </td> </tr> </table> </div> <!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker --> <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content"> <!-- BEGIN ticker_row --> <div>{switch_ticker.ticker_row.ELEMENT}</div> <!-- END ticker_row --> </div> </div> </div> </td> </tr> </table> </div> <!-- END switch_ticker -->
<div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}"> <!-- BEGIN giefmod_index1 --> {giefmod_index1.MODVAR} <!-- BEGIN saut --> <div style="height:{SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index1 --> </div> </td> <td valign="top" width="100%"> <!-- BEGIN html_validation --> </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html> <!-- END html_validation -->
J'obtiens alors ceci: Cependant dans la page affichée par l'onglet, la structure que je voulais n'est plus respectée, j'aimerai conserver la visibilité des sous catégories et des forums de ces catégories comme ceci:( je l'ai fait par montage photo) je suis administratrice sur mon forum, j'ai accès à tout et voici le lien de mon forum test: lien il est en phpbb2 j'ai le navigateur Mozilla firefox. |
Dernière édition par boulette le Jeu 10 Fév 2011, 17:32, édité 2 fois | |
|
Phantasmagoria
{ Membre hyper-actif }
Messages : 1636
| Bonjour ^^ Penses s'il te plait à éditer ton premier message et de suivre ce formulaire qui est obligatoire pour passer une commande. Merci de ta compréhension | | |
|
boulette
{ Membre }
Messages : 15
| je suis terriblement confuse, voilà mon message est édité. je vous pris de m'excuser. | | |
|