Sujet Précédent Sujet Suivant

Modification mise en page sous wordpress (page statique)

Fermé
Lebubu Messages postés 10 Date d'inscription lundi 1 juillet 2013 Statut Membre Dernière intervention 1 mai 2016 - 24 juil. 2013 à 10:25
dwade74 Messages postés 120 Date d'inscription samedi 28 mai 2011 Statut Membre Dernière intervention 25 janvier 2014 - 27 juil. 2013 à 13:18
Bonjour,


Problème(s) rencontré(s) : problème mise en page pour création page statique


J'ai actuellement un blog sous wordpress que j'aimerais transformer de sorte à ce que la page d'accueil soit statique.
J'ai compris les modifications à effectuer dans l'admin wordpress et c'est assez simple.

Cependant, là où je "galère" (!!!), c'est dans la création de cette page.
En suivant quelques tutos (fran6art ou paperblog) , j'ai pu créer une page php à partir de "page.php" qui me servira de modèle. je l'ai nommée "page2".

Actuellement, le thème comporte 2 sidebars. En réalité une sidebar + une colonne dans laquelle figurent des bannières de pubs fixes.

Je souhaiterais que ma nouvelle page ne comporte plus de sidebar du tout, de sorte que je puisse écrire et remplir toute la largeur comme je l'entends. (avec un éditeur visuel pour me faciliter la tache; mais ça c'est bon, j'ai et j'ai compris ;-) )

Autre problème: comme il y a 3 colonnes (contenu+ sidebar pubs + sidebar classique), celles de gauche et de droite sont de la même couleur mais celle du milieu est d'une couleur différente.
J'aimerais n'avoir qu'une couleur...
(J'ai pu identifier le fichier gif qui fait 1004x1 px et qui est répété de sorte à créer le fond.

Voilà 2 images pour mieux me faire comprendre: la 1ère correspond à une page actuelle et la seconde à la page que j'ai commencé à modifier...
https://www.diigo.com/item/p/prsccoczbqcoobdprzbasdabqc/c361980fa481a64bfd2416fb19360103
https://www.diigo.com/item/p/prsccoczbqcoobsrpzbasdaccp/8208db10166126155432d5a75fe4d2bd

J'espère que vous pourrez m'aider!!! Dites moi ce dont vous avez besoin comme fichier (style.css ou fichiers php...)

Un énorme merci d'avance!!!



PS: j'avais posté dans un forum sur wordpress et l'on m'a répondu que mon problème relevait du CSS et qu'il fallait donc que j'écrive dans un forum pour résoudre les problèmes liés au css.



Ma configuration WP actuelle
- Version de WordPress : 3.5.2
- Version de PHP/MySQL : 5
- Thème utilisé : modifié

A voir également:

6 réponses

Réponse 1 / 6
Loic
24 juil. 2013 à 10:29
Je veux bien t'aider mais j'ai besoin du code html de ta page et surtout ton css,
Comme ca je t'explique en te le faisant
1
Réponse 2 / 6
Lebubu Messages postés 10 Date d'inscription lundi 1 juillet 2013 Statut Membre Dernière intervention 1 mai 2016
24 juil. 2013 à 15:14
Merci Loic.
Je poste tout çà ici ou bien je t'envoie en MP?
0
Réponse 3 / 6
Loic
24 juil. 2013 à 15:34
Ici ou en mp comme tu veux, mais ici c'est pas mal !
0
Réponse 4 / 6
Loic
25 juil. 2013 à 10:06
????
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Lebubu Messages postés 10 Date d'inscription lundi 1 juillet 2013 Statut Membre Dernière intervention 1 mai 2016
26 juil. 2013 à 10:24
Désolé pour cette absence. J'ai eu un gros souci qui m'a empêché de te répondre plus vite.

Voilà donc le fichier css (j'ai volontairement caché l'adresse du site car je ne souhaite pas que cela figure publiquement. Si besoin, je peux t'envoyer en mp) 

/*http://www.*********.fr/blog/wp-admin/theme-editor.php?file=/themes/musicmagazine/style.css&theme=JB+Blog&a=te
Theme Name: JB Blog
Description: J****B** blog wordpress theme
Version: 1.0
Author: JB
Author URI: http://www.********.fr 
*/
/*------JB-------*/	
/*     Global    */
/*---------------*/
body {
	margin: 0;
	background: url("images/background.gif") repeat-x;
	background-color:#162d44;
}
h1, h2, h3, h4 {
	margin: 0;
}
a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	border: 0;
}

.clear {
	clear: both;
	height: 0;
	overflow: hidden;
}

/*------JB-------*/	
/*    The Wrap   */
/*---------------*/

#wrap {
	width: 1004px;	
	margin: 0 auto;
	padding:0px;
	background: #FDFBEF url("images/bg.gif") repeat-y top;
}

#content-container {
	width: 1004px;
	background: url("images/header.jpg") no-repeat top;	
	margin: 0 auto;
	padding:0px;
}
#page-top {
	width: 1004px;
	background: url("images/page_top.gif") no-repeat bottom;
	height:16px;
	position:absolute;
	top:220px;
	left:0;
}
#contents {
	width: 945px;
	padding: 0 22px 0 32px;
	margin-top:15px;
}

#page-bottom {
	width: 1004px;
	background: url("images/page_bottom.gif") no-repeat bottom;
}


/*------JB-------*/	
/*   The Header  */
/*---------------*/

#header {
	width: 1004px;
	height: 230px;
	position: relative;
}

#header-translator {
	position: absolute;
	text-transform: uppercase;
	right: 50px;
	top: 150px;	
}

#header-title {
	position: absolute;
	text-transform: uppercase;
	left: 290px;
	top: 100px;
}
#header-title h1 {
	color: #ffffff;
	font:36px "Century Gothic", Arial;
	font-weight:bold;
}
#header-title h1 a {
	color: #FDFD8F;
	text-decoration: none;
}
.header-subtitle {
	color: #ffffff;
	font:12px Arial;
}
#header-rss {
	position: absolute;
	left: 825px;
	top: 188px;
}


#rss {
	position: relative;
	padding-left:50px;
	height: 60px;
	font: bold 12px tahoma;
	color: #a2a2a2;
	line-height:60px;
	background: url("images/icon_feed.gif") no-repeat;
}

#rss a {
	color: #a2a2a2;
}

/*------JB-------*/		
/*   Top Menu    */
/*---------------*/
	
#navlist {
	position: absolute;
	top: 181px;
	left: 280px;
	height: 28px;
}

#navlist ul {
	list-style-type: none;
	height: 28px;
	padding: 0;
	margin: 0;
}

#navlist ul li {
	font: bold 14px Arial;
	color: #aaaaaa;
	margin: 0 0 0 0px;
	height: 28px;
	float: left;

}

#navlist ul li a {
	display: block;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 13px;
	height:18px;
	color: #CCCCCC;	
	background:url("images/ctg_divider.gif") no-repeat right;
}

#navlist ul li:hover {
		
}

	
#navlist ul li a:hover {
		color: #FDFD8F;
		
}

#navlist ul li.current_page_item {
		color: #FFFFFF;
		
}
	
#navlist ul li.current_page_item a {
		color: #FFFFFF;
		
}

/*------JB-------*/		
/*  Search Area  */
/*---------------*/
	
#menu_search_box {
	position: absolute;
	top: 10px;
	left: 780px;
	width: 130px;
	height: 20px;
}

#menu_search_box #searchform {
	margin: 0;
	padding: 0;
	width: 130px;
	height: 27px;
}

#menu_search_box #s {
	font: 10px tahoma;
	color: #666666;
	border: 0;
	padding: 3px 10px 0 10px;		
	background: none;
	float: left;
	width: 130px;
	height: 18px;
}

#menu_search_box #submit {
	display: none;
}
	

/*------JB-------*/		
/*    Top Post   */
/*---------------*/


#contents .top_post {
	float: left;
	padding:0;
	margin: 0 0 10px 0;
	height:280px;
	width: 560px;
}


.post_title {
	width: 560px;
	color: #848484;
	height:120px;
	font: 10px Arial;
	background:url("images/top_post_top.gif") repeat-x top left;
}

.post_title h2 {
	color: #CCCCCC;
	font: bold 16px Arial;
	padding:5px ;
	margin-left:7px;
	width:520px;
}

.post_title h2 a {
	color: #DFEBFF;
	text-decoration: none;
}

.post_title h2 a:hover {
	text-decoration: underline;
}

.post_title a {
	color: #848484;
	text-decoration: none;
}

.post_title a:hover {
	text-decoration: underline;
}

.meta_inf {
	width: 530px;
	height: 22px;
}
.meta_inf a{
        color:#6672B3;
}	
.headline {
	float: left;
	display:inline;
	padding-left: 2px;
	padding-top: 2px;
}
.headline_date {
	float: right;
	display:inline;
	padding-top: 3px;
	color:#CCCCCC;
	font:14px arial;
}
.meta_date {
	float: left;
	display:inline;
	padding-left: 5px;
	color:#666666;
	font:10px arial;
	line-height:22px;
}
.meta_comments {
	float: right;
	font:10px arial;
	color:#666666;
	padding-left: 16px;
	height:22px;
	line-height:22px;
}

.top_titles a{
	color: #6672B3;
	text-decoration: none;
	font: bold 18px arial;
}
	
.top_entry {
	text-align:justify;
	color: #303030;
	width: 520px;
	padding: 0px 10px 0 12px;
	clear:both;
	font: 12px arial;
	margin-top:-80px;
	height:185px;
	overflow: hidden;
}

.top_entry blockquote {
	border-left: 7px solid #efefef;
	font-style:italic;
	padding:0 0 0 15px;
	margin: 0px 15px;
}

.top_entry a {
	color: #6672B3;
	text-decoration: none;
}

.top_entry a:hover {
	text-decoration: underline;
}

.top_entry img {
	padding: 10px;
}

.post_bottom {
	width: 560px;
	/* padding-top: 14px; */
	line-height: 22px;
	height: 30px;
	font: 11px Arial;
	color: #666666;	
}

.post_cat {
	padding: 10px 0px 0px 14px;
	line-height: 22px;
	font: 11px Arial;
	color: #666666;	
}

.post_cat a {
	color: #6672B3;
}

/*------JB-------*/		
/*   Mag Posts   */
/*---------------*/

#content {
	float: left;
	width: 560px;
	overflow: hidden;
}

#content .mag_posts {
	float: left;
	width: 560px;
	margin: 0 6px 6px 0;
	color: #303030;
	font: 11px Arial;
}

#content .mag_posts a {
	color: #6672B3;
}

#content .top_mag_posts {
	width: 560px;
	background: url("images/post_mag2_top.gif") no-repeat;
}

#content .bottom_mag_posts {
	width: 560px;
	padding-top: 7px;
	padding-bottom: 4px;
}

#content .mag_posts h2 {
	padding:0;
	padding-left: 7px;
	color: #222222;
	font: bold 14px arial;
	/* height:30px; */
	margin:0;
	
}

#content .mag_posts h2 a {
	color: #222222;
}

#content .top_mag_titles a{
	color: #6672B3;
	text-decoration: none;
	font: bold 12px arial;
}
#content .mag_posts .mag_posts_entry {
	padding: 0px 9px 10px 12px;
	margin:1px;
	width: 520px;
	height: 140px;
	text-align:justify;
	overflow: hidden;
/*	background-color:#00FF33;  couleur de fond des articles carr? de la home */ 
}

#content .mag_posts_entry img {
	padding: 3px;
/*	border: 1px solid #FFE2B8;
*/}

#content .mag_posts .mag_posts_meta {
	margin: 10px 9px 0 6px;
	width:520px;
	height: 22px;
	overflow:hidden;
}

/*------JB-------*/		
/*  Pages Posts  */
/*---------------*/

#wpcf label {
	clear: both;
	display: block;
	float: left;
	width: 200px;
}
#wpcf input {
	float: left;
	width: 200px;
	padding: 1px;
	margin: 2px 5px 2px 0;
}
#wpcf textarea {
	width: 400px;
	height: 100px;
	padding: 1px;
	margin: 0 5px 10px 0;
}
#wpcf #contactsubmit {
	margin-left: 300px;
	width: 100px;
}

#content .post {
	float: left;
	width: 560px;
	margin-bottom: 10px;
	
}

#content .post-top {
	width: 560px;
	color: #DFEBFF;
	height:120px;
	font: 10px Arial;
	background:url("images/top_post_top.gif") repeat-x top left;
}
#content .post-bottom {
	width: 560px;
	padding-top: 14px;
	line-height: 22px;
	height: 30px;
	font: 11px Arial;
	color: #cccccc;
}
#content .post-top a {
	color: #DFEBFF;
	text-decoration: none;
}

#content .post-top a:hover {
	text-decoration: underline;
}
#content .post-top h2 {
	color: #DFEBFF;
	font: 20px Arial;
	padding:5px;
}

#content .post-top h2 a {
	color: #DFEBFF;
	text-decoration: none;
}

#content .post-top h2 a:hover {
	text-decoration: underline;
}

#content .meta_inf {
	width: 530px;
	height: 22px;
}

#content .post .post_ctg {
	width: 560px;
	padding-left: 14px;

	line-height: 22px;
	height: 22px;
	font: 11px Arial;
	color: #999999;
}

#content .post .post_ctg a {
	color: #6672B3;
}

#content .post-entry {
	font: 12px Arial;
	color: #303030;			
	width: 545px;
	padding: 0 10px 0 10px;
	text-align:justify;
	margin-top:-70px;
}

#content .post-entry a {
	color: #6672B3;
	text-decoration: none;
}
#content .post .post-entry a:hover {
	text-decoration: underline;
}
#content .post .post-entry blockquote {
	border-left: 6px solid #999999;
	margin: 0px 20px;
	padding-left: 10px;
	font-style:italic;
}

#content .post .post-entry img {
	padding: 5px;
	border: 0px;
}



#content .post h3 {
	margin: 20px 0 5px 0;
	color: #6672B3;
	font: 18px arial;
}

#comment {
	background:#ffffff;
	width:500px;
	border:1px solid #606060;
}
#commentform input{
	border:1px solid #606060;
	background:#ffffff;
}
#commentform #submit{
	border:1px solid #303030;
	border-style:outset;
	background:#cccccc;
	color:#6672B3;
}
#content .post .comments {
	font: 11px Arial;
	color: #969696;
	width: 550px;
}
#content .post .comments ol {
	margin: 10px;
	padding-left: 25px;
}
#content .post .comments ol li {
	padding: 5px;
}

#content .post .comments ol li a {
	color: #6672B3;
	text-decoration: none;
}

#content .post .comments ol li a:hover {
	text-decoration: underline;
}

#content .post .comments ol li.alt {
	background: #eeeeee;
}

#content .post .comments ol li cite {
	color: #606060;
	font-style: normal;
	font-weight: bold;
}

#content .post .comments ol li cite a {
	color: #606060;
	text-decoration: none;
}

#content .post .comments ol li cite a:hover {
	text-decoration: underline;
}

#content .post .comments ol li .commentmetadata a {
	color: #aaaaaa;
	text-decoration: none;
}

#content .post .comments ol li .commentmetadata a:hover {
	text-decoration: underline;
}

#content .post #commentform {

	font: 11px Arial;
	color: #303030;
	width: 548px;
	padding-left: 25px;
	margin: 0;
}

#content .post #commentform a {
	color: #6672B3;
	text-decoration: none;
}

#content .post #commentform a:hover {
	text-decoration: underline;
}

/*------JB-------*/		
/*   About Box   */
/*---------------*/
	
#about_box {
	float: left;
	width: 345px;
	margin-left:13px;
	padding:0 10px 0 10px;
	height:270px;
	margin-top:0px;
	text-align:justify;
	font:12px arial;
	color:#a3a3a3;
	overflow:hidden;
	background: url("images/box_about.gif") no-repeat top left;
}

#about_box h3 {
	margin:5px 0px;
	color:#CCCCCC;
	font:bold 14px arial;
	padding:0;
}

#about_box img{
float:right;
padding:0px;
margin:25px 0 0 10px;
border:0px solid #999999;
}

#about_box a{
color:#6672B3;
text-decoration:none;
}
/*------JB-------*/		
/*  Top Advert   */
/*---------------*/
	
.topads {
	position:absolute;
	width: 975px;
	top:250px;
	left:25px;
	padding:0;
	height:200px;
}

.topads_ad {
	margin:0 7px 10px 0px;
	float:left;
	padding:0;
	border:1px solid #666666;
}

/*------JB-------*/		
/*  Ads Spaces   */
/*---------------*/
	
.rightads {
	float: left;
	width: 180px;
	margin-left:0px;
	margin-bottom: 10px;
	margin-top:-10px;
	padding:0;
}
.rightads_container{
padding-left:20px;
}
.rightads_ad {
	margin:0 0 10px 0px;
	padding:0;
}


/*------JB-------*/		
/*   Side bar    */
/*---------------*/
	
#sidebar {
	float: right;
	width: 185px;
	font: 11px Arial;
	color: #7D7D7D;
	margin-top:-10px;
}
	
.sidebar_container {
	width: 185px;
	margin-bottom: 20px;
}

#sidebar h2 {
	width: 175px;
	height: 32px;
	padding-left: 7px;
	padding-top:7px;
	margin-bottom: 2px;
	font: bold 14px tahoma;
	color: #333333;
	font-variant:small-caps;
	background: url("images/sidebar_title.gif") no-repeat top left;
}

#sidebar a {
	color: #7D7D7D;
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

#sidebar ul {
	margin: 0;
	padding: 0 5px;
	list-style-type: none;
}

#sidebar ul li {
	color: #656565;
	font: 12px Arial;
	border-bottom:1px dashed #cccccc;
}

#sidebar ul li a {
	color: #6672B3;
	text-decoration: none;
	padding: 5px 5px 5px 8px;
	height:15px;
	margin:0;
	display: block;
}

#sidebar ul li a:hover {
	text-decoration: none;
	background:#fefefe;	
	height:15px;
}


#sidebar ul li ul {
	margin: 0;
	padding: 0;
	background: none;
}

#sidebar #searchform {
	margin: 0;
	padding: 10px 0;
	width: 172px;
	text-align: center;
}

#sidebar #searchform #s {
	width: 130px;
}

#sidebar #calendar_wrap {
	width: 130px;
	margin: 0 auto;
	padding-top: 5px;
	padding-left:0;
}

#sidebar #calendar_wrap table {
	width: 130px;
}
#sidebar #calendar_wrap a {
	color:#6672B3;
}
#sidebar #calendar_wrap caption {
	margin: 0 auto;
	font-weight: bold;
}

#sidebar #calendar_wrap tbody {
	text-align: right;
}

#sidebar #calendar_wrap tfoot #next {
	text-align: right;
}

#sidebar #calendar_wrap #today {
	font-weight: bold;
}

#sidebar .textwidget {
	padding: 0 5px;
}

.sidebar_bottom {
	margin: 0px;
	padding: 0px;
	clear:both;
	height: 1px;
	width: 180px;
	display:block;
	position:relative;
}

/*------JB-------*/		
/*  Recent Data  */
/*---------------*/
	
#recent_data {
	width: 935px;
	margin-bottom: 15px;
}

#recent_data_top {
	width: 933px;
}

#recent_data_bottom {
	width: 923px;
	padding: 0 0 20px 10px;
	overflow: hidden;
}


.recent_data_container {
	width: 190px;
	float: left;
	padding-left:5px;
}

.recent_data_container h3 {
	color: #6672B3;
	padding: 6px;
	height:20px;
	font: bold 14px arial;
	background: url("images/top_side_left.gif") repeat-x top;
}

.recent_data_container ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.recent_data_container ul li {
	font:12px tahoma;
	text-align:left;
	border-bottom: 1px dotted #ffffff;
}

.recent_data_container ul li a {
	color: #6672B3;
	text-decoration: none;
	display: block;
	padding: 4px;
}

.recent_data_container ul li a:hover {
	text-decoration: none;
	background-color:#dedede;
}

.recent_data_container ul li a span {
	color: #222222;
	font: 10px Arial;
	display: block;
	margin-bottom: 4px;
}

.recent_data_container ul li ul {
	display: none;
}

.recent_data_middle {
	width: 320px;
	margin-top: 8px;
	padding: 0 23px;
	overflow: hidden;
	float: left;
}

/*------JB-------*/		
/*  Navigations  */
/*---------------*/

.navigation {
	font: 12px Arial;
	color: #6672B3;
	width: 530px;
	margin-left:10px;
}

.navigation a {
	color: #6672B3;
	text-decoration: none;
}

.navigation a:hover {
	text-decoration: underline;
}

.navigation-p {
	float: left;
}
	
.navigation-n {
	float: right;
}

/*------JB-------*/		
/*  Footer Links */
/*---------------*/

#footer {
	width: 934px;
	height: 60px;
	padding: 0;
	color: #999999;
	padding-top:30px;
	text-align:center;
	font: 11px Arial;
	clear:both;
}

#footer a {
	color: #FDFD8F;
	text-decoration: none;
}

#footer a:hover {

	text-decoration: none;
}




Et le fichier page.php à partir duquel j'ai créé une page nommée page2.php.
J'imagine que c'est plus simple de repartir de là plutôt que de mes bidouilles... 


<?php get_header(); ?>
		<div id="content">
			<?php if (have_posts()) : ?>
			<?php while (have_posts()) : the_post(); ?>
			<div class="post" id="post-<?php the_ID(); ?>">
				<div class="post-top">
					<h2><?php the_title(); ?></h2>
				</div>
				<div class="post-entry">
					<?php the_content('Read <span>more...</span>'); ?>
					<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
				</div>
				<div class="post-bottom"></div>
			</div>
			<?php endwhile; ?>
			<?php else : ?>
			<div class="post">
				<div class="post-top">
					<h2>Not Found</h2>
				</div>
				<div class="post-entry">
					<p>Sorry, but you are looking for something that isn't here.</p>
				</div>
				<div class="post-bottom"></div>
			</div>
			<?php endif; ?>
		
		</div>
<?php include (TEMPLATEPATH . '/rightads.php'); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>



Si tu as besoin d'autres fichiers, je peux te les fournir bien entendu!
Encore merci de ton aide.
0
Réponse 6 / 6
dwade74 Messages postés 120 Date d'inscription samedi 28 mai 2011 Statut Membre Dernière intervention 25 janvier 2014 32
Modifié par dwade74 le 27/07/2013 à 13:19
Bonjour

Pour créer une page vous devez mettre
<?php
/**
* Template Name: Page d'accueil sans sidebar
*/
?>

et enlever le <?php get_sidebar(); ?>

donc voila a quoi ressemble votre page 

<?php
/**
 * Template Name: Page d'accueil sans sidebar
 */
?>
<?php get_header(); ?>
  <div id="content_home">
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   <div class="post" id="post-<?php the_ID(); ?>">
    <div class="post-top">
     <h2><?php the_title(); ?></h2>
    </div>
    <div class="post-entry">
     <?php the_content('Read <span>more...</span>'); ?>
     <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
    </div>
    <div class="post-bottom"></div>
   </div>
   <?php endwhile; ?>
   <?php else : ?>
   <div class="post">
    <div class="post-top">
     <h2>Not Found</h2>
    </div>
    <div class="post-entry">
     <p>Sorry, but you are looking for something that isn't here.</p>
    </div>
    <div class="post-bottom"></div>
   </div>
   <?php endif; ?>
  
  </div>
<?php include (TEMPLATEPATH . '/rightads.php'); ?>
<?php get_footer(); ?>

maintenant le css

le "wrap" = 1004px ça doit être l ensemble de la page
le "content" = 560px ça doit être le contenu de la page
la "sidebar" = 185px

Vous pouvez essayer 

#content_home{
       width="1004px"
 overflow: hidden;
}
0