Leia : personnalisation (centrage) (Créer un compte)

  • Statut : non résolu
  • Ce sujet contient 25 réponses, 5 participants et a été mis à jour pour la dernière fois par rade, le il y a 14 années.
15 sujets de 1 à 15 (sur un total de 26)
  • Auteur
    Messages
  • #453616
    nours
    Membre
    Initié WordPress
    46 contributions

    Bonjour,

    je développe mon blog sur la base du très beau thème Leia visible à cette adresse http://www.kapikua.com/2006/07/24/theme-leia/

    Je vous livre la maquette que je réalise sous photoshop
    1accueilleiapersotp8.th.jpg

    Comme vous le constaterez, les blocs de ma maquette sont centrés sur la page contrairement à l’original ferré à gauche.
    Autant sous CS2 je sais faire… autant je nage un peu pour modifier le css ou autre pour centrer l’ensemble :rolleyes:
    Si une âme charitable voulait bien me donner quelques pistes (quel ligne modifier, css ou dans fichier php)
    Merci

    #607879
    Bl4ckd0g
    Participant
    Padawan WordPress
    78 contributions

    Ce sont les onglets que tu appelle blocs ?

    Si c’est ça je laisse le bout de CSS qui correspond pour t’aider à avoir une réponse, (joli choix de thème au passage)

    #menuh {
    	width:643px;
    	height:33px;
    	position:absolute;
    	top:0;
    	left:0;
    	background-color:#546367;
    }
    
    		#menuh ul {
    			list-style:none;
    			color:#fff;
    			font-size:13px;
    			margin:8px 0 0 30px;
    			padding:0;
    		}
    		
    			#menuh ul li {
    				display:inline;
    			}
    			
    					
    					#menuh ul li a {
    						color:#fff;
    						text-decoration:none;
    					}
    					
    					#menuh ul li a:hover {
    						color:#fff;
    						text-decoration:underline;
    					}

    #607880
    nours
    Membre
    Initié WordPress
    46 contributions
    Bl4ckd0g wrote:
    Ce sont les onglets que tu appelle blocs ?

    Si c’est ça je laisse le bout de CSS qui correspond pour t’aider à avoir une réponse, (joli choix de thème au passage)

    Hé hé oui je vois bien le code que tu cites : il s’agit de la barre de menu mais ce sont tous les blocs qui doivent être centrés et la je sais pas où poser le CENTER ou autre astuce 😕

    Je mets l’intégralité du CSS ci-joint : je vois bien que le ferré à gauche est lié au margin= 0 mais après :rolleyes:

    /*
    	Theme Name: Leia
    	Theme URI: http://kapikua.com/
    	Description: Theme dedicated to mi princess…
    	Version: English 1.0
    	Author: Kapikua
    */
    
    
    
    body {
    	background-color:#fff;
    	margin:0;
    	padding:0;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#546367;
    }
    
    
    input, textarea {
    	border:1px solid #000;
    	color:#333;
    }
    
    textarea {
    	width:550px;
    }
    
    h1 {
    	font-size:32px;
    	margin:30px 0 0 180px;
    	color:#FFFFFF;
    	/*display:none;*/
    }
    
    	h1 a{
    		color:#FFFFFF;
    		text-decoration:none;
    	}
    	
    	
    #cabecera {
    	background-image:url(imagenes/headers/cab.png);
    	background-repeat:no-repeat;
    	width:643px;
    	height:300px;
    	position:absolute;
    	top:33px;
    	margin:0;
    	padding:100px 0 0 30px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:28px;
    	color:#006699;
    	font-weight: bold;
    	text-transform: uppercase;
    }
    
    
    h2 {
    	color:#318796;
    	margin:00;
    	padding:0;
    	font: 12px/160% “Arial”, Arial, “Bitstream Vera Sans”, sans-serif;
    	font-size:28px;
    	letter-spacing:-1px;
    }
    		h2 a {
    			color:#318796;
    			text-decoration:none;
    		}
    
    h3 {
    	font-size:13px;
    	margin:0;
    	padding:5px;
    	font-weight:normal;
    	background-color:#F1F1F1;
    	color:#318796;
    	border-top:2px solid #318796;
    }
    
    		h3 a {
    			text-decoration:underline;
    			color:#318796;
    			font-weight:bold;
    		}
    		
    		h3 a:hover {
    			text-decoration:underline;
    		}
    
    h4 {
    	text-align:justify;
    	font-size:13px;
    	font-weight:normal;
    }
    	h4 blockquote {
    		padding:5px;
    		margin:10px auto 10px auto;
    		background-color:#D6DCDE;
    		border:3px solid #929B9D;
    		width:80%;
    	}
    	
    	h4 a {
    			color:#27406F;
    			text-decoration:none;
    			font-weight:bold;
    		}
    	
    		
    	h4 a:hover {
    			text-decoration:underline;
    		}
    
    h5 {
    	padding:8px;
    	margin:0;
    	font-size:11px;
    	background-color:#303030;
    	background-image:url(imagenes/fondo_fint.png);
    	background-repeat:no-repeat;
    	color:#fff;
    	font-weight:normal;
    }
    		
    		h5 p {
    			padding:0;
    			margin:0 0 5px 0;
    		}
    			
    		h5 a {
    			text-decoration:none;
    			color:#CCC;
    		}
    		
    		h5 a:hover {
    			text-decoration:underline;
    		}
    		
    		h5 ul {
    			list-style:none;
    			margin:0 0 5px 0;
    			padding:0;
    		}	
    		
    			h5 ul li {
    				display:inline;
    				margin:0 0 0 0;
    			}	
    			
    		
    /* ID´s */
    
    #menuh {
    	width:643px;
    	height:33px;
    	position:absolute;
    	top:0;
    	left:0;
    	background-color:#546367;
    }
    
    		#menuh ul {
    			list-style:none;
    			color:#fff;
    			font-size:13px;
    			margin:8px 0 0 30px;
    			padding:0;
    		}
    		
    			#menuh ul li {
    				display:inline;
    			}
    			
    					
    					#menuh ul li a {
    						color:#fff;
    						text-decoration:none;
    					}
    					
    					#menuh ul li a:hover {
    						color:#fff;
    						text-decoration:underline;
    					}
    			
    		
    #post {
    	width:643px;
    	position:absolute;
    	left:0;
    	top:280px;
    	z-index:100;
    	padding:20px 0 0 0;
    }
    
    #video {
    	text-align:center;
    }
    
    
    #buscador {
    	background-image:url(imagenes/fondo_buscador.png);
    	background-repeat:repeat-x;
    	position:absolute;
    	left:644px;
    	width:363px;
    	height:81px;
    	text-align:center;
    	/* Iexplorer */
    	*width:360px;
    	
    }
    	#searchform {
    			margin:30px 0 0 0;
    	}
    		
    	#azul {
    		background-image:url(imagenes/fondo_azul.png);
    		position:absolute;
    		left:644px;
    		top:82px;
    		height:177px;
    		border-bottom:12px solid #D4D8D9;
    		font-size:11px;
    		color:#fff;		
    		width:363px;
    		/* Iexplorer */
    		*width:360px;
    	}	
    		
    		#azul h2 {
    				color:#fff;
    				margin:0;
    				padding:0 10px 0 10px;
    				font: Arial, verdana,  sans-serif;
    				font-size:24px;
    				letter-spacing:-1px;
    			}
    			
    			#azul p{
    				padding:0 10px 0 10px;
    				margin:0;
    				letter-spacing:0.1em;
    				text-align:justify;
    			}
    			
    			#azul img {
    				margin:0 10px 0 10px; 
    			}
    				
    		#menu {
    			position:absolute;
    			background-color:#333;
    			top:272px;
    			left:644px;
    			width:363px;
    			padding:15px 0 0 0;
    			/* Iexplorer */
    			*width:360px;
    		}
    		
    		
    	#menu h2 {
    		color:#99CC00;
    		margin:0;
    		padding:0;
    		font: Arial, verdana,  sans-serif;
    		font-size:24px;
    		letter-spacing:-1px;
    	}	
    	
    	
    	#izquierda {
    		width:165px;
    		padding:0 0 20px 20px;
    		float:left;
    	}
    	
    		
    	#derecha {
    		width:165px;
    		margin-left:180px;
    	}
    			
    			#menu ul {
    				margin:0;
    				padding:0;
    				list-style:none;
    			}
    			
    			#menu ul li{
    				margin:0;
    				padding:0;
    				list-style:none;
    			}
    			
    			#menu ul li ul  {
    				margin:0 0 0 10px;
    				padding:0;
    				list-style:none;
    			}
    					
    					#menu ul li ul li {
    						margin:3px 0 0 0;
    						padding:0;
    						font-size:11px;
    					}
    					
    						#menu ul li ul li a{
    							text-decoration:none;
    							color:#5D8F2B;						
    						}
    						
    						#menu ul li ul li a:hover{
    							text-decoration:underline;
    							color:#7EE916;						
    						}
    		
    		#var {
    			margin:15px 9px 0 8px;
    			padding:8px;
    			font-size:12px;
    			border:1px solid #999;
    			background-color:#303030;
    			clear:both;
    		}
    		
    				#var p {
    					padding:0;
    					margin:0 0 5px 0;
    				}
    		
    		
    					
    				#var ol {
    					margin:8px 0 0 0  ;
    					padding:0;
    					
    					color:#FFF;
    				}
    						
    					#var ol li{
    							display:inline;
    						}
    						
    					#var ol li a{
    						text-decoration:none;
    						color:#CCC;
    						font-weight:bold;
    						}
    					#var ol li a:hover{
    						text-decoration:underline;
    						}
    		
    			
    		#totalcomentarios {
    			background-color:#000;
    			color:#99CC00;
    			margin:0;
    			padding:5px 5px 5px 10px;
    			font-size:16px;
    			font-weight:bold;
    			letter-spacing:1px;
    		}
    		
    		
    		#metacoment {
    		margin:15px 0 0 0;
    		padding:4px 0 0 4px;
    		height:40px;
    		font-size:14px;
    	}
    	
    	#avatar {
    		float:left;
    	}
    	
    	#usuario {
    		padding:0;
    		margin:0;
    		line-height:15px;
    	}
    		#usuario a{
    			text-decoration:underline;
    			color:#006699;
    		}
    		
    		#usuario p{
    			margin:2px 0 0 0;
    			padding:0;
    		}
    	
    	#comentario {
    		background-color:#F2F2F2;
    		padding:0 7px 0 7px;
    		margin:0;
    		border:1px solid #E8E8E8;
    		font-size:12px;
    	}
    		#comentario a {
    			color:#27406F;
    		}
    	
    	
    		
    		#pie {
    			margin:15px 0 0 0;
    			background-color:#666;
    			color:#FFF;
    			font-size:11px;
    		}	
    		
    				#pie a {
    					text-decoration:none;
    					color:#99CC00;
    				}
    				
    				#pie a:hover {
    					text-decoration:underline;
    							color:#7EE916;	
    				}
    		
    								
    				#pie ul {
    					margin:10px 0 0 20px;
    					padding:15px 0 15px 0;
    				}
    				
    				#pie ul li {
    					margin-bottom:5px;
    				}
    				
    				#pie ol {
    				margin:5px;
    				padding:2px;
    				}
    		
    		
    	#nav {
    		font-size:11px;
    		padding:20px;
    		text-align:center;
    		border-bottom:5px solid #666;
    	}
    	
    			#nav a {
    				color:#333;
    				text-decoration:none;
    			}
    			
    			#nav a:hover {
    				color:#000;
    				text-decoration:underline;
    			}
    	
    	#postcomment {
    		font-size:18px;
    		margin:20px 0 0 0;
    	}
    	
    	
    /* Class */
    
    .tags {
    	background-image:url(imagenes/icono_tag.png);
    	background-repeat:no-repeat;
    	padding-left:24px;
    	margin-left:5px;
    }
    
    .comentarios {
    	background-image:url(imagenes/icono_comentario.png);
    	background-repeat:no-repeat;
    	padding-left:24px;
    	margin-left:5px;
    }
    
    .categoria {
    	background-image:url(imagenes/icono_categoria.png);
    	background-repeat:no-repeat;
    	padding-left:24px;
    	margin-left:5px;
    }
    
    .feedo {
    	background-image:url(imagenes/feed.png);
    	background-repeat:no-repeat;
    	padding-left:18px;
    	margin-left:5px;
    }
    
    
    .ad {
    	background-image:url(imagenes/icono_ad.png);
    	background-repeat:no-repeat;
    	padding-left:24px;
    	margin-left:5px;
    }
    
    .as {
    	color:#3BB000;
    	text-decoration:none;
    
    }
    
    .de {
    	color:#0099CC;
    	text-decoration:none;
    	
    }
    
    
    .technorati{
    	margin:0 0 0 0;
    	padding-left:20px;
    	background-image:url(imagenes/tecno.png);
    	background-repeat:no-repeat;
    }
    
    .delicio{
    	margin:0 ;
    	padding:0 0 0 20px;
    	background-image:url(imagenes/del.png);
    	background-repeat:no-repeat;
    }
    
    .inputext {
    	border:1px solid #99AA92;
    	background-color:#fff;
    	color:#6A7F61;
    	width:191px;
    
    }
    
    .boton {
    	border:1px solid #99AA92;
    	background-color:#D4E0CE;
    	color:#6A7F61;
    	width:90px;
    	/* IE */
    	*height:20px;
    }
    
    .liout {
    	margin:-5px;
    	padding:5px 10px 5px 15px;
    	border-right:1px solid #CCC;
    	/* IE */
    	*margin-left:10px;
    	*padding:5px;
    }
    	
    	
    .tiempo {
    	font-size:11px;
    }
    
    		
    .sindicar {
    	background-image:url(imagenes/rss.png);
    	background-repeat:no-repeat;
    	background-position:left;
    	padding-left:45px;
    	margin-left:5px;
    }
    .post {
    	width:610px;
    	margin:0 0 30px 15px;
    }
    
    .autor {
    	color:#318796;
    	font-size:13px;
    	font-weight:bold;
    }
    
    .imagen {
    	margin:7px;
    }

    #607881
    Lumiere de Lune
    Participant
    Maître WordPress
    19539 contributions

    Le centrage se fait habituellement en imbraiquant une balise dans le body. Le body est en text-align center, éventuellement margin-auto, et la balise immédiatement à l’intérieur repasse en text-align:left

    Ainsi le body centre le conteneur, et à l’intérieur du conteneur c’est aligné à gauche.

    Il faut donc que tu rajoutes une balise dans le template du thème

    #607882
    Many
    Participant
    Maître WordPress
    1485 contributions

    Lumière de Lune a raison. Pour faire ça proprement il te faudrait rajouter un conteneur en plus, par exemple :

    
    
    <div id="page"><!-- On rajoute un conteneur en plus -->
    
    <div id="cabecera">
    	<h1></h1>
    </div>
    <!-- ça c'est la fin de ton header.php -->
    
    <!-- et ça c'est la fin de ton footer.php -->
    
    </div><!-- On ferme le nouveau conteneur #page -->

    et rajouter dans ton fichier de style :

    #page {
    	margin: 0 auto;
    	//spécifier un width aussi de préférence
    }

    Le problème maintenant c’est tout ces “position: absolute” et “left:0;” un peu partout !

    #607883
    nours
    Membre
    Initié WordPress
    46 contributions

    Oula ça se corse…
    Je récapitule si j’ai bien tt compris : effectivement comme l’indiquait Lumière de Lune j’ai créer un conteneur dans ma style.css de mon thème Leia

    #conteneur { width:1083px; height:100%; background-color:#ffffff; margin-top:-20px; margin-left:auto; margin-right:auto; }

    Si je te suis bien Many il faut que dans le header.php j’appelle par div id=”conteneur” le bloc “cabecera” que j’englobe par un div /div
    Mais si je suis cette logique je dois faire de même dans le footer.php ?

    Ai je bien compris ?

    #607884
    nours
    Membre
    Initié WordPress
    46 contributions
    <div id="conteneur">
    	<div id="cabecera">
    		<h1></h1>
    	

    Voici le code que j’ai inséré dans mon header.php.
    Bilan : seul le bloc motopub.fr est centré :(

    #607885
    Lumiere de Lune
    Participant
    Maître WordPress
    19539 contributions

    Je n’avais pas vu que le thème était en position absolute. Ca “ruine” tout 🙂 car la position absolute se fiche des indications de centrage, elle accroche le bloc sur les pixels, point barre.

    Sinon, tu dois normalement rajouter ce conteneur supplémentaire soit dans le main index (qui appelle header, loop et footer) soit mettre son ouverture dans le header et sa fermeture dans le footer. Tu dois avoir un seul conteneur il s’ouvre juste après l’ouverture de body et se ferme juste avant la fermeture de body.

    Mais passer un thème aligné à gauche en position absolue sur un thème “relatif” et centré, c’est pas mal de boulot.

    #607886
    Many
    Participant
    Maître WordPress
    1485 contributions
    nours wrote:
    <div id="conteneur">
    	<div id="cabecera">
    		<h1></h1>
    	

    Voici le code que j’ai inséré dans mon header.php.
    Bilan : seul le bloc motopub.fr est centré :(

    Normal, tu as fermé ton nouveau conteneur directement à la suite du titre. Si tu regarde bien dans ma réponse plus haut, je n’ai fermé le conteneur qu’à la fin, dans le fichier footer.php

    #607887
    nours
    Membre
    Initié WordPress
    46 contributions

    Ah ben la tu m’as calmé 😗
    Me d’mande si je vais pas le laisser tel quel 😇
    Bon ben… je vous tiens au parfum
    Merci pour les réponses

    #607888
    Many
    Participant
    Maître WordPress
    1485 contributions

    J’ai édité mon code plus haut pour qu’il soit un peu plus parlant, au cas où d’autre chercherait à faire la même chose.

    #607889
    nours
    Membre
    Initié WordPress
    46 contributions

    Salut
    il m’est venu une idée dans la nuit (j’aime pas rester sur un échec) : si pour chaque bloc (cabecera, menu, azul, buscador, sidebar etc.) je spécifiais à chaque fois le centrage au lieu de les encapsuler ?
    Je suis pas convaincu que cela soit très rigoureux mais bon….

    #607890
    Lumiere de Lune
    Participant
    Maître WordPress
    19539 contributions

    Tu peux essayer mais ça ne résout pas le problème des positions absolute 🙂

    Mieux vaut les mettre dans un seul conteneur

    #607891
    nours
    Membre
    Initié WordPress
    46 contributions
    Lumière de Lune wrote:
    Tu peux essayer mais ça ne résout pas le problème des positions absolute 🙂

    Mieux vaut les mettre dans un seul conteneur

    Arggggggggg !!! bon en fait si j’ai bien compris il y a incompatibilité à travailler avec absolute et un conteneur de centrage.
    J’ai bien essayé avec des modifs bloc par bloc avec des %, des px fixes, des margin à 0) mais c’est vrai que c’est galère.
    Or donc, je me plie à vos recommandations 😗 et vai poursuivre sur la notion de conteneur
    C’est usant ces petites bêtes. Je poserai le code quand j’aurai trouvé
    Merci @tous 🍺

    #607892
    Lumiere de Lune
    Participant
    Maître WordPress
    19539 contributions

    De rien 🙂 🙂 🙂

15 sujets de 1 à 15 (sur un total de 26)
  • Vous devez être connecté pour répondre à ce sujet.