5542 sujets

Sémantique web et HTML

Pages :
Bonjour,
J'ai passé toute la matinée à examiner des sites, faire des recherches, puis des essais parce que j'avais enfin trouvé ce qu'il me fallait idéalement..
J'ai trouvé le html et le css pour installer un ContentFlow. J'ai réussi à mettre le fichier javascript sur le serveur d'overblog, et donc j'ai l'adresse pour l'intégrer.
J'ai mis le Css de Contentflow dans personnalisation de mon thème.. je ne savais pas où le placer donc je l'ai mis en haut, juste avec le début des autres ".etc". Puis je suis allée dans "en-tête" et j'ai édité le html, j'ai intégré le html pour le script avec l'adresse du fichier, puis j'ai mis le html de ContentFlow avec les adresses des images.
Eh bien ça ne fonctionne pas Smiley decu j'obtiens un long rectangle noir...
reveries-litteraires.fr
je peux copier coller ce que j'ai fait si ça peut aider..
j'aimerais tellement un peu d'aide
merci d'avance
excellente journée
Jennifer
Bonjour,

Peux-tu nous montrer ce que tu as trouvé?
Parce que là c'est un peu flou pour t'aiguiller... Smiley smile

Cordialement
Merci de votre réponse. Si vous pouviez ensoleiller mon w-end par votre aide, je vous en serais bien reconnaissante ! je serais si heureuse que ça fonctionne !

Pour vous répondre, j'ai trouvé ContentFlow. Sur le site officiel.
http://www.jacksasylum.eu/ContentFlow/download.php
Il y a le css dans le fichier, les explications également pour le html, mais je pense que c'est une base/un exemple qu'il faut exploiter, et ça je ne sais pas faire.. du coup j'ai les outils mais je ne sais pas comment m'en servir...

Ci-dessous le code html que j'ai mis dans "l'en tête" de mon site (je ne savais pas où mettre ailleurs) :

<div style="text-align: center;">
<span style="font-size: 36pt;"><img style="border: 0px solid #000; margin: 0px 0px;" width="100" height="100" class="noAlign" alt=
"http://74.img.v4.skyrock.net/749/jppmjc/pics/508348071_small.jpg" src="http://yooshii.cowblog.fr/images/508348071small.jpg"></span><span style="color: #800000;"><span style=
"font-family: 'book antiqua', palatino;">&nbsp;</span><span style="font-size: 24pt; font-family: 'book antiqua', palatino;">Rêveries littéraires</span></span>
</div>

<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title=Essai/>
<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title=Essai2/>
<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title=Essai3/>
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>


Ci-dessous le css de mon site, avec le css du Content Flow + le script..

<!DOCTYPE html>
<html lang="fr">
<head>
<script language="JavaScript" type="text/javascript" src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js"></script>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
{% title %}
{% favicon %}
{% meta %}

<style type="text/css" media="screen">
.ContentFlow .flow .item canvas.content{height:100%;width:100%}.ContentFlow .flow .item.active{cursor:pointer}.ContentFlow .flow .item .caption{font-size:100%;font-weight:700;text-align:center;color:#FFF;max-height:30%;bottom:10%;background:url(img/1x1_0.5_black.png);width:100%;position:absolute;display:none}* html .ContentFlow .flow .item .caption{background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/1x1_0.5_black.png')}.ContentFlow .scrollbar{width:50%;height:16px;background:url(img/scrollbar_white.png) left center repeat-x;overflow:visible;position:relative;z-index:1;visibility:hidden;margin:10px auto 0}.ContentFlow .scrollbar .slider{width:16px;height:16px;background:url(img/slider_white.png) center center no-repeat;cursor:move;position:absolute}* html .ContentFlow .scrollbar .slider{background-image:none}* html .ContentFlow .scrollbar .slider .virtualSlider{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='img/slider_white.png');height:100%}.ContentFlow .scrollbar .slider .position{top:120%;font-size:16px;font-weight:700;color:silver;position:absolute;text-align:center}.ContentFlow .globalCaption{text-align:center;font-weight:700;color:#FFF;font-size:14px;height:20px;position:relative;z-index:1;margin:2em auto}.ContentFlow .loadIndicator{width:100%;height:100%;top:0;left:0;background:#000;position:absolute;z-index:65000}.ContentFlow .loadIndicator .indicator{background:url(img/loader.gif) center center no-repeat;width:100%;height:100%}* html .ContentFlow .loadIndicator .indicator{height:100px}.ContentFlow{position:relative;overflow:hidden}.ContentFlow *{margin:0;padding:0}.ContentFlow img{-ms-interpolation-mode:bicubic}.ContentFlow .mouseoverCheckElement{position:absolute;width:0;height:0;left:0;visibility:hidden}.ContentFlow:hover .mouseoverCheckElement{left:1px}.ContentFlow .flow{position:relative;z-index:0;visibility:hidden;width:100%;margin:0 auto}.ContentFlow .flow.hidden{visibility:hidden}.ContentFlow .flow .item{position:absolute;visibility:hidden;top:0;left:0}.ContentFlow .flow .item div.content{width:100%;height:100%}.ContentFlow .flow .item .label{display:none}.ContentFlow .flow .item canvas.reflection{margin-top:-1px}.ContentFlow .flow .item img.content,.ContentFlow .flow .item img.reflection,.ContentFlow .flow .item canvas.reflection{width:100%}.ContentFlow .flow .item .caption a,.ContentFlow .flow .item .caption a:link,.ContentFlow .flow .item .caption a:visited,.ContentFlow .flow .item .caption a:active,.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a,.ContentFlow .globalCaption .caption a:link,.ContentFlow .globalCaption .caption a:visited,.ContentFlow .globalCaption .caption a:active,.ContentFlow .globalCaption .caption a:hover{color:#FFF;font-size:0.8em;font-style:italic;text-decoration:none}.ContentFlow .flow .item .caption a:hover,.ContentFlow .globalCaption .caption a:hover{text-decoration:underline}.ContentFlow .flow .item .content,.ContentFlow .flow .item .reflection{display:block}
.socialShare {
height: 30px;
padding: 10px 4px 0px 4px;
}
.socialShare>div {
padding: 0 4px;
margin: 0;
}
.socialShare h3 {
display: none;
}
.socialShare iframe {
width: 100px;
height: 30px;
float: left;
border: none;
}
.box.social li {
height: 40px;
}
.box.social .ob2-facebook {
background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-fb.png") no-repeat scroll 0 3px transparent;
padding-left: 40px;
}
.box.social .ob2-twitter {
background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-twitter.png") no-repeat scroll 0 3px transparent;
padding-left: 40px;
}
.box.social .ob2-rss {
background: url("http://assets.over-blog-kiwi.com/themes/1/images/social-rss.png") no-repeat scroll 0 3px transparent;
padding-left: 40px;
}
.box.social li a {
font-size: 14px;
}
.box.social li a.link {
color: #aeb8c2;
display: block;
font-size: 12px;
font-weight: normal;
margin-top: -2px;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ob-commentsList .ob-button {
background: none;
}
.widget.search h3 {
display: none;
}
.box.promo a {
display: block;
background: url('http://assets.over-blog-kiwi.com/t/catalog/images/promo/{{ Blog.Lang }}.png');
width: 226px;
height: 68px;
text-indent: -10000px;
}
.box.promo a:hover {
background-position: 0 -68px;
}
.ads.ads-728x90{
margin: 0 auto;
width: 728px;
}
.sidebar.ads{
text-align: center;
}
.ob-section.ob-section-video
{
width: auto;
}
.ob-section.ob-section-video iframe
{
width: 100%;
}
.beforeArticle, .beforePage {
width:auto;
}

</style>
<link type="text/css" href="http://fdata.over-blog.net/99/00/00/01/csscombos/common-kiwi.css?kiwi" rel="stylesheet" />
{% if Custom('ob_style_common') %}
<link type="text/css" href="{{ Custom('ob_style_common') }}" rel="stylesheet" />
{% endif %}
{% if Custom('ob_style_variation') %}
<link type="text/css" href="{{ Custom('ob_style_variation') }}" rel="stylesheet" />
{% endif %}

{# Custom css #}
{% if Custom('ob_style_custom_global') %}
<link type="text/css" href="{{ Custom('ob_style_custom_global') }}" rel="stylesheet" />
{% endif %}
{% if isSingle %}
{% if isPage %}
{% if Custom('ob_style_custom_pages') %}
<link type="text/css" href="{{ Custom('ob_style_custom_pages') }}" rel="stylesheet" />
{% else %}
{% if Custom('ob_style_custom_articles') %}
<link type="text/css" href="{{ Custom('ob_style_custom_articles') }}" rel="stylesheet" />
{% endif %}
{% endif %}
{% else %}
{% if Custom('ob_style_custom_articles') %}
<link type="text/css" href="{{ Custom('ob_style_custom_articles') }}" rel="stylesheet" />
{% endif %}
{% endif %}
{% else %}
{% if Custom('ob_style_custom_articles') %}
<link type="text/css" href="{{ Custom('ob_style_custom_articles') }}" rel="stylesheet" />
{% endif %}
{% endif %}

<link rel="stylesheet" href="http://fdata.over-blog.net/99/00/00/01/csscombos/ob-print.css" type="text/css" media="print" />

<meta name="constant:displayArticlesLimit" content="10" />

<meta name="color:ob_body_bg_color:label.BodyBackgroundColor" group="CustomizeMyDesign" />
<meta name="image:ob_body_bg_picture:label.BodyBackgroundPicture" group="CustomizeMyDesign" />
<meta name="color:ob_top_color:label.BlogTitleColor" group="CustomizeMyDesign" />
<meta name="list:ob_top_font:label.BlogTitleFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_top_font_size:label.BlogTitleFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />
<meta name="image:ob_top_bg_picture:label.HeaderBackgroundPicture" group="CustomizeMyDesign" />
<meta name="color:ob_articles_bg_color:label.PostsBackgroundColor" group="CustomizeMyDesign" />
<meta name="color:ob_articles_color:label.PostsFontColor" group="CustomizeMyDesign" />
<meta name="list:ob_articles_font:label.PostsFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_articles_font_size:label.PostsFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />
<meta name="color:ob_articles_title_color:label.PostsTitleFontColor" group="CustomizeMyDesign" />
<meta name="list:ob_articles_title_font:label.PostsTitleFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_articles_title_font_size:label.PostsTitleFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />
<meta name="color:ob_widgets_title_color:label.WidgetsTitleFontColor" group="CustomizeMyDesign" />
<meta name="list:ob_widgets_title_font:label.WidgetsTitleFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_widgets_title_font_size:label.WidgetsTitleFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />
<meta name="color:ob_comments_color:label.CommentsTitleFontColor" group="CustomizeMyDesign" />
<meta name="list:ob_comments_font:label.CommentsTitleFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_comments_font_size:label.CommentsTitleFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />
<meta name="color:ob_comments_replies_color:label.RepliesTitleFontColor" group="CustomizeMyDesign" />
<meta name="list:ob_comments_replies_font:label.RepliesTitleFontFamily" group="CustomizeMyDesign" items="arial,arial black,book antiqua,comic sans ms,courier,courier new,geneva,georgia,helvetica,impact,lucida console,lucida grande,lucida sans unicode,monaco,ms sans serif,ms serif,new york,palatino,palatino linotype,tahoma,times,times new roman,trebuchet ms,verdana,symbol,webdings,wingdings,zapf dingbats" />
<meta name="list:ob_comments_replies_font_size:label.RepliesTitleFontSize" group="CustomizeMyDesign" items="7,8,9,10,11,12,13,14,15,16,17,18,19,20,40" />

<meta name="list:ob_display_post:label.Displaypostas" group="content" items="all,snippets" default="snippets" />
<meta name="string:ob_text_publishedby:label.Publishedby" default="Published by" group="content" />
<meta name="list:share_service:label.socialSharingServices" items="None, Facebook, Twitter, Google +, Pinterest, All" default="All" group="content" />

<meta name="list:custom_facebook_comments_color_theme:label.Facebookcommentscolortheme" items="light, dark" default="light" group="comments" />

<meta name="boolean:ob_widget_last:label.Displaywidget_Last" group="WidgetLast" default="false" />
<meta name="list:ob_widget_last_nb:label.Numberofposts" group="WidgetLast" items="1,2,3,4,5,6,7,8,9,10" default="10" />
<meta name="boolean:ob_widget_last_snippets:label.DisplaySnippet" group="WidgetLast" default="false" />
<meta name="string:ob_widget_last_title:label.Widgettitle" group="WidgetLast" />
<meta name="string:ob_widget_last_id:label.IDHTML" group="WidgetLast" />

<meta name="boolean:ob_widget_social:label.Displaywidget_Social" group="WidgetSocial" default="false" />
<meta name="string:twitter_username:label.twitterUsername" group="WidgetSocial" />
<meta name="string:facebook_username:label.facebookUsername" group="WidgetSocial" />
<meta name="string:ob_widget_social_id:label.IDHTML" group="WidgetSocial" />

<meta name="boolean:ob_widget_promo:label.Displaywidget_Promo" group="WidgetPromo" default="false" />
<meta name="string:ob_widget_promo_id:label.IDHTML" group="WidgetPromo" />

<meta name="boolean:ob_widget_blogroll:label.Displaywidget_Blogroll" group="WidgetBlogRoll" default="false" />
<meta name="string:ob_widget_blogroll_title:label.Widgettitle" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_1_label:label.BlogName1" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_1_link:label.BlogUrl1" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_2_label:label.BlogName2" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_2_link:label.BlogUrl2" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_3_label:label.BlogName3" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_3_link:label.BlogUrl3" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_4_label:label.BlogName4" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_4_link:label.BlogUrl4" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_5_label:label.BlogName5" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_5_link:label.BlogUrl5" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_6_label:label.BlogName6" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_6_link:label.BlogUrl6" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_7_label:label.BlogName7" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_7_link:label.BlogUrl7" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_8_label:label.BlogName8" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_8_link:label.BlogUrl8" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_9_label:label.BlogName9" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_9_link:label.BlogUrl9" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_10_label:label.BlogName10" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_10_link:label.BlogUrl10" group="WidgetBlogRoll" />
<meta name="string:ob_widget_blogroll_id:label.IDHTML" group="WidgetBlogRoll" />

<meta name="boolean:ob_widget_albums:label.Displaywidget_Albumlist" group="WidgetAlbumList" default="false" />
<meta name="string:ob_widget_albums_title:label.Widgettitle" group="WidgetAlbumList" />
<meta name="string:ob_widget_albums_id:label.IDHTML" group="WidgetAlbumList" />

<meta name="boolean:ob_widget_emailnotification:label.Displaywidget_Newsletter" group="WidgetNewsletter" default="false" />
<meta name="string:ob_widget_emailnotification_title:label.Widgettitle" group="WidgetNewsletter" />
<meta name="string:ob_widget_emailnotification_id:label.IDHTML" group="WidgetNewsletter" />

<meta name="boolean:ob_widget_archives:label.Displaywidget_Archives" group="WidgetArchives" default="false" />
<meta name="string:ob_widget_archives_title:label.Widgettitle" group="WidgetArchives" />
<meta name="boolean:ob_widget_archives_count:label.Displaypostscount" group="WidgetArchives" default="true" />
<meta name="string:ob_widget_archives_id:label.IDHTML" group="WidgetArchives" />

<meta name="boolean:ob_widget_tags:label.Displaywidget_Tags" group="WidgetTags" default="false" />
<meta name="string:ob_widget_tags_title:label.Widgettitle" group="WidgetTags" />
<meta name="list:ob_widget_tags_nb:label.numberOfTags" items="5,10,20,30,40,50" default="50" group="WidgetTags" />
<meta name="boolean:ob_widget_tags_count:label.Displaypostscount" group="WidgetTags" default="true" />
<meta name="string:ob_widget_tags_id:label.IDHTML" group="WidgetTags" />

<meta name="boolean:ob_widget_pages:label.Displaywidget_Pageslist" group="WidgetPagesList" default="false" />
<meta name="string:ob_widget_pages_title:label.Widgettitle" group="WidgetPagesList" />
<meta name="string:ob_widget_pages_id:label.IDHTML" group="WidgetPagesList" />

<meta name="boolean:ob_widget_search:label.Displaywidget_Search" group="WidgetSearch" default="false" />
<meta name="string:ob_widget_search_title:label.Widgettitle" group="WidgetSearch" />
<meta name="string:ob_widget_search_id:label.IDHTML" group="WidgetSearch" />

<meta name="boolean:ob_widget_profile:label.Displaywidget_Authorprofile" group="WidgetProfile" default="false" />
<meta name="string:ob_widget_profile_title:label.Widgettitle" group="WidgetProfile" />
<meta name="string:ob_widget_profile_id:label.IDHTML" group="WidgetProfile" />

<meta name="boolean:ob_widget_presentation:label.Displaywidget_Blogpresentation" group="WidgetPresentation" default="false" />
<meta name="string:ob_widget_presentation_title:label.Widgettitle" group="WidgetPresentation" />
<meta name="string:ob_widget_presentation_id:label.IDHTML" group="WidgetPresentation" />

<meta name="list:ob_header_display:label.InHeaderDisplay" group="header" items="blog title,picture,free text" default="blog title" />
<meta name="image:ob_header_picture:label.HeaderPicture" group="header" />
<meta name="text:ob_header_freetext:label.HeaderFreeText" group="header" />
<meta name="string:ob_header_id:label.HeaderfreetextHTMLID" group="header" />

<meta name="boolean:ob_footer_display:label.Displaywidget_Footerfreetext" group="footer" />
<meta name="text:ob_footer_freetext:label.Freetexttext" group="footer" />
<meta name="string:ob_footer_id:label.IDHTML" group="footer" />

<meta name="boolean:ob_widget_freetext_1:label.Displaywidget_Freetext" group="WidgetFreetext1" default="false" />
<meta name="string:ob_widget_freetext_1_title:label.Freetexttitle" group="WidgetFreetext1" />
<meta name="text:ob_widget_freetext_1_text:label.Freetexttext" group="WidgetFreetext1" />
<meta name="string:ob_widget_freetext_1_id:label.IDHTML" group="WidgetFreetext1" />

<meta name="boolean:ob_widget_freetext_2:label.Displaywidget_Freetext" group="WidgetFreetext2" default="false" />
<meta name="string:ob_widget_freetext_2_title:label.Freetexttitle" group="WidgetFreetext2" />
<meta name="text:ob_widget_freetext_2_text:label.Freetexttext" group="WidgetFreetext2" />
<meta name="string:ob_widget_freetext_2_id:label.IDHTML" group="WidgetFreetext2" />

<meta name="boolean:ob_widget_freetext_3:label.Displaywidget_Freetext" group="WidgetFreetext3" default="false" />
<meta name="string:ob_widget_freetext_3_title:label.Freetexttitle" group="WidgetFreetext3" />
<meta name="text:ob_widget_freetext_3_text:label.Freetexttext" group="WidgetFreetext3" />
<meta name="string:ob_widget_freetext_3_id:label.IDHTML" group="WidgetFreetext3" />

<meta name="boolean:ob_widget_freetext_4:label.Displaywidget_Freetext" group="WidgetFreetext4" default="false" />
<meta name="string:ob_widget_freetext_4_title:label.Freetexttitle" group="WidgetFreetext4" />
<meta name="text:ob_widget_freetext_4_text:label.Freetexttext" group="WidgetFreetext4" />
<meta name="string:ob_widget_freetext_4_id:label.IDHTML" group="WidgetFreetext4" />

<meta name="boolean:ob_widget_freetext_5:label.Displaywidget_Freetext" group="WidgetFreetext5" default="false" />
<meta name="string:ob_widget_freetext_5_title:label.Freetexttitle" group="WidgetFreetext5" />
<meta name="text:ob_widget_freetext_5_text:label.Freetexttext" group="WidgetFreetext5" />
<meta name="string:ob_widget_freetext_5_id:label.IDHTML" group="WidgetFreetext5" />

<meta name="boolean:ob_widget_freetext_6:label.Displaywidget_Freetext" group="WidgetFreetext6" default="false" />
<meta name="string:ob_widget_freetext_6_title:label.Freetexttitle" group="WidgetFreetext6" />
<meta name="text:ob_widget_freetext_6_text:label.Freetexttext" group="WidgetFreetext6" />
<meta name="string:ob_widget_freetext_6_id:label.IDHTML" group="WidgetFreetext6" />

<meta name="boolean:ob_widget_freetext_7:label.Displaywidget_Freetext" group="WidgetFreetext7" default="false" />
<meta name="string:ob_widget_freetext_7_title:label.Freetexttitle" group="WidgetFreetext7" />
<meta name="text:ob_widget_freetext_7_text:label.Freetexttext" group="WidgetFreetext7" />
<meta name="string:ob_widget_freetext_7_id:label.IDHTML" group="WidgetFreetext7" />

<meta name="string:ob_menu_1_label:label.Menu1label" group="menu" />
<meta name="string:ob_menu_1_link:label.Menu1link" group="menu" />
<meta name="string:ob_menu_2_label:label.Menu2label" group="menu" />
<meta name="string:ob_menu_2_link:label.Menu2link" group="menu" />
<meta name="string:ob_menu_3_label:label.Menu3label" group="menu" />
<meta name="string:ob_menu_3_link:label.Menu3link" group="menu" />
<meta name="string:ob_menu_4_label:label.Menu4label" group="menu" />
<meta name="string:ob_menu_4_link:label.Menu4link" group="menu" />
<meta name="string:ob_menu_5_label:label.Menu5label" group="menu" />
<meta name="string:ob_menu_5_link:label.Menu5link" group="menu" />
<meta name="string:ob_menu_6_label:label.Menu6label" group="menu" />
<meta name="string:ob_menu_6_link:label.Menu6link" group="menu" />

<!-- SEO -->
{% if Custom('google_webmaster_id') is not empty %}<meta name="google-site-verification" content="{{ Custom('google_webmaster_id') }}" />{% endif %}
{% if Custom('msn_webmaster_id') is not empty %}<meta name="msvalidate.01" content="{{ Custom('msn_webmaster_id') }}" />{% endif %}

<style type="text/css">
{% if Custom('ob_body_bg_color') or Custom('ob_body_bg_picture') %}body {
{% if Custom('ob_body_bg_color') %}background-color: {{ Custom('ob_body_bg_color') }} ! important;{% endif %}
{% if Custom('ob_body_bg_picture') %}background-image: url("{{ Custom('ob_body_bg_picture') }}") ! important;{% endif %}
}{% endif %}

{% if Custom('ob_top_bg_picture') %}#cl_0_0 {background-image: url({{ Custom('ob_top_bg_picture') }}) ! important; }{% endif %}

{% if Custom('ob_top_color') or Custom('ob_top_font') or Custom('ob_top_font_size') %}#top h1,
#top h1 a {
{% if Custom('ob_top_color') %}color: {{ Custom('ob_top_color') }};{% endif %}
{% if Custom('ob_top_font') %}font-family: "{{ Custom('ob_top_font') }}";{% endif %}
{% if Custom('ob_top_font_size') %}font-size: {{ Custom('ob_top_font_size') }}px;{% endif %}
}{% endif %}

{% if Custom('ob_articles_bg_color') or Custom('ob_articles_color') or Custom('ob_articles_font') or Custom('ob_articles_font_size') %}.contenuArticle, .pageContent, .extraitArticle, .extrait {
{% if Custom('ob_articles_bg_color') %}background-color: {{ Custom('ob_articles_bg_color') }} ! important;{% endif %}
{% if Custom('ob_articles_color') %}color: {{ Custom('ob_articles_color') }} ! important;{% endif %}
{% if Custom('ob_articles_font') %}font-family: "{{ Custom('ob_articles_font') }}";{% endif %}
{% if Custom('ob_articles_font_size') %}font-size: {{ Custom('ob_articles_font_size') }}px;{% endif %}
}{% endif %}

{% if Custom('ob_articles_title_color') or Custom('ob_articles_title_font') or Custom('ob_articles_title_font_size') %}.divTitreArticle h2, .divPageTitle h2,
.divTitreArticle h2 a, .divPageTitle h2 a,
.titreExtrait {
{% if Custom('ob_articles_title_color') %}color: {{ Custom('ob_articles_title_color') }} ! important;{% endif %}
{% if Custom('ob_articles_title_font') %}font-family: "{{ Custom('ob_articles_title_font') }}";{% endif %}
{% if Custom('ob_articles_title_font_size') %}font-size: {{ Custom('ob_articles_title_font_size') }}px;{% endif %}
}{% endif %}

{% if Custom('ob_widgets_title_color') or Custom('ob_widgets_title_font') or Custom('ob_widgets_title_font_size') %}.box-titre h2 {
{% if Custom('ob_widgets_title_color') %}color: {{ Custom('ob_widgets_title_color') }} ! important;{% endif %}
{% if Custom('ob_widgets_title_font') %}font-family: "{{ Custom('ob_widgets_title_font') }}" ! important;{% endif %}
{% if Custom('ob_widgets_title_font_size') %}font-size: {{ Custom('ob_widgets_title_font_size') }}px ! important;{% endif %}
}{% endif %}

{% if Custom('ob_comments_color') or Custom('ob_comments_font') or Custom('ob_comments_font_size') %}.ob-commentsList .ob-message {
{% if Custom('ob_comments_color') %}color: {{ Custom('ob_comments_color') }} ! important;{% endif %}
{% if Custom('ob_comments_font') %}font-family: "{{ Custom('ob_comments_font') }}" ! important;{% endif %}
{% if Custom('ob_comments_font_size') %}font-size: {{ Custom('ob_comments_font_size') }}px ! important;{% endif %}
}{% endif %}

{% if Custom('ob_comments_replies_color') or Custom('ob_comments_replies_font') or Custom('ob_comments_replies_font_size') %}.ob-replies .ob-list .ob-message {
{% if Custom('ob_comments_replies_color') %}color: {{ Custom('ob_comments_replies_color') }} ! important;{% endif %}
{% if Custom('ob_comments_replies_font') %}font-family: "{{ Custom('ob_comments_replies_font') }}" ! important;{% endif %}
{% if Custom('ob_comments_replies_font_size') %}font-size: {{ Custom('ob_comments_replies_font_size') }}px ! important;{% endif %}
}{% endif %}

</style>

<link href="//assets.over-blog-kiwi.com/themes/jquery/fancybox2.1.2/jquery.fancybox.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="global">

<div id="ln_0" class="ln">
<div id="cl_0_0" class="cl">
<div class="column_content">
{% if Blog.isAdEnabled %}
<div class="box pub top box0 ads ads-728x90">
{% ad(4) %}
</div>
{% endif %}
<div {% if Custom('ob_header_id') %} id="{{ Custom('ob_header_id') }}"{% else %}id="header"{% endif %}>
<div id="top">
{% if Custom('ob_header_display') == 'blog title' %}
<h1>
<a href="{{ Blog.Url }}">
{{ Blog.Title }}
</a>
</h1>
{% elseif Custom('ob_header_display') == 'free text' %}
{{ Custom('ob_header_freetext')}}
{% elseif Custom('ob_header_picture') is not empty %}
<a href="{{ Blog.Url }}" class="topLien toplinkImg nofont">
<img src="{{ Custom('ob_header_picture') }}" alt="{{ Blog.Title }}" />
</a>
{% endif %}
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>

<div id="ln_1" class="ln">
<div id="cl_1_0" class="cl">
<div class="column_content">
{% if Blog.isAdEnabled %}
<div class="box pub sidebar box0 ads">
{% ad(12) %}
</div>
{% endif %}

{# Widgets #}

{# Presentation #}
{% if Custom('ob_widget_presentation') %}
<div class="box presentation"{% if Custom('ob_widget_presentation_id') %} id="{{ Custom('ob_widget_presentation_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_presentation_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% if Blog.Title %}
<li>
<strong>
<label>{{ Lang.Get('Blog')|title }}</label>
</strong> :
{{ Blog.Title }}
</li>
{% endif %}
{% if Blog.Avatar %}
<li>
<a href="{{ Blog.Url }}">
<img src="{{ Blog.Avatar|resize(200) }}" alt="{{ Blog.Title }}" />
</a>
</li>
{% endif %}
{% if Blog.Description %}
<li>
<strong>
<label>
{{ Lang.Get('Description') }}
</label>
</strong> :
{{ Blog.Description }}
</li>
{% endif %}
<li>
<a class="linkContact"
href="/contact">
{{ Lang.Get('Contact') }}
</a>
</li>
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Profile #}
{% if Custom('ob_widget_profile') %}
<div class="box profil"{% if Custom('ob_widget_profile_id') %} id="{{ Custom('ob_widget_profile_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_profile_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% if Blog.Owner.Nickname %}
<li>
<strong>
<label>
{{ Lang.Get('Name')|title}} :
</label>
</strong>
{{ Blog.Owner.Nickname }}
</li>
{% endif %}
{% if Blog.Owner.Avatar %}
<li>
<img src="{{ Blog.Owner.Avatar|resize(200) }}"
alt="{{ Blog.Owner.Bio }}" />
</li>
{% endif %}
{% if Blog.Owner.Bio %}
<li>
<strong>
<label>
{{ Lang.Get('about me:')|title }}
</label>
</strong>
{{ Blog.Owner.Bio }}
</li>
{% endif %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 1 #}
{% if Custom('ob_widget_freetext_1') %}
<div class="box text"{% if Custom('ob_widget_freetext_1_id') %} id="{{ Custom('ob_widget_freetext_1_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_1_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_1_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Search #}
{% if Custom('ob_widget_search') %}
<div class="box recherche"{% if Custom('ob_widget_search_id') %} id="{{ Custom('ob_widget_search_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_search_title')|title }}</span></h2></div>
<div class="box-content">
<!-- Search form -->
{% if Custom('display_widget_search') == false %}
<div class="widget search" >
<h3>{{ Lang.Get('Search') }}</h3>
<form action="/search" method="post">
<input type="text" name="q" placeholder="{{ Lang.Get('Search something here') }}..."{% if isSearch %} value="{{ Search.Keyword }}"{% endif %} />
<input type="submit" value="{{ Lang.Get('Search') }}" class="button"/>
</form>
</div>
{% endif %}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 2 #}
{% if Custom('ob_widget_freetext_2') %}
<div class="box text"{% if Custom('ob_widget_freetext_2_id') %} id="{{ Custom('ob_widget_freetext_2_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_2_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_2_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Archives #}
{% if Custom('ob_widget_archives') %}
<div class="box archive"{% if Custom('ob_widget_archives_id') %} id="{{ Custom('ob_widget_archives_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_archives_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% list Blog.Archives %}
{% if Archive.Year >= "now"|date("Y")-1 %}
{% list Archive.Months %}
<li>
<a href="{{ Month.Url }}">
{{ Lang.Get(Month.Name) }} {{ Archive.Year }}
</a>
{% if Custom('ob_widget_archives_count') %}
({{ Month.PostCount }})
{% endif %}
</li>
{% endlist %}
{% endif %}
{% endlist %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 3 #}
{% if Custom('ob_widget_freetext_3') %}
<div class="box text"{% if Custom('ob_widget_freetext_3_id') %} id="{{ Custom('ob_widget_freetext_3_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_3_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_3_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}


{# end sidebar #}
</div>
<div class="clear"></div>
</div>

<div id="cl_1_1" class="cl">
<div class="column_content">
{% if Custom('ob_menu_1_label') %}
<div id="menuob">
{% if Custom('ob_menu_1_label') %}<a href="{{ Custom('ob_menu_1_link') }}">{{ Custom('ob_menu_1_label') }}</a>{% endif %}
{% if Custom('ob_menu_2_label') %}<a href="{{ Custom('ob_menu_2_link') }}">{{ Custom('ob_menu_2_label') }}</a>{% endif %}
{% if Custom('ob_menu_3_label') %}<a href="{{ Custom('ob_menu_3_link') }}">{{ Custom('ob_menu_3_label') }}</a>{% endif %}
{% if Custom('ob_menu_4_label') %}<a href="{{ Custom('ob_menu_4_link') }}">{{ Custom('ob_menu_4_label') }}</a>{% endif %}
{% if Custom('ob_menu_5_label') %}<a href="{{ Custom('ob_menu_5_link') }}">{{ Custom('ob_menu_5_label') }}</a>{% endif %}
{% if Custom('ob_menu_6_label') %}<a href="{{ Custom('ob_menu_6_link') }}">{{ Custom('ob_menu_6_label') }}</a>{% endif %}
</div>
{% endif %}

{% if isSearch %}
<div class="divTitleSearch">
<h2>Résultats pour "{{ Search.Keyword }}"</h2>
</div>
<div class="divSearchResults">
{% if Posts is not empty %}
<div class="before_articles">
<div class="pagination center">
{% pagination %}
</div>
</div>
{% list Posts %}
<div class="searchResult" style="margin-bottom:10px;">
<h3><a href="{{ Post.Url }}">{{ Post.Title }}</a></h3>
<div>{{ Post.Snippet }}</div>
{{ Post.Date|datel(Lang.Get('simple date format')) }}
<div class="clear"></div>
</div>
{% if Blog.isAdEnabled and loop.first %}
<div>
<div id="div-gpt-ad-mainColumn" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div id="div-gpt-ad-mainColumn_double" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div class="clear"></div>
</div>
{% endif %}
{% endlist %}
<div class="after_articles">
<div class="pagination center">
{% pagination %}
</div>
</div>
{% else %}
<p>{{ Lang.Get('no results for this search') }}</p>
{% endif %}
</div>
{% elseif isArchive %}
{% if Posts %}
<div class="before_articles">
<div class="pagination center">
{% pagination %}
</div>
</div>
<ul>
{% list Posts %}
<li class="listArticles article_item_{% if loop.index % 2 %}even{% else %}odd{% endif %}">
<a href="{{ Post.Url }}">{{ Post.Title|default(Post.Snippet|truncate(100)) }}</a>
(<span class="DateListe">{{ Post.Date|datel(Lang.Get('simple date format')) }}</span>)
<br />
<div class="resumeArticle">
{{ Post.Snippet }}
<div class="clear"></div>
</div>
</li>
{% if Blog.isAdEnabled and loop.first %}
<li class="inContent">
<div id="div-gpt-ad-mainColumn" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div id="div-gpt-ad-mainColumn_double" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div class="clear"></div>
</li>
{% endif %}
{% endlist %}
</ul>
<div class="after_articles">
<div class="pagination center">
{% pagination %}
</div>
</div>
{% endif %}
{% elseif isSpecial %}
<div class="articles">
<div>
<div class="before_articles">
<div class="pagination center"></div>
</div>
<div class="article" id="article1">
<div class="option beforeArticle"></div>
<div class="contenuArticle">
{{ SpecialContent }}
<div class="clear"></div>
</div>
<div class="option afterArticle"></div>
</div>
<div class="after_articles"></div>
</div>
</div>
{% if Blog.isAdEnabled %}
<div id="div-gpt-ad-mainColumn" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div id="div-gpt-ad-mainColumn_double" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div class="clear"></div>
{% endif %}
{% else %}
<div class="articles{% if Custom('ob_display_post') == 'snippets' %} extraits{% endif %}">
<div>
<div class="before_articles">
<div class="pagination center">
{% pagination %}

{% if Navigation.NextPost %}
<!-- next post -->
<a href="{{ Navigation.NextPost.Url }}" rel="next" class="textNext"><< {{ Navigation.NextPost.Title|truncate(25) }}</a>
{% endif %}
{% if Navigation.PreviousPost %}
<!-- previous post -->
<a href="{{ Navigation.PreviousPost.Url }}" rel="next" class="textPrevious">{{ Navigation.PreviousPost.Title|truncate(25) }} >></a>
{% endif %}
</div>
</div>

{% list Posts %}
{% if Custom('ob_display_post') == 'all' or isSingle or isTag %}
{# Full post #}

<div class="article article_{% if loop.index % 2 %}even{% else %}odd{% endif %}" id="article{{ loop.index }}" itemscope itemtype="http://schema.org/BlogPosting">
<div class="option beforeArticle">
<div class="date">
<span class="text">{{ Post.Date|datel(Lang.Get("Default date format")) }}</span>
<span class="dow">{{ Post.Date|datel('c')}}</span>
<span class="day">{{ Post.Date|datel('dd')}}</span>
<span class="month"><span class="separator">/</span>{{ Post.Date|datel('MM')}}</span>
<span class="litteralMonth"><span class="separator">/</span>{{ Post.Date|datel('MMMM')}}</span>
<span class="year"><span class="separator">/</span>{{ Post.Date|datel('y')}}</span>
<span class="hour">{{ Post.Date|datel('HH:mm')}}</span>
</div>
</div>

{% if Post.Title %}
<div class="divTitreArticle">
<h2>
<a href="{{ Post.Url }}" class="titreArticle" title="{{ Post.Title }}">{{ Post.Title }}</a>
</h2>
</div>
{% endif %}

<div class="contenuArticle">
{{ Post.Body }}

{% if Post.Title is empty %}
<p>
<a href="{{ Post.Url }}">
{{ Lang.Get('See comments') }}
</a>
</p>
{% endif %}
<div class="clear"></div>
</div>

<div class="clear"></div>

<div class="socialShare">
{{ Post.Share }}
</div>

<div class="clear"></div>

<div class="option afterArticle">
{% if Post.Author is not empty %}<span class="publishedBy">{{ Custom('ob_text_publishedby') }} {{ Post.Author }}</span>{% endif %}

{% if Post.Tags is not empty %}
<span class="topic">
<span class="separator">-</span>
{{ Lang.Get('in') }}

{% list Post.Tags %}
<a href="{{ Tag.Url }}" title="{{ Tag.Title }}" class="linkTopic">{{ Tag.Title }}</a>
{% endlist %}
</span>
{% endif %}
{% if Post.ShowComments %}
<br/>
<span class="spanAddComment">
<a href="{{ Post.Url }}#anchorComment" class="linkAddComment">
{{ Lang.Get('comment this article') }}
</a>
</span>
<a href="{{ Post.Url }}#anchorComment" class="linkComment">
{{ Post.CommentCount(Lang.Get('seencomment'), Lang.Get('seencomments'), ' ') }}
</a>
{% endif %}
</div>
</div>

{% if Blog.isAdEnabled and loop.first %}
<div id="div-gpt-ad-mainColumn" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div id="div-gpt-ad-mainColumn_double" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div class="clear"></div>
{% endif %}

{% else %}
{# Extract post #}

<div class="extraitArticle article_summary_{% if loop.index % 2 %}even{% else %}odd{% endif %}" id="extraitArticle{{ loop.index }}">
<div class="dateExtrait">
<div class="date">
<span class="text">{{ Post.Date|datel(Lang.Get("Default date format")) }}</span>
<span class="dow">{{ Post.Date|datel('c')}}</span>
<span class="day">{{ Post.Date|datel('dd')}}</span>
<span class="month"><span class="separator">/</span>{{ Post.Date|datel('MM')}}</span>
<span class="litteralMonth"><span class="separator">/</span>{{ Post.Date|datel('MMMM')}}</span>
<span class="year"><span class="separator">/</span>{{ Post.Date|datel('y')}}</span>
<span class="hour">{{ Post.Date|datel('HH:mm')}}</span>
</div>
</div>
<div class="infoExtrait">
<span class="titreExtrait"><a href="{{ Post.Url }}" class="titreExtrait">{{ Post.Title }}</a></span>
</div>
<hr class="hrExtrait" />
<div class="extrait">
{% if Post.Cover %}
<a href="{{ Post.Url }}">
<img class="imgExtraitCon" src="{{ Post.Cover|resize(150) }}" alt="{{ Post.Title }}" />
</a>
<br />
{% endif %}

{{ Post.Snippet }}

<br />
<a href="{{ Post.Url }}">
{{ Lang.Get('Read more') }}
</a>
<div class="clear"></div>
</div>

<div class="socialShare">
{{ Post.Share }}
</div>

<div class="clear"></div>

<div class="plusExtrait">
{% if Post.Author is not empty %}<span class="publishedBy">{{ Custom('ob_text_publishedby') }} {{ Post.Author }}</span>{% endif %}

{% if Post.Tags is not empty %}
<span class="topic">
<span class="separator">-</span>
{{ Lang.Get('in') }}

{% list Post.Tags %}
<a href="{{ Tag.Url }}" title="{{ Tag.Title }}" class="linkTopic">{{ Tag.Title }}</a>
{% endlist %}
</span>
{% endif %}
<br />
{% if Post.ShowComments %}
<span class="spanAddComment">
<a href="{{ Post.Url }}#anchorComment" class="linkAddComment">
{{ Lang.Get('comment this article') }}
</a>
</span>
{{ Post.CommentCount(Lang.Get('seencomment'), Lang.Get('seencomments'), ' ') }}
{% endif %}
</div>
</div>
{% if Blog.isAdEnabled and loop.first %}
<div id="div-gpt-ad-mainColumn" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div id="div-gpt-ad-mainColumn_double" class="ads ads-300x250" style="float:left;border:none;padding:0;">
{% ad(1) %}
</div>
<div class="clear"></div>
{% endif %}
{% endif %}
{% endlist %}

<div class="after_articles">
<div class="pagination center">
{% pagination %}

{% if Navigation.NextPost %}
<!-- next post -->
<a href="{{ Navigation.NextPost.Url }}" rel="next" class="textNext"><< {{ Navigation.NextPost.Title|truncate(25) }}</a>
{% endif %}
{% if Navigation.PreviousPost %}
<!-- previous post -->
<a href="{{ Navigation.PreviousPost.Url }}" rel="next" class="textPrevious">{{ Navigation.PreviousPost.Title|truncate(25) }} >></a>
{% endif %}
</div>
</div>

{% if isSingle and Post.ShowComments %}
<div id="anchorComment"></div>
<h2 class="h2commentMessage" id="c">{{ Lang.Get('comments') }}</h2>
{{ Post.Comments }}
<div id="anchorEndComment" ></div>
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>

<div id="cl_1_2" class="cl">
<div class="column_content">
{% if Blog.isAdEnabled %}
<div class="box pub sidebar box0 ads">
{% ad(14) %}
</div>
{% endif %}

{# Widgets #}

{# Last posts #}
{% if Custom('ob_widget_last') %}
<div class="box articlerecent"{% if Custom('ob_widget_last_id') %} id="{{ Custom('ob_widget_last_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_last_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% list Blog.Posts(Custom('ob_widget_last_nb')) %}
<li>
<a href="{{ Post.Url }}" title="{{ Post.Title }}">
{{ Post.Title }}
</a>
{% if Custom('ob_widget_last_snippets') %}
<div>{{ Post.Snippet }}</div>
{% endif %}
</li>
{% endlist %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Pages #}
{% if Custom('ob_widget_pages') %}
<div class="box pages"{% if Custom('ob_widget_pages_id') %} id="{{ Custom('ob_widget_pages_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_pages_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% list Blog.Pages %}
{% if Page.Title|truncate(5, false, '') != 'Album' %}
<li>
<a href="{{ Page.Url }}" title="{{ Page.Title }}">
{{ Page.Title }}
</a>
</li>
{% endif %}
{% endlist %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Album #}
{% if Custom('ob_widget_albums') and Blog.TaggedPages('Album', 6) is not empty %}
<div class="box pages"{% if Custom('ob_widget_albums_id') %} id="{{ Custom('ob_widget_albums_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_albums_title')|title }}</span></h2></div>
<div class="box-content">
<ul class="imgAndText center">
{% list Blog.TaggedPages('Album', 6) %}
{% if TaggedPage.Cover is not empty %}
<li class="noListStyle">
<div class="center">
<a href="{{ TaggedPage.Permalink }}" title="{{TaggedPage.Title}}">
<img src="{% if TaggedPage.Cover is not empty %}{{ TaggedPage.Cover|resize(70,70)|crop }}{% endif %}" alt="{{TaggedPage.Title}}" width="70" height="70" />
</a>
</div>
<div class="center">
<a href="{{ TaggedPage.Permalink }}" title="{{TaggedPage.Title}}">{{TaggedPage.Title}}</a>
</div>
</li>
{% endif %}
{% endlist %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 4 #}
{% if Custom('ob_widget_freetext_4') %}
<div class="box text"{% if Custom('ob_widget_freetext_4_id') %} id="{{ Custom('ob_widget_freetext_4_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_4_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_4_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Tags #}
{% if Custom('ob_widget_tags') %}
<div class="box categorie"{% if Custom('ob_widget_tags_id') %} id="{{ Custom('ob_widget_tags_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_tags_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% list Blog.PostsTags(Custom('ob_widget_tags_nb')) %}
<li>
<a href="{{ PostsTag.Url }}">{{ PostsTag.Title }}</a>
{% if Custom('ob_widget_tags_count') %}
({{ PostsTag.PostCount }})
{% endif %}
</li>
{% endlist %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 5 #}
{% if Custom('ob_widget_freetext_5') %}
<div class="box text"{% if Custom('ob_widget_freetext_5_id') %} id="{{ Custom('ob_widget_freetext_5_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_5_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_5_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Newsletter #}
{% if Custom('ob_widget_emailnotification') %}
<div class="box newsletter"{% if Custom('ob_widget_emailnotification_id') %} id="{{ Custom('ob_widget_emailnotification_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_emailnotification_title')|title }}</span></h2></div>
<div class="box-content">
{{ Lang.Get('Subscribe to be notified about future posts.') }}
{% email_notification %}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 6 #}
{% if Custom('ob_widget_freetext_6') %}
<div class="box text"{% if Custom('ob_widget_freetext_6_id') %} id="{{ Custom('ob_widget_freetext_6_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_6_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_6_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Blog roll #}
{% if Custom('ob_widget_blogroll') %}
<div class="box lien"{% if Custom('ob_widget_blogroll_id') %} id="{{ Custom('ob_widget_blogroll_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_blogroll_title')|title }}</span></h2></div>
<div class="box-content">
<ul>
{% if Custom('ob_widget_blogroll_1_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_1_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_1_label') }}">{{ Custom('ob_widget_blogroll_1_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_2_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_2_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_2_label') }}">{{ Custom('ob_widget_blogroll_2_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_3_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_3_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_3_label') }}">{{ Custom('ob_widget_blogroll_3_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_4_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_4_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_4_label') }}">{{ Custom('ob_widget_blogroll_4_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_5_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_5_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_5_label') }}">{{ Custom('ob_widget_blogroll_5_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_6_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_6_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_6_label') }}">{{ Custom('ob_widget_blogroll_6_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_7_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_7_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_7_label') }}">{{ Custom('ob_widget_blogroll_7_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_8_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_8_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_8_label') }}">{{ Custom('ob_widget_blogroll_8_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_9_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_9_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_9_label') }}">{{ Custom('ob_widget_blogroll_9_label') }}</a>
</li>
{% endif %}
{% if Custom('ob_widget_blogroll_10_label') %}
<li>
<a href="{{ Custom('ob_widget_blogroll_10_link') }}"
class="popup"
title="{{ Custom('ob_widget_blogroll_10_label') }}">{{ Custom('ob_widget_blogroll_10_label') }}</a>
</li>
{% endif %}
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Free text 7 #}
{% if Custom('ob_widget_freetext_7') %}
<div class="box text"{% if Custom('ob_widget_freetext_7_id') %} id="{{ Custom('ob_widget_freetext_7_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Custom('ob_widget_freetext_7_title') }}</span></h2></div>
<div class="box-content">
{{ Custom('ob_widget_freetext_7_text') }}
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Promo #}
{% if Custom('ob_widget_promo') %}
<div class="box promo"{% if Custom('ob_widget_promo_id') %} id="{{ Custom('ob_widget_promo_id') }}"{% endif %}>
<div class="box-content">
<a href="http://overblog.com" class="popup">
{{ Lang.Get('Create a free blog on overblog.com')|striptags }}
</a>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}

{# Social #}
{% if Custom('ob_widget_social') %}
<div class="box social"{% if Custom('ob_widget_social_id') %} id="{{ Custom('ob_widget_social_id') }}"{% endif %}>
<div class="box-titre"><h2><span>{{ Lang.Get('Follow us') }}</span></h2></div>
<div class="box-content">
<ul>
{% if Custom('facebook_username') is not empty %}
<li class="ob2-facebook">
<a class="ob2-follow" href="http://facebook.com/{{ Custom('facebook_username') }}" title="{{ Custom('facebook_username') }}">{{ Lang.Get('Follow me on') }} Facebook</a>
</li>
{% endif %}
{% if Custom('twitter_username') is not empty %}
<li class="ob2-twitter">
<a class="ob2-follow" href="http://twitter.com/{{ Custom('twitter_username') }}" title="{{ Custom('twitter_username') }}">{{ Lang.Get('Follow me on') }} Twitter</a>
</li>
{% endif %}
<li class="ob2-rss">
<a class="ob2-follow" href="{{ Blog.RssUrl }}">{{ Lang.Get('Subscribe to the rss feed') }}</a>
</li>
</ul>
</div>
<div class="box-footer"><h2><span>&nbsp;</span></h2></div>
</div>
{% endif %}


{# end sidebar #}
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<div id="ln_2" class="ln">
<div id="cl_2_0" class="cl">
<div class="column_content">
<div id="footer" >
{% if Custom('ob_footer_display') %}
<div{% if Custom('ob_footer_id') %} id="{{ Custom('ob_footer_id') }}"{% endif %}>
{{ Custom('ob_footer_freetext')}}
<div class="clear"></div>
</div>
{% endif %}
</div>
{% if Blog.isAdEnabled %}
<div class="box pub bottom box0 ads ads-728x90">
{% ad(4) %}
</div>
{% endif %}
</div>
<div class="clear"></div>
</div>
</div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//assets.over-blog-kiwi.com/themes/jquery/fancybox2.1.2/jquery.fancybox.pack.js"></script>
<script>
$(document).ready(function() {
// Fancybox
$(".ob-section-images a, .ob-link-img").attr("rel", "fancybox");

$("a[rel=fancybox]").fancybox({
'overlayShow' : true,
'titlePosition' : 'over',
'transitionIn' : 'fadin',
'transitionOut' : 'fadin',
'type' : 'image'
});
});
</script>
</body>
</html>







et là mon site, j'ai donc un long rectangle noir au lieu du content flow :
http://www.reveries-litteraires.fr/
Je n'ai pas de rectangle noir sur mon navigateur.
Pense à activer Javascript dans ton navigateur ou vide le cache de celui-ci Smiley cligne

Bonne journée!
Modifié par nef1912 (19 Apr 2014 - 15:20)
Ah oui ça fonctionne !! merci Smiley biggrin je n'aurais jamais pensé à ça,
ceci dit j'ai une clé internet, ma page de site met 5 minutes à s'afficher, et même comme ça parfois je ne vois rien ou parfois un rectangle noir Smiley cligne
Comment je suis contente d'être parvenue toute seule à mettre tout ce qu'il fallait au bon endroit ! lol, merci et bonne journée Smiley cligne
Oui.
C'est le temps que ton Javascript s'exécute, il met un peu de temps et il y a quelques erreurs mais rien de grave. Tu peux le voir dans la console de ton navigateur ( Pour Chrome par exemple : clic droit -> inspecter l'élément -> Console).

Mais le résultat est là Smiley smile
Bravo à toi!

Bonne journée!
Merci, c'est bien gentil. Si tu as une ou plusieurs idées pour que ça aille plus vite ou supprimer des erreurs, n'hésite vraiment pas à me conseiller, car je touche un peu sans trop connaître, la volonté fait beaucoup dans l'histoire Smiley cligne
Cela fonctionne-t-il encore chez toi ? Smiley sweatdrop

Car moi plus du tout,
je remarque que ça écrit ceci dans "console" :

Failed to load resource: the server responded with a status of 404 (Not Found) http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.css

je ne comprends pas pourquoi, car j'ai mis un fichier contentflow.js, pas "css",
donc que faire ? Faudrait il ajouter un fichier ?
Le lien est celui ci :
http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js

je ne comprends pas pourquoi il charge autre chose ?

olala j'étais si contente moi que cela fonctionne ! Smiley decu
Non ça ne fonctionne pas.

Le .css n'est pas trouvé, le chemin est-il bon? Est-ce que tu as les fichiers demandés sur ton serveur?
Je n'ai plus d'aperçus sur ces éléments.
Et pourtant je n'ai rien changé, c'est comme ce matin Smiley ohwell
Pour le css, faut-il mettre un fichier ?
En fait j'ai un fichier avec le css dedans, moi j'ai copié toutes les écritures dans le css de mon site (je t'ai fait un copié/collé dans les messages plus haut, en gras c'est le css). Faut-il agir différemment ?
Je suis allée sur le site du concepteur, j'ai inspecté aussi son exemple en bas de la page
(http://www.jacksasylum.eu/ContentFlow/docu.php) et dans "console" je remarque qu'il a la même chose que moi, chez lui c'est écrit :
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.jacksasylum.eu/ContentFlow/ContentFlow/mycontentflow.css

cependant dans elements chez lui je vois ça :
<link rel="stylesheet" href="http://www.jacksasylum.eu/ContentFlow/ContentFlow/contentflow.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://www.jacksasylum.eu/ContentFlow/ContentFlow/mycontentflow.css" type="text/css" media="screen">

J'aimerais bien avoir le même résultat que lui : un affiche rapide et propre !

Merci d'avance pour ton aide précieuse
Je viens de faire un essai, j'ai modifié le début du css comme ça :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type"/>
{% title %}
{% favicon %}
{% meta %}
<script src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css type="text/css" media="screen">
<style type="text/css" media="screen">
.socialShare {
height: 30px;
padding: 10px 4px 0px 4px;


Donc j'ai mis un lien vers fichier css
et j'ai supprimé le copié/collé que j'avais fait du fichier..

Smiley rolleyes
et le résultat est dramatique...
le rectangle noir a disparu, maintenant il n'y plus que les 3 images prévues.. donc plus rien ne fonctionne ! et ça me dit dans Console :

Failed to load resource: the server responded with a status of 404 (Not Found) http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css%20type=
Failed to load resource: the server responded with a status of 404 (Not Found) http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_mycontentflow.css

Je ne sais pas quoi faire... penses-tu que c'est l'hébergement du fichier qui serait en cause ? Je l'ai stocké dans over blog, j'avais vu qu'il fallait faire comme ça, le fichier est enregistré sur le site et j'ai pris son url..

http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js
http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css

Smiley sweatdrop
Tes fichiers js et css fonctionnement (ceux du carrousel), j'ai pu les tester et tu peux voir le résultat :
http://jsfiddle.net/f67JS/

Ensuite tu les mets dans le head dans ton html :
<script language="JavaScript" type="text/javascript" src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js"></script>

<link rel="stylesheet" href="http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css" type="text/css">


Et tu intègres avec le code donné sur la doc du développeur. Vérifie bien que les emplacements sont corrects (aussi bien pour les images que les fichiers js et css), et les appels dans ton code aussi.
Merci beaucoup d'avoir testé, et du temps pris pour moi, c'est super gentil.

C'est pourtant ce que j'avais fait, à force je mémorise les écritures..

Je vais ré-essayer, je remets tout, je reviens te dire quand c'est fait, et tu me diras si ça convient.. mais bon c'est ce qui est déjà en place, donc je doute.

Une chose : je place où dans le head du html ? Juste après "head" ?

Pour le code, il est dans un module, le module "en-tête", je n'y ai pas touché depuis que tout fonctionnait.. je te remontrerai si tu veux. Bon je vais essayer. merci !
Il y a une connaissance qui m'a expliqué qu'il ne faut rien mettre dans le css de mon site, mais tout dans le head du module html "en-tête". Est-ce exact ? Smiley ohwell

Voici tout ce que contient mon module :

<p ><span style="color:#660000;"><span style="font-family:sans-serif;"><span style="font-size:14px;">R&ecirc;veries Litt&eacute;raires : chroniques de lecture, critiques de la litt&eacute;rature contemporaine.</span></span></span></p>
<!DOCTYPE html>
<html lang="fr">
<head>
<script language="JavaScript" type="text/javascript" src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js"></script>

<link rel="stylesheet" href="http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css" type="text/css">
</head>
<body>
<script src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js" type="text/javascript"></script>
<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow"><div class="item" href="http://www.reveries-litteraires.fr/2014/04/l-abandon-ecrit-par-peter-rock.html"><img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai/" /> <img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai2/" /> <img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai3/" />
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div>
</div>
</div>
</div>
</body>
</html>

Le rectangle noir chez moi est revenu, mais c'est tout.
Dans "console", toujours les mêmes erreurs.. Smiley sweatdrop

Belle soirée et merci..
En gros, du CSS doit être dans un fichier .css et appelé dans le <head> de ta page HTML. C'est aussi simple que ça.

Ta page n'est pas valide. La balise <p> n'a pas lieu d'être au dessus du Doctype. Ton script doit être dans le <head> .
Voici le code valide :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Reveries litteraires</title>

	<script language="JavaScript" type="text/javascript" src="http://data.over-blog-kiwi.com/0/99/12/22/20140418/ob_bee3d4_contentflow.js"></script>
	<link rel="stylesheet" href="http://data.over-blog-kiwi.com/0/99/12/22/20140419/ob_56b661_contentflow.css" type="text/css">
</head>
<body> 
<div class="ContentFlow">
	<div class="loadIndicator">
		<div class="indicator"></div>
	</div>
	<div class="flow">
		<div class="item">
			<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai/" alt="" /> 
			<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai2/" alt="" /> 
			<img class="item" src="http://img.over-blog-kiwi.com/0/99/12/22/20140418/ob_e0c722_l-abandon.jpg" title="Essai3/" alt="" />
		</div>
		<div class="globalCaption"></div>
		<div class="scrollbar">
			<div class="slider">
				<div class="position"></div>
			</div>
		</div>
	</div>
</div>
</body> 
</html>


Peux-tu tester avec ça?
J'essaie tout de suite.Je suis navrée de ne pas savoir tout ça Smiley confused j'ai pourtant lu des pages, mais je crois que le plus simple n'est pas toujours écrit Smiley confused . Merci Smiley rolleyes
Je me suis donc exécutée.
Chez moi ça ne marche pas : le titre a disparu, et j'ai toujours le rectangle noir. (j'ai vidé le cache et actualisé) Qu'en est-il sur ton écran ?
Pages :