refactoring and a lot of new design

sites/all/themes/figureslibres/clameurs/css/dist/styles.css

@@ -29,28 +29,10 @@ input {
   font-size: 0.8em; }
 
 /** layout */
-#center, #sidebar-first, #sidebar-second, .footer-block .region, .header-block {
+.footer-block .region, .header-block {
   display: inline-block;
   vertical-align: top; }
 
-body.two-sidebars #center {
-  width: 54%; }
-
-body.sidebar-first #center {
-  width: 73%; }
-
-body.sidebar-second #center {
-  width: 80%; }
-
-body.no-sidebars #center {
-  width: 100%; }
-
-#sidebar-first {
-  width: 24%; }
-
-#sidebar-second {
-  width: 18%; }
-
 #header, #main, #footer {
   padding: 0; }
 
@@ -73,9 +55,6 @@ body.no-sidebars #center {
   text-align: center;
   color: #20c498; }
 
-#node-63 {
-  color: #1f04a1; }
-
 #thematique-anchor-links {
   padding: 1em 0; }
   #thematique-anchor-links ul {
@@ -89,55 +68,221 @@ body.no-sidebars #center {
     margin: 0; }
     #thematique-anchor-links ul li {
       list-style: none;
-      padding: 0;
+      padding: 0 1em;
       margin: 0; }
       #thematique-anchor-links ul li a {
-        color: #1f04a1;
         text-decoration: none;
         font-weight: 600; }
-
-.panel-thematique {
+        #thematique-anchor-links ul li a span {
+          display: block; }
+        #thematique-anchor-links ul li a.en_attente {
+          color: #ddd; }
+        #thematique-anchor-links ul li a.node-32 {
+          color: #2f82ff; }
+        #thematique-anchor-links ul li a.node-14 {
+          color: #ff0000; }
+        #thematique-anchor-links ul li a.node-38 {
+          color: #88aa00; }
+        #thematique-anchor-links ul li a.node-3 {
+          color: #ff6600; }
+        #thematique-anchor-links ul li a.node-20 {
+          color: #ff2ad4; }
+        #thematique-anchor-links ul li a.node-26 {
+          color: #8800aa; }
+
+.node-thematique {
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat; }
-  .panel-thematique .field-name-field-emvideo img {
-    width: 100%; }
-  .panel-thematique header.top h2 {
-    font-size: 2.5em;
-    font-weight: 300;
-    color: #fb3f08; }
-  .panel-thematique .left .field-name-body {
-    display: none; }
-  .panel-thematique .bottom .field-name-field-episodes > .field-items {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-flow: row nowrap;
-    flex-flow: row nowrap;
-    -ms-flex-pack: justify;
-    justify-content: space-between; }
-    .panel-thematique .bottom .field-name-field-episodes > .field-items > .field-item {
-      display: block;
-      width: 19%; }
-  .panel-thematique .bottom .field-name-body {
-    display: none; }
-
-#mini-panel-th_matique {
-  background-image: url(../../images/fond-theme-0.png); }
-
-#mini-panel-th_matique-1 {
-  background-image: url(../../images/fond-theme-0.png); }
-
-#mini-panel-th_matique-2 {
-  background-image: url(../../images/fond-theme-0.png); }
-
-#mini-panel-th_matique-3 {
-  background-image: url(../../images/fond-theme-0.png); }
-
-#mini-panel-th_matique-4 {
-  background-image: url(../../images/fond-theme-0.png); }
-
-#mini-panel-th_matique-5 {
-  background-image: url(../../images/fond-theme-0.png); }
+  .node-thematique.node-32 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-32 > h2,
+    .node-thematique.node-32 .group-video .field-name-field-description h3,
+    .node-thematique.node-32 .group-description .field-name-field-ecouter,
+    .node-thematique.node-32 .node-documentair .field-name-field-doc,
+    .node-thematique.node-32 .node-episode .field-name-title-field {
+      color: #2f82ff; }
+  .node-thematique.node-14 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-14 > h2,
+    .node-thematique.node-14 .group-video .field-name-field-description h3,
+    .node-thematique.node-14 .group-description .field-name-field-ecouter,
+    .node-thematique.node-14 .node-documentair .field-name-field-doc,
+    .node-thematique.node-14 .node-episode .field-name-title-field {
+      color: #ff0000; }
+  .node-thematique.node-38 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-38 > h2,
+    .node-thematique.node-38 .group-video .field-name-field-description h3,
+    .node-thematique.node-38 .group-description .field-name-field-ecouter,
+    .node-thematique.node-38 .node-documentair .field-name-field-doc,
+    .node-thematique.node-38 .node-episode .field-name-title-field {
+      color: #88aa00; }
+  .node-thematique.node-3 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-3 > h2,
+    .node-thematique.node-3 .group-video .field-name-field-description h3,
+    .node-thematique.node-3 .group-description .field-name-field-ecouter,
+    .node-thematique.node-3 .node-documentair .field-name-field-doc,
+    .node-thematique.node-3 .node-episode .field-name-title-field {
+      color: #ff6600; }
+  .node-thematique.node-20 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-20 > h2,
+    .node-thematique.node-20 .group-video .field-name-field-description h3,
+    .node-thematique.node-20 .group-description .field-name-field-ecouter,
+    .node-thematique.node-20 .node-documentair .field-name-field-doc,
+    .node-thematique.node-20 .node-episode .field-name-title-field {
+      color: #ff2ad4; }
+  .node-thematique.node-26 {
+    background-image: url(../../images/fond-theme-0.png); }
+    .node-thematique.node-26 > h2,
+    .node-thematique.node-26 .group-video .field-name-field-description h3,
+    .node-thematique.node-26 .group-description .field-name-field-ecouter,
+    .node-thematique.node-26 .node-documentair .field-name-field-doc,
+    .node-thematique.node-26 .node-episode .field-name-title-field {
+      color: #8800aa; }
+  .node-thematique > h2 {
+    font-size: 3em;
+    font-weight: 400; }
+  .node-thematique .content {
+    letter-spacing: -0.25em; }
+    .node-thematique .content .field-name-field-emvideo img {
+      width: 100%; }
+    .node-thematique .content > * {
+      letter-spacing: normal; }
+    .node-thematique .content article.main {
+      display: inline-block;
+      vertical-align: top;
+      width: 69.5%; }
+      .node-thematique .content article.main .field-name-body {
+        position: relative;
+        z-index: 3; }
+        .node-thematique .content article.main .field-name-body > * {
+          padding: 0 1em 0 0.2em; }
+        .node-thematique .content article.main .field-name-body .summary {
+          position: relative; }
+          .node-thematique .content article.main .field-name-body .summary p {
+            font-size: 1.3em; }
+        .node-thematique .content article.main .field-name-body .value {
+          position: absolute;
+          height: 0;
+          margin-bottom: 0;
+          transition: height,margin-bottom 0.5s ease-in-out;
+          background-color: #fff;
+          overflow: hidden; }
+        .node-thematique .content article.main .field-name-body:hover .summary {
+          background-color: #fff; }
+        .node-thematique .content article.main .field-name-body:hover .value {
+          height: 400px;
+          margin-bottom: 1em; }
+        .node-thematique .content article.main .field-name-body p {
+          padding: 0 0 1em;
+          margin: 0; }
+      .node-thematique .content article.main .group-video {
+        position: relative; }
+        .node-thematique .content article.main .group-video .group-description {
+          cursor: pointer;
+          box-sizing: border-box;
+          position: absolute;
+          z-index: 2;
+          top: 0;
+          left: 0;
+          width: 90%;
+          height: 80%;
+          margin: 5%;
+          padding: 5%;
+          background-color: rgba(255, 255, 255, 0);
+          transition: background-color 0.3s ease-in-out; }
+          .node-thematique .content article.main .group-video .group-description .field-name-field-ecouter {
+            font-size: 1em;
+            font-weight: 500;
+            background-color: rgba(255, 255, 255, 0.9);
+            transition: background-color 0.3s ease-in-out;
+            display: inline-block; }
+          .node-thematique .content article.main .group-video .group-description .field-name-field-description {
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out; }
+            .node-thematique .content article.main .group-video .group-description .field-name-field-description h3 {
+              font-weight: 500;
+              font-size: 2em; }
+        .node-thematique .content article.main .group-video:hover .group-description {
+          background-color: rgba(255, 255, 255, 0.9); }
+          .node-thematique .content article.main .group-video:hover .group-description .field-name-field-ecouter {
+            background-color: rgba(255, 255, 255, 0); }
+          .node-thematique .content article.main .group-video:hover .group-description .field-name-field-description {
+            opacity: 1; }
+    .node-thematique .content aside.right {
+      display: inline-block;
+      vertical-align: top;
+      width: 30.5%; }
+      .node-thematique .content aside.right .field-name-field-eclairages {
+        padding-left: 1em; }
+      .node-thematique .content aside.right .node-documentair {
+        padding-bottom: 1em; }
+        .node-thematique .content aside.right .node-documentair .content {
+          position: relative; }
+          .node-thematique .content aside.right .node-documentair .content .group-txt {
+            cursor: pointer;
+            box-sizing: border-box;
+            position: absolute;
+            z-index: 2;
+            overflow: hidden;
+            top: 0;
+            left: 0;
+            width: 90%;
+            max-height: 80%;
+            margin: 5%;
+            padding: 5%;
+            background-color: rgba(255, 255, 255, 0.9); }
+            .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
+              font-size: 1em;
+              font-weight: 500; }
+            .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
+              font-size: 2em;
+              font-weight: 600;
+              height: 1px;
+              overflow: hidden;
+              transition: height 0.3s ease-in-out; }
+          .node-thematique .content aside.right .node-documentair .content:hover .group-txt .field-name-title-field {
+            height: 70%; }
+    .node-thematique .content aside.bottom {
+      padding-top: 1em; }
+      .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
+        display: -ms-flexbox;
+        display: flex;
+        -ms-flex-flow: row nowrap;
+        flex-flow: row nowrap;
+        -ms-flex-pack: justify;
+        justify-content: space-between; }
+        .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
+          display: block;
+          width: 19%; }
+          .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
+            position: relative; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
+              cursor: pointer;
+              box-sizing: border-box;
+              position: absolute;
+              z-index: 2;
+              overflow: hidden;
+              top: 0;
+              left: 0;
+              width: 90%;
+              height: 80%;
+              margin: 5%;
+              padding: 5%;
+              background-color: rgba(255, 255, 255, 0.3);
+              opacity: 0.8;
+              transition: opacity,background-color 0.3s ease-in-out; }
+              .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt .field-name-title-field {
+                font-size: 4em;
+                font-weight: 700;
+                font-style: italic;
+                text-align: center; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content:hover .group-txt {
+              opacity: 1;
+              background-color: rgba(255, 255, 255, 0.9); }
 
 #footer-bottom {
   text-align: center; }

sites/all/themes/figureslibres/clameurs/css/styles.scss

@@ -28,19 +28,20 @@ input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;}
 // / /__/ /_/ / / /_/ / /  (__  )
 // \___/\____/_/\____/_/  /____/
 $vert 	: #20c498;
-$bleu 	: #1f04a1;
-$rouge	: #fb3f08;
+// $bleu 	: #1f04a1;
+// $rouge	: #fb3f08;
+
+$coul0	: #2f82ff;
+$coul1	: #ff0000;
+$coul2	: #88aa00;
+$coul3	: #ff6600;
+$coul4	: #ff2ad4;
+$coul5	: #8800aa;
 
-/** layout */
-#center, #sidebar-first, #sidebar-second, .footer-block .region, .header-block{ display:inline-block; vertical-align: top;}
 
-body.two-sidebars #center { width: 54%; }
-body.sidebar-first #center { width: 73%; }
-body.sidebar-second #center { width: 80%; }
-body.no-sidebars #center { width: 100%; }
 
-#sidebar-first { width: 24%; }
-#sidebar-second { width: 18%; }
+/** layout */
+.footer-block .region, .header-block{ display:inline-block; vertical-align: top;}
 
 #header, #main, #footer{ padding:0; }
 
@@ -72,7 +73,7 @@ body{
 
 // about
 #node-63{
-	color:$bleu;
+	// color:$bleu;
 }
 
 #thematique-anchor-links{
@@ -84,11 +85,36 @@ body{
 		padding:0; margin:0;
 		li{
 			list-style: none;
-			padding:0; margin: 0;
+			padding:0 1em; margin: 0;
 			a{
-				color: $bleu;
+				// color: $bleu;
 				text-decoration: none;
 				font-weight: 600;
+				span{
+					display: block;
+				}
+				&.en_attente{
+					// opacity: 0.4;
+					color:#ddd;
+				}
+				&.node-32{
+					color:$coul0;
+				}
+				&.node-14{
+					color:$coul1;
+				}
+				&.node-38{
+					color:$coul2;
+				}
+				&.node-3{
+					color:$coul3;
+				}
+				&.node-20{
+					color:$coul4;
+				}
+				&.node-26{
+					color:$coul5;
+				}
 			}
 		}
 	}
@@ -96,66 +122,241 @@ body{
 }
 
 // thematique
-.panel-thematique{
+.node-thematique{
 
 	background-position: center;
 	background-size: contain;
 	background-repeat: no-repeat;
 
-	.field-name-field-emvideo img{
-		width: 100%;
+
+	&.node-32{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul0;}
 	}
-	header.top h2{
-		font-size: 2.5em;
-		font-weight: 300;
-		color: $rouge;
+	&.node-14{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul1;}
 	}
-	.right{
+	&.node-38{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul2;}
 	}
-	.left{
-		.field-name-body{
-			display:none;
-		}
+	&.node-3{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul3;}
 	}
-	.bottom{
-		.field-name-field-episodes{
-			// letter-spacing: -0.25em;
-			&>.field-items{
-		    display: flex;
-		    flex-flow: row nowrap;
-		    justify-content: space-between;
-				&>.field-item{
-					display: block;
-					// letter-spacing: normal;
-					// display: inline-block;
-					width:19%;
-					// padding-right:1%;
+	&.node-20{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul4;}
+	}
+	&.node-26{
+		background-image: url(../../images/fond-theme-0.png);
+		>h2,
+		.group-video .field-name-field-description h3,
+		.group-description .field-name-field-ecouter,
+		.node-documentair .field-name-field-doc,
+		.node-episode .field-name-title-field{color: $coul5;}
+	}
+
+	>h2{
+		font-size: 3em;
+		font-weight: 400;
+	}
+
+	.content{
+		.field-name-field-emvideo img{width: 100%;}
+
+		letter-spacing: -0.25em;
+		>*{letter-spacing: normal;}
+
+		$main_w 	: 69.5%;
+		$right_w	: 30.5%;
+		$gouttiere: 1em;
+
+		//                     _
+		//    ____ ___  ____ _(_)___
+		//   / __ `__ \/ __ `/ / __ \
+		//  / / / / / / /_/ / / / / /
+		// /_/ /_/ /_/\__,_/_/_/ /_/
+		article.main{
+			display: inline-block;
+			vertical-align: top;
+			width:$main_w;
+			.field-name-body{
+				position: relative; z-index: 3;
+				>*{padding:0 1em 0 0.2em;}
+				.summary{
+					position: relative;
+					p{
+						font-size: 1.3em;
+					}
+				}
+				.value{
+					position:absolute;
+					height:0; margin-bottom: 0;
+					transition:height,margin-bottom 0.5s ease-in-out;
+					background-color: #fff;
+					overflow: hidden;
+				}
+				&:hover{
+					.summary{background-color: #fff;}
+					.value{
+						height:400px; margin-bottom: 1em;
+					}
+				}
+				p{padding:0 0 1em; margin: 0;}
+			} //field-name-body
+			.group-video{
+				position: relative;
+				.group-description{
+					cursor: pointer;
+					box-sizing: border-box;
+					position:absolute; z-index: 2;
+					top:0; left: 0;
+					width:90%;
+					height:80%;
+					margin:5%;
+					padding:5%;
+					background-color: rgba(255,255,255,0);
+					transition: background-color 0.3s ease-in-out;
+					.field-name-field-ecouter{
+						font-size: 1em;
+						font-weight: 500;
+						background-color: rgba(255,255,255,0.9);
+						transition: background-color 0.3s ease-in-out;
+						display: inline-block;
+					}
+					.field-name-field-description{
+						opacity: 0;
+						transition: opacity 0.3s ease-in-out;
+						h3{
+							font-weight: 500; font-size: 2em
+						}
+					}
+				}
+				&:hover .group-description{
+					background-color: rgba(255,255,255,0.9);
+					.field-name-field-ecouter{
+						background-color: rgba(255,255,255,0);
+					}
+					.field-name-field-description{opacity:1;}
 				}
 			}
 		}
-		.field-name-body{
-			display:none;
+
+		//        __
+		//   ____/ /___  __________
+		//  / __  / __ \/ ___/ ___/
+		// / /_/ / /_/ / /__(__  )
+		// \__,_/\____/\___/____/
+		aside.right{
+			display: inline-block;
+			vertical-align: top;
+			width: $right_w;
+			.field-name-field-eclairages{
+				padding-left:1em;
+			}
+			.node-documentair{
+				padding-bottom: $gouttiere;
+				.content{
+					position: relative;
+					.group-txt{
+						cursor: pointer;
+						box-sizing: border-box;
+						position:absolute; z-index: 2; overflow: hidden;
+						top:0; left:0; width:90%; max-height:80%;
+						margin:5%; padding:5%;
+						background-color: rgba(255, 255, 255, 0.9);
+						// opacity: 0;
+						.field-name-field-doc{
+							font-size: 1em;
+							font-weight: 500;
+						}
+						.field-name-title-field{
+							font-size: 2em;
+							font-weight: 600;
+							height:1px; overflow: hidden;
+							transition:height 0.3s ease-in-out;
+						}
+					}
+					&:hover .group-txt .field-name-title-field{height:70%;}
+				}
+			}
+		}
+
+		//               _                __
+		//   ___  ____  (_)________  ____/ /__  _____
+		//  / _ \/ __ \/ / ___/ __ \/ __  / _ \/ ___/
+		// /  __/ /_/ / (__  ) /_/ / /_/ /  __(__  )
+		// \___/ .___/_/____/\____/\__,_/\___/____/
+		//    /_/
+		aside.bottom{
+			padding-top: $gouttiere;
+			.field-name-field-episodes{
+				// letter-spacing: -0.25em;
+				&>.field-items{
+			    display: flex;
+			    flex-flow: row nowrap;
+			    justify-content: space-between;
+					&>.field-item{
+						display: block;
+						// letter-spacing: normal;
+						// display: inline-block;
+						width:19%;
+						// padding-right:1%;
+
+						.node-episode .content{
+							position: relative;
+							.group-txt{
+								cursor: pointer;
+								box-sizing: border-box;
+								position:absolute; z-index: 2; overflow: hidden;
+								top:0; left:0; width:90%; height:80%;
+								margin:5%; padding:5%;
+								background-color: rgba(255, 255, 255, 0.3);
+								opacity: 0.8;
+								transition:opacity,background-color 0.3s ease-in-out;
+								.field-name-title-field{
+									font-size: 4em;
+									font-weight: 700;
+									font-style: italic;
+									text-align: center;
+								}
+							}
+							&:hover .group-txt{
+								opacity: 1;
+								background-color: rgba(255, 255, 255, 0.9);
+							}
+						}
+					}
+				}
+			}
+			.field-name-body{
+				// display:none;
+			}
 		}
 	}
 }
-#mini-panel-th_matique{
-	background-image: url(../../images/fond-theme-0.png);
-}
-#mini-panel-th_matique-1{
-	background-image: url(../../images/fond-theme-0.png);
-}
-#mini-panel-th_matique-2{
-	background-image: url(../../images/fond-theme-0.png);
-}
-#mini-panel-th_matique-3{
-	background-image: url(../../images/fond-theme-0.png);
-}
-#mini-panel-th_matique-4{
-	background-image: url(../../images/fond-theme-0.png);
-}
-#mini-panel-th_matique-5{
-	background-image: url(../../images/fond-theme-0.png);
-}
 
 
 #footer{

sites/all/themes/figureslibres/clameurs/preprocess/field.pre.php

@@ -1,8 +1,33 @@
-<?php 
+<?php
 
-//dsm($vars);
+// dsm($vars);
+$element = $vars['element'];
+$vm = $element['#view_mode'];
+$ft = $element['#field_type'];
+$fn = $element['#field_name'];
+$b  = $element['#bundle'];
 
-$vars['theme_hook_suggestions'][] = 'field__' . $vars['element']['#view_mode'];
-$vars['theme_hook_suggestions'][] = 'field__' . $vars['element']['#field_type'] . '__' . $vars['element']['#view_mode'];
-$vars['theme_hook_suggestions'][] = 'field__' . $vars['element']['#field_name'] . '__' . $vars['element']['#view_mode'];
 
+$vars['theme_hook_suggestions'][] = 'field__' . $vm;
+$vars['theme_hook_suggestions'][] = 'field__' . $ft . '__' . $vm;
+$vars['theme_hook_suggestions'][] = 'field__' . $fn . '__' . $vm;
+$vars['theme_hook_suggestions'][] = 'field__' . $fn . '__' . $vm;
+$vars['theme_hook_suggestions'][] = 'field__' . $b . '__' . $fn . '__' . $vm;
+
+
+if($fn == 'body' && $vm == 'accueil' && $b == 'thematique'){
+  $vars['items'][0] = array(
+    'summary' =>array(
+      "#type"=>"markup",
+      "#markup"=>$element['#items'][0]['safe_summary'],
+      "#prefix"=>"<div class='summary'>",
+      "#suffix"=>"</div>",
+    ),
+    'value' =>array(
+      "#type"=>"markup",
+      "#markup"=>$element['#items'][0]['safe_value'],
+      "#prefix"=>"<div class='value'>",
+      "#suffix"=>"</div>",
+    )
+  );
+}

sites/all/themes/figureslibres/clameurs/preprocess/node.pre.php

@@ -1,7 +1,25 @@
-<?php 
+<?php
+
+// dsm($vars);
+$node = $vars['node'];
 
-//dsm($vars);
 
 $vars['theme_hook_suggestions'][] = 'node__'.$vars['view_mode'];
 $vars['theme_hook_suggestions'][] = 'node__' . $vars['type'] . '__' . $vars['view_mode'];
 
+$vars['print_title'] = true;
+
+$alias = drupal_get_path_alias('node/'.$vars['node']->nid);
+
+if($node->type == "thematique"){
+  $vars['id'] =  $alias;
+}else{
+  $vars["classes_array"][] = $alias;
+  $vars['id'] =  "node-".$node->nid;
+
+  if($vars['view_mode'] == "accueil"){
+    $vars['print_title'] = false;
+  }
+}
+
+$vars["classes_array"][] = "node-".$node->nid;

sites/all/themes/figureslibres/clameurs/preprocess/panels-clameur.pre.php

@@ -2,10 +2,10 @@
 
   // dsm($vars, 'vars');
 
-  $display = $vars['display'];
-  $node_ctx = $display->context['requiredcontext_entity:node_1'];
+  // $display = $vars['display'];
+  // $node_ctx = $display->context['requiredcontext_entity:node_1'];
   // dsm($node_ctx, 'node_ctx');
 
   // change css id with node alias to be able to link it with anchors on top menu
-  $vars['css_id'] = drupal_get_path_alias('node/'.$node_ctx->data->nid);
+  // $vars['css_id'] = drupal_get_path_alias('node/'.$node_ctx->data->nid);
   // dsm($vars['css_id'], 'css_id');

sites/all/themes/figureslibres/clameurs/templates/field--thematique--body--accueil.tpl.php

@@ -0,0 +1,49 @@
+<?php
+
+/**
+ * @file field.tpl.php
+ * Default template implementation to display the value of a field.
+ *
+ * This file is not used and is here as a starting point for customization only.
+ * @see theme_field()
+ *
+ * Available variables:
+ * - $items: An array of field values. Use render() to output them.
+ * - $label: The item label.
+ * - $label_hidden: Whether the label display is set to 'hidden'.
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the
+ *   following:
+ *   - field: The current template type, i.e., "theming hook".
+ *   - field-name-[field_name]: The current field name. For example, if the
+ *     field name is "field_description" it would result in
+ *     "field-name-field-description".
+ *   - field-type-[field_type]: The current field type. For example, if the
+ *     field type is "text" it would result in "field-type-text".
+ *   - field-label-[label_display]: The current label position. For example, if
+ *     the label position is "above" it would result in "field-label-above".
+ *
+ * Other variables:
+ * - $element['#object']: The entity to which the field is attached.
+ * - $element['#view_mode']: View mode, e.g. 'full', 'teaser'...
+ * - $element['#field_name']: The field name.
+ * - $element['#field_type']: The field type.
+ * - $element['#field_language']: The field language.
+ * - $element['#field_translatable']: Whether the field is translatable or not.
+ * - $element['#label_display']: Position of label display, inline, above, or
+ *   hidden.
+ * - $field_name_css: The css-compatible field name.
+ * - $field_type_css: The css-compatible field type.
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ *
+ * @see template_preprocess_field()
+ * @see theme_field()
+ */
+?>
+<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
+  <?php if(count($items)): ?>
+    <?php print render($items[0]); ?>
+  <?php endif; ?>
+</section>

sites/all/themes/figureslibres/clameurs/templates/field.tpl.php

@@ -46,9 +46,13 @@
   <?php if (!$label_hidden): ?>
     <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
   <?php endif; ?>
+  <?php if(count($items) > 1): ?>
   <div class="field-items"<?php print $content_attributes; ?>>
     <?php foreach ($items as $delta => $item): ?>
       <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><?php print render($item); ?></div>
     <?php endforeach; ?>
   </div>
+  <?php elseif(count($items)): ?>
+    <?php print render($items[0]); ?>
+  <?php endif; ?>
 </section>

sites/all/themes/figureslibres/clameurs/templates/node.tpl.php

@@ -0,0 +1,99 @@
+<?php
+
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - $title: the (sanitized) title of the node.
+ * - $content: An array of node items. Use render($content) to print them all,
+ *   or print a subset such as render($content['field_example']). Use
+ *   hide($content['field_example']) to temporarily suppress the printing of a
+ *   given element.
+ * - $user_picture: The node author's picture from user-picture.tpl.php.
+ * - $date: Formatted creation date. Preprocess functions can reformat it by
+ *   calling format_date() with the desired parameters on the $created variable.
+ * - $name: Themed username of node author output from theme_username().
+ * - $node_url: Direct URL of the current node.
+ * - $display_submitted: Whether submission information should be displayed.
+ * - $submitted: Submission information created from $name and $date during
+ *   template_preprocess_node().
+ * - $classes: String of classes that can be used to style contextually through
+ *   CSS. It can be manipulated through the variable $classes_array from
+ *   preprocess functions. The default values can be one or more of the
+ *   following:
+ *   - node: The current template type; for example, "theming hook".
+ *   - node-[type]: The current node type. For example, if the node is a
+ *     "Blog entry" it would result in "node-blog". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node-teaser: Nodes in teaser form.
+ *   - node-preview: Nodes in preview mode.
+ *   The following are controlled through the node publishing options.
+ *   - node-promoted: Nodes promoted to the front page.
+ *   - node-sticky: Nodes ordered above other non-sticky nodes in teaser
+ *     listings.
+ *   - node-unpublished: Unpublished nodes visible only to administrators.
+ * - $title_prefix (array): An array containing additional output populated by
+ *   modules, intended to be displayed in front of the main title tag that
+ *   appears in the template.
+ * - $title_suffix (array): An array containing additional output populated by
+ *   modules, intended to be displayed after the main title tag that appears in
+ *   the template.
+ *
+ * Other variables:
+ * - $node: Full node object. Contains data that may not be safe.
+ * - $type: Node type; for example, story, page, blog, etc.
+ * - $comment_count: Number of comments attached to the node.
+ * - $uid: User ID of the node author.
+ * - $created: Time the node was published formatted in Unix timestamp.
+ * - $classes_array: Array of html class attribute values. It is flattened
+ *   into a string within the variable $classes.
+ * - $zebra: Outputs either "even" or "odd". Useful for zebra striping in
+ *   teaser listings.
+ * - $id: Position of the node. Increments each time it's output.
+ *
+ * Node status variables:
+ * - $view_mode: View mode; for example, "full", "teaser".
+ * - $teaser: Flag for the teaser state (shortcut for $view_mode == 'teaser').
+ * - $page: Flag for the full page state.
+ * - $promote: Flag for front page promotion state.
+ * - $sticky: Flags for sticky post setting.
+ * - $status: Flag for published status.
+ * - $comment: State of comment settings for the node.
+ * - $readmore: Flags true if the teaser content of the node cannot hold the
+ *   main body content.
+ * - $is_front: Flags true when presented in the front page.
+ * - $logged_in: Flags true when the current user is a logged-in member.
+ * - $is_admin: Flags true when the current user is an administrator.
+ *
+ * Field variables: for each field instance attached to the node a corresponding
+ * variable is defined; for example, $node->body becomes $body. When needing to
+ * access a field's raw values, developers/themers are strongly encouraged to
+ * use these variables. Otherwise they will have to explicitly specify the
+ * desired field language; for example, $node->body['en'], thus overriding any
+ * language negotiation rule that was previously applied.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_node()
+ * @see template_process()
+ *
+ * @ingroup themeable
+ */
+?>
+<div id="<?php print $id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
+
+  <?php print $user_picture; ?>
+
+  <?php if ($print_title): ?>
+      <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
+  <?php endif; ?>
+
+  <div class="content"<?php print $content_attributes; ?>>
+    <?php
+      // We hide the comments and links now so that we can render them later.
+      hide($content['comments']);
+      hide($content['links']);
+      print render($content);
+    ?>
+  </div>
+</div>

sites/all/themes/figureslibres/clameurs/templates/page.tpl.php

@@ -98,62 +98,31 @@
 
 
 <div id="main">
+	<?php if ($primary_local_tasks || $secondary_local_tasks || $action_links): ?>
+    <div id="tasks">
+      <?php if ($primary_local_tasks): ?>
+        <ul class="tabs primary"><?php print render($primary_local_tasks); ?></ul>
+      <?php endif; ?>
+      <?php if ($secondary_local_tasks): ?>
+        <ul class="tabs secondary"><?php print render($secondary_local_tasks); ?></ul>
+      <?php endif; ?>
+      <?php if ($action_links = render($action_links)): ?>
+        <ul class="action-links"><?php print $action_links; ?></ul>
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
 
+	<?php if ($show_messages && $messages): print $messages; endif; ?>
 
-    <?php if ($method == 0 || $method == 2): ?>
-      <?php print render($page['sidebar_first']); ?>
-    <?php endif; ?>
-
-    <?php if ($method == 2): ?>
-      <?php print render($page['sidebar_second']) ?>
-    <?php endif; ?>
-
-		<?php if(isset($page['sidebar_first']) || isset($page['sidebar_second'])): ?>
-		<section id="center">
-		<?php endif; ?>
-
-				<?php if ($primary_local_tasks || $secondary_local_tasks || $action_links): ?>
-          <div id="tasks">
-            <?php if ($primary_local_tasks): ?>
-              <ul class="tabs primary"><?php print render($primary_local_tasks); ?></ul>
-            <?php endif; ?>
-            <?php if ($secondary_local_tasks): ?>
-              <ul class="tabs secondary"><?php print render($secondary_local_tasks); ?></ul>
-            <?php endif; ?>
-            <?php if ($action_links = render($action_links)): ?>
-              <ul class="action-links"><?php print $action_links; ?></ul>
-            <?php endif; ?>
-          </div>
-        <?php endif; ?>
-
-				<?php if ($show_messages && $messages): print $messages; endif; ?>
-
-
-				<?php print render($page['help']); ?>
-
-				<?php print render($page['content_top']); ?>
-
-				<section id="content">
-					<?php if($title): ?><h1 class="page-title"><?php print $title ?></h1><?php endif; ?>
-					<?php print render($page['content']); ?>
-				</section>
-
-				<?php print render($page['content_bottom']); ?>
-
+	<?php print render($page['help']); ?>
 
-		<?php if(isset($page['sidebar_first']) || isset($page['sidebar_second'])): ?>
-		</section>
-		<?php endif; ?>
-		    <!-- /center -->
+	<?php print render($page['content_top']); ?>
 
+	<?php if($title): ?><h1 class="page-title"><?php print $title ?></h1><?php endif; ?>
+	<?php print render($page['content']); ?>
 
-    <?php if ($method == 1): ?>
-      <?php print render($page['sidebar_first']); ?>
-    <?php endif; ?>
 
-    <?php if ($method == 0 || $method == 1): ?>
-      <?php print render($page['sidebar_second']) ?>
-    <?php endif; ?>
+	<?php print render($page['content_bottom']); ?>
 
 </div><!-- /main -->