Diminuer la zone en haut

[Gérald59]

Bonjour,

Comme vous le savais j'ai ouvert un second forum, donc je viens souvent vous solliciter, car je veux le modifier moi même, car le premier a beaucoup été modifié par Bruno36 et celui la, je veux que sa soit moi

Voilà, je voudrai modifier la zone en haut du header voir screen et enlever la photo que vous regarder pour que mon avatar s'affiche une fois connecté ainsi que les membres voient leur avatar, comme sur mon premier forum.

Voilà le contenu du header, je dois supprimer quoi au juste ?

Code :

<a name="top" id="top"></a><div id="container">
        <div id="header">
            <div id="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
            <div id="panel">
                {$welcomeblock}
            </div>
            {$pm_notice}
        </div>
                <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/index.php">Forums</a></li>
                    <li><a href="{$mybb->settings['bburl']}/portal.php">Portail</a></li>
                    <li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
                                        <td class="tcat1" align="center"> <img src = "{$theme['imgdir']}/meteo.png" alt = "" title = "" class = "vbottom" />
<a href="{$mybb->settings['bburl']}/meteo.php "><strong>Météo</strong></a></td>
<td class="tcat1" align="center"> <img src = "{$mybb->settings['bburl']}/bruno.png" alt = "" title = ""
class = "vbottom" /> <a href="http://www.scooter-chinois-4t.com/forum/index.php" target="_blanck"><strong> Scooters Chinois</strong></a></td>

                </ul>
            </div>
        <div id="container_inside">
        <div id="content">
            <navigation>
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
var CurrentMsg = '{$mybb->settings['fmstatus']}';
function update(msg) {
var pad_str="";                          
n = msg.length;
if(n<72) {
pad = (73-n)/2;
for(var i=0; i<pad; i++) {
pad_str+=" ";                        
   }                        
}                          
CurrentMsg = pad_str + msg;                          
document.getElementById("field").value = CurrentMsg;
clearTimeout(timer);                          
timer = setTimeout("idleMsg()",2500);        
}
function MakeArray(n) {                          
this.length=n;                          
for(var i = 1; i<= n; i++) {                                  
this[i] = "";                
}                          
return(this);        
}              
var index = 1;          
var notice_num = 9;                  
var notices = new MakeArray(notice_num);        
notices[1] = "{$mybb->settings['fm1']}";
notices[2] = "{$mybb->settings['fm2']}";
notices[3] = "{$mybb->settings['fm3']}";        
notices[4] = "{$mybb->settings['fm4']}";
notices[5] = "{$mybb->settings['fm5']}";
notices[6] = "{$mybb->settings['fm6']}";
notices[7] = "{$mybb->settings['fm7']}";      
notices[8] = "{$mybb->settings['fm8']}";                    
var timer = setTimeout('idleMsg()',1500);                  
function nochange() {
document.getElementById("field").value = CurrentMsg;
}                  
function idleMsg() {                          
update(notices[index++]);                          
if(index>notice_num) {
index=1;
   }  
}
// End -->                  
</SCRIPT><fieldset><legend>{$mybb->settings['fmtitle']}</legend><CENTER>
<FORM name="messages" onSubmit="return false">
<input type="text" id="field" name="field" size=73 value="{$mybb->settings['fmstatus']}" onFocus="self.status='{$mybb->settings['fmstatus']}'; return true" onChange="nochange()">
</FORM>
</CENTER></fieldset>
            {$pending_joinrequests}
            <br />
<table border="0" width="100%">
<tr>


<td> <FORM method=GET action="http://www.google.fr/search">
<A HREF="http://www.google.fr">
<IMG SRC = "http://www.google.com/logos/Logo_40wht.gif" border = "0" ALT = "Google" align = "absmiddle"> </A>
<INPUT Type=text name=q size=31 maxlength=255 value="">
<INPUT type=hidden name=hl value=fr>
<INPUT TYPE=SUBMIT name=btnG VALUE="Recherche Google">
</form></td>
<td align="right">
<FORM METHOD="GET" action="http://fr.wikipedia.org/wiki/Special:Recherche">
<INPUT TYPE="text" name="search" size="31" maxlength="255" value="">
<INPUT TYPE="hidden" name="hl" value="fr">
<INPUT Type="submit" name="btnW" VALUE="Recherche Wikipédia"> </form>
</td>
</tr>
</table>

<script type="text/javascript" src="http://www.lecalendrier.fr/lecalendrier.fr-datedujour.php"> </script>
<style type="text/css">
.alert {
background: #FFE4C4;
border-top: 2px solid # FFD324;
border-bottom: 2px solid # FFD324;
text-align: center;
margin: auto 5px;
padding: 5px5px;
color: blue;
}

.notice {
background: # FFFFFF;
border-top: 2px solid # FFFFFF;
border-bottom: 2px solid # FFFFFF;
text-align: center;
margin: auto 10px;
padding: 20px 5px;
color: firebrick;
}

.notice2 {
background: # FFFFFF;
border-top: 2px solid # FFFFFF;
border-bottom: 2px solid # FFFFFF;
text-align: center;
margin: auto 10px;
padding: 20px 5px;
color: blue;
}
</style>

<style type="text/css">
.alert {
    background: ##FFF6BF;
    border-top: 2px solid #FFD324;
    border-bottom: 2px solid #FFD324;
    text-align: center;
    margin: 10px auto;
    padding: 5px 20px;
}

.notice {
    background: #ADCBE7;
    border-top: 2px solid #0F5C8E;
    border-bottom: 2px solid #0F5C8E;
    text-align: center;
    margin: 10px auto;
    padding: 5px 20px;
}

.notice2 {
    background: #FFA07A;
    border-top: 2px solid #8DC93E;
    border-bottom: 2px solid #8DC93E;
    text-align: center;
    margin: 10px auto;
    padding: 5px 20px;
}
</style>



<p class="notice2"><strong>Sécurité-ssiap-sûreté-secourisme:</strong> ICI <a href="http://www.securite-ssiap-surete-secourisme.com/showthread.php?tid=4/">Les règles du forum</a> Administrateur59.</p>

<p class="notice2"><strong>Agent de Sécurité Incendie:</strong> ICI <a href="http://www.securite-ssiap-surete-secourisme.com/showthread.php?tid=47/">Votre Fonction</a> A lire Impérativement.</p>




<script>
<!-- Codigo creado por Edson Ordaz -->
var Edson="Détection Incendie-Alarme Incendie-Réseaux Sprinkleurs-RIA-Extincteurs-Portes Coupe-feu-Désenfumage-Clapets Coupe-Feu-Volets de Désenfumage."
var size="3"
if (document.all||document.getElementById){
document.write('<span id="highlight"><p class="newsbar"><font size="' +size+ '"><b>' + Edson + '</b></font></p></span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(Edson)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",80)
}
starteffect()
</script>

   

[Gérald59]

Une idée !!!!

[exdiogene]

Ce nest pas aussi simple que tu penses, il faudrait au préalable savoir si tu veux une distance fixe à droite du logo ou une distance fixe de la marge de droite. Le choix fera une différence sur les écrans de largeur différente.

Pour donner une réponse il est toujours préférable de donner le lien URL de la page afin que nous ayons accès au fichier CSS.

[Saphir]

Son forum est dans sa signature.

[exdiogene]

Je sais, mais il est plus facile de l'avoir en texte dans le message pour nous simplifier la vie.

Je le mentionne aussi pour que tous les autres membres fassent de même!

P.S. Avec le URL il aurait été possible de savoir immédiatement si c'est pour la page index ou la page des discussions que la demande était faites.

[Gérald59]

Voilà le lien:

http://www.securite-ssiap-surete-secourisme.com/index.php

---

pour tout le forum, toutes les pages le header est trop grand.

[norico]

Code :

#container {
width : 90%
}

a remplacer par

Code :

#container {
width : [la dimension que tu veux en % ou px]  
}

[Gérald59]

Non rien à voir, j'ai déjà essayé ça

[exdiogene]

Dans le fichier global.css du thème il y a :

Code PHP :

#logo {
    width: 550px;
    float: left;
    margin-left: 60px;
    height: 130px;
    margin-top: 110px;
}
#panel {
    background: url(../../../images/1company/panel.png) no-repeat;
    width: 230px;
    color: #FFF;
    float: right;
    height: 206px;
    margin-right: 30px;
    margin-top: 30px;
    padding-left: 190px;
    padding-top: 50px;
    font-size: 11px;
} 


C'est dans ces deux sections qu'il est possible de changer le positionnement de la partie de gauche et droite. La façon simple pour un visionnement correct en mode 800X600 serait de changer le "width: 550px;" pour "width: 350px;".

Il serait aussi possible d'augmenter la valeur du "margin-right: 30px;" pour le panel.

[Gérald59]

Ce que je veux c'est diminuer en haut le haut du forum juste ou y'a la photo du bonhomme trop large en hauteur.

[exdiogene]

Afin de montrer que ce n'est pas très joli en 1024X768, voici un aperçu de ce que je vois dans Firefox :

   

[Gérald59]

Si j'ouvre avec firefox voila ce que je vois comme google chrome

   

[Gérald59]

Je me suis surement mal exprimé, voilà ce que je veux en réalité:

Le deuxième forum le haut qu'il soit identique au premier forum.

Voir les deux screen pour comprendre ce que je veux.

   
   

[exdiogene]

J'avais effectivement bien compris, mais je voulais faire savoir que ceux qui ont un écran légèrement moins large ne verrons pas bien l'entête du forum!

La méthode idéale serait de diminuer la largeur du logo de gauche et d'ajouter un espace à droite de la partie de droite. Ainsi tout sera visible de la même façon sur des écrans de 800, 1024 ou 1280 pixels de large. Tel que j'avais mentionné précédemment...

P.S. Il faut noter que dans le deuxième exemple, la portion de connexion est sur une autre ligne...

[Gérald59]

Et je fait comment pour diminuer la largeur du logo stp

[exdiogene]

Je l'avais clairement mentionné ici :
http://mybb.fr/thread-4691-post-26369.html#pid26369

P.S. Les valeurs peuvent aussi être changées dans la section du style du thème dans le Panneau d'Administration.

[Gérald59]

J'ai fait comme tu m'a dis je trouve pas un grand changement

[exdiogene]

(09-09-2011, 15:33)Gérald59 a écrit :  J'ai fait comme tu m'a dis je trouve pas un grand changement

Moi j'en vois un :

   

Comparativement à :

   

Maintenant il est toujours possible de rapprocher les 2 images un peu plus en augemntant la marge de gauche pour le logo et la marge de droite pour le panel...

P.S. Je suggère de diminuer la largeur de ta fenêtre de navigateur web, pour visualiser les changements pour de plus petits écrans...

[Gérald59]

Je veux bien diminuer la largeur de ma fenêtre de navigateur web, mais je fait comment, je suis loin d' être comme toi un génie, moi j'ai toujours vu mon forum comme sur ton premier screen que tu viens de mettre

---

Je vois ce que tu veux dire, le but est que tous puisse voir l'intégralité du forum et qu'il soit pas déformé pour les autres

[dolphin]

(09-09-2011, 16:24)Gérald59 a écrit :  Je veux bien diminuer la largeur de ma fenêtre de navigateur web, mais je fait comment, je suis loin d' être comme toi un génie, moi j'ai toujours vu mon forum comme sur ton premier screen que tu viens de mettre

---

Je vois ce que tu veux dire, le but est que tous puisse voir l'intégralité du forum et qu'il soit pas déformé pour les autres

Dans le coin du haut à droite de la fenêtre, il y a 3 petits boutons, l'un pour minimiser, il se trouve à gauche, celui de droite c'est pour fermer la fenêtre et dans ton cas tu cliques sur le bouton du milieu.