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.
11 sujets de 16 à 26 (sur un total de 26)
  • Auteur
    Messages
  • #607893
    nours
    Membre
    Initié WordPress
    46 contributions

    Yes ✅
    Suis trop fan 😉
    Donc pour récap. j’ai bien créer le conteneur comme Lumière et Many me l’ont indiqué.
    Puis, pour chaque bloc, j’ai laissé absolute et n’ai eu qu’à modifier le left:XXpx pour chaque bloc à droite

    Si certains sont intéressés par le header.php, le style.css et le footer.php voici les 3 fichiers :

    style.css (sélectionner le code copier et coller dans le fichier)

    /*
    	Theme Name: Leia adpaté par Nours grâce à www.wordpress-fr.net pour le centrage de la page 
    	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;
    	}
    
    /*spécifie un conteneur pour centrage de la page du blog*/
    	
    #page {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:0px;
    width:1007px;
    }
    	
    #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:auto;
    	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:relative;
    	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;
            top:0px;
    	left:761px;
    	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:761px;
    		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:761px;
    			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;
    }

    header.php (sélectionner le code copier et coller dans le fichier)

    
    
    
    
    	<meta http-equiv="Content-Type" content="; charset=” />
    	<title></title>
    	
    	<meta name="generator" content="WordPress ” /> <!-- leave this for stats please -->
    
    	
    		@import url(  );
    	
    
    	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="” />
    	<link rel="alternate" type="text/xml" title="RSS .92" href="” />
    	<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="” />
    	
    	<link rel="pingback" href="” />
        
    	
    	
    
    
    
    
    <div id="page">
     <div id="cabecera">
     <h1></h1>
     </div>

    footer.php (sélectionner le code copier et coller dans le fichier)

    <ul>
    	<li>Diseno del <a href="http://www.kapikua.com/theme-leia/" title="theme Leia">Theme Leia</a> powered by <a href="http://www.kapikua.com" title="kapikua">Kapikua</a></li>
    	<li><?php echo sprintf(__("Sistema controlado mediante <a href='http://wordpress.org/' title='%s'>WordPress</a>“), __(“Powered by WordPress, state-of-the-art semantic personal publishing platform.”)); ?></li>
    	<li>They have been made   queries to database.
    	<li>Time  seconds.</li>
    </ul>
    
    
    
    
    </div>

    #607894
    rade
    Membre
    Initié WordPress
    23 contributions

    Salut

    J’ai éssayé de tout suivre pour appliquer ca a mon theme mais … pas trop réussi !

    J’ai éssayé de mettre margin:auto a tout les #
    mais ca me file tout l’un au dessus de l’autre ou l’un a la suite de l’autre quand j’enleve la position: absolute

    alors j’ai pas tres bien compris ce qu’il faut faire dans ce cas, ou alors ta solution nours :S

    queqlu’un peut m’aider ??

    Pour info j’utilise le theme Gridlock et voila l’adresse :
    http://ayoubs.fr/V2

    #607895
    rade
    Membre
    Initié WordPress
    23 contributions

    Up ?

    #607896
    rade
    Membre
    Initié WordPress
    23 contributions

    bon bah finalement j’ai réussi ..
    un margin:auto dans le body a suffi , mais il fallait juste donner un width a mon body
    Seulement, petit probleme, je ne sais pas comme j’ai fais, mais ma sidebar est maintenant a la suite du contenu .. et non a coté .. comment arranger ca ????

    #607897
    Many
    Participant
    Maître WordPress
    1485 contributions

    Peut-être que le width que tu as attribué à ton body n’est pas assez grand ? Dans ce cas soit tu le modifie soit tu fixe un width à chaque bloc de manière à ce que tout corresponde à celui du body.

    #607898
    rade
    Membre
    Initié WordPress
    23 contributions

    eh ben non… j’ai pensé a ca , mais ca ne l’est pas :S

    #607899
    nours
    Membre
    Initié WordPress
    46 contributions

    comme je te l’avais indiqué par mail Rade, ce thème est, selon moi, mal branlé : des “absolute” partout, pas de “content” bref c’est une vraie galère à organiser et donc personnaliser.
    Pour ma part j’ai laché l’affaire avec Leia et suis passé sur des thèmes construits de façon bcp plus rigoureuse

    #607900
    rade
    Membre
    Initié WordPress
    23 contributions

    je ne suis pas sur leia mais sur gridlock . je l’ai précisé 🙂

    #607901
    rade
    Membre
    Initié WordPress
    23 contributions

    euh voila je n’ai pas précisé ..
    mais voila ce que j’ai actuellement :

    Pour le width jai

    sidebar + main-content=body
    220+532=752px

    #sidebar {
    		background:#eeeeee;
    		width: 220px;
    		margin: 10px 0px 10px 0px;
    		padding: 0 0 10px 0px;
    		text-align: left;
    		position:absolute;
    		left: 550px;
    		top:220px;
    		display: block;
                    overflow: visible;
    	}

    #607902
    rade
    Membre
    Initié WordPress
    23 contributions

    un petit up ?

    #607903
    rade
    Membre
    Initié WordPress
    23 contributions

    J’ai tésté de changer l’overflow et la position en auto et relative respectivement :S :S

    Rien

    une solution ???

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