Website components

layout-html

Preview

TWIG


    <!-- base libraries -->
      <script src="//code.jquery.com/jquery.js"></script>
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
      <script src="/assets/bootstrap/dist/js/bootstrap.min.js"></script>
      <script src="/assets/initializr/js/libs/modernizr-2.8.3.min.js"></script>


    <!-- specific libraries -->
      <script src="/assets/js/jquery-plugins/headroom/dist/headroom.js"></script>
      <script src="/assets/js/jquery-plugins/headroom/dist/jQuery.headroom.js"></script>
      <script src="/assets/js/enquire.js/enquire.js"></script>
      <script src="/assets/js/custom/matchmedia.js"></script>
      <script src="/assets/js/dragend.js"></script>
      <script src="/assets/js/jquery-plugins/jquery.lazyload.js"></script>
      <script src="/assets/js/jquery-plugins/writeCapture.js"></script>
      <script src="/assets/js/jquery-plugins/jquery.writeCapture.js"></script>

    <!-- Article : galeries -->
      <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
      <script src="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/js/bootstrap-image-gallery.js"></script>
      <!-- <script src="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/js/demo.js"></script> -->
      <script src="//www.googletagservices.com/tag/js/gpt.js"></script>


      <script src="/assets/js/responsive.js"></script>

      {% if app.is_collapsed %}
        <script src="/assets/js/sidebar.js"></script>
      {% endif %}

<script type="text/javascript">
<!--//--><![CDATA[//><!--

// Here go Bootstrap ENA tools for demo purpose
$(document).ready(function() {

/*=============================================
=            ENA bootstrap demo               =
=============================================*/
  $(function () {
    //  actions //
    $('#switcher-themes select').change(function() {
      $('#switcher-themes').submit();
    });

    $('#switcher-themes input[type=checkbox]').change(function() {
      $('#switcher-themes').submit();
    });

    $('.tree-toggler').click(function () {
      $(this).parent().children('ul.tree').toggle(300);
    });
    $('.nav-tabs').tab();
    $( "iframe.resizable" ).resizable();
    $( "pre.component" ).resizable();

  }); // End demo behaviors onload

/*=============================================
=            ENA live                         =
=============================================*/
  $(function () {

/*==========  Global: Sidebars behavior  ==========*/

    // Toggle buttons & collapsed behaviors
    // Header & sidebars quick return behavior
    $sidebars = $('.sidebar');
    $("header").headroom({
      onUnpin: function() {
       $.each($sidebars, function() {
          $(this).removeClass('sidebar-open'); // make sure sibebar disappear
         /*if($(this).hasClass('sidebar-open')) {
          $(this).removeClass('sidebar-open');
         } */
       });
    }});

/*==========  Global: Sections navigation  ==========*/

    $('#gr-sidenav a').each(
      function() {
          $(this).hover(function() {
             $('.gr-label', $(this)).delay(10).fadeIn();
          },
          function() {
             $('.gr-label', $(this)).delay(10).fadeOut();
          }
        )
      }
    );
    $('#gr-sidenav a').css('display','block')


/*==========  Article: lecture Zen  ==========*/


dummy = '<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"></div></div></div></div>';


  //alert(dummy);

  // toggled = false;
  //
  // $('.article-features-zen-reading').click(
  //       function() {
  //
  //         if(toggled == true) {
  //           $('#gr-zen-modal').fadeOut();
  //           toggled = false;
  //         }
  //
  //         $.get( "/article-zen-reading/{{ app.current_story.id }}", function( data ) {
  //
  //           $('<div/>')
  //             .attr('id', 'gr-zen-modal')
  //            //.addClass('modal-body')
  //           .append('<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body">' + data +  '</div></div></div></div>')
  //
  //           .appendTo('#gr-main-content')
  //           .fadeIn();
  //
  //           toggled = true;
  //        });
  //     }
  //   );

  /*==========  Article: Gallery  ==========*/

  $linksContainer = $('#gr-gallery-thumbnails');

  function doModal(e) {

    e.preventDefault();
    e.stopPropagation();

       $('#blueimp-gallery')
            .data({'useBootstrapModal': !true})
            .toggleClass('blueimp-gallery-controls', true);

        blueimp.Gallery($('a', $linksContainer), $('#blueimp-gallery').data());
  }



  $.getJSON( "/assets/demo-img/results.json", function( data ) {

  $.each(data.gallery, function (index, photo) {

    if(index > 3) {
        return;
    }

    var thumbnail_caption = '<div class="gr-caption"><h4>' + photo.caption_title + '</h4></div>';


    var  baseUrl = photo.url;
    var cont = $('<div/>').addClass('col-xs-6 col-md-3 thumbnail gr-gallery-thumbnail embed-responsive-16by9').append(thumbnail_caption).hover(
         function(){
             $(this).find('.gr-caption').fadeIn(250); //.fadeIn(250)
         },
         function(){
             $(this).find('.gr-caption').fadeOut(250); //.fadeOut(205)
         }
     );   ;

    $('<a/>')
        .append($('<img>').prop('src', photo.url ))
        .prop('href', photo.url )
        .prop('title', photo.title)
        .attr('data-gallery', '')
        .on('click', function() { doModal(event) })
        .appendTo(cont);
        cont.on('click', function() { doModal(event)}).appendTo($linksContainer);
    });
  });

  $('#image-gallery-launch').on('click', function (event) {
      event.preventDefault();
     $('#blueimp-gallery')
          .data({'useBootstrapModal': !true})
          .toggleClass('blueimp-gallery-controls', true);

      blueimp.Gallery($('a', $linksContainer), $('#blueimp-gallery').data());
  });

  $("[rel='tooltip']").tooltip();

   $('.thumbnail').hover(
       function(){
           $(this).find('.gr-caption').fadeIn(250); //.fadeIn(250)
       },
       function(){
           $(this).find('.gr-caption').fadeOut(250); //.fadeOut(205)
       }
   );

  /*==========  Global: Ads  ==========*/

 var ads_html = "<div><h1><script>document.write('<h1>ADS HERE !!!!!</h1>')</script></div>";

  //$('<div/>').html(ads_html).addClass('gr-ads gr-ads-horizontal-top').prependTo('#gr-main-content');
  //$('<div/>').html(ads_html).addClass('gr-ads gr-ads-rectangle-top').prependTo('#gr-aside-content');
 $('<div/>').prependTo('#ena #gr-main-content')
    .attr('id', 'rossel-leader-2')
    .addClass('adunit gr-ads gr-ads-horizontal-top')
    .writeCapture()
    .html('<script>googletag.display(\'rossel-leader-2\');</script>');
 $('<div/>').prependTo('#ena #gr-aside-content')
    .attr('id', 'rossel-mbanner')
    .addClass('adunit gr-ads gr-ads-rectangle-top')
    .writeCapture()
    .html('<script>googletag.display(\'rossel-mbanner\');</script>');

  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  //(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    gads.src = 'http://www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    //googletag.defineOutOfPageSlot('/81985301/LESOIR/web/ict/', 'rossel-oop-1').addService(googletag.pubads());
 googletag.cmd.push(function() {
     googletag.defineSlot('/81985301/LESOIR/web/homepage', [[728, 90], [840, 150], [840, 250], [970, 250], [995, 123]], 'rossel-leader-2').addService(googletag.pubads());
    googletag.defineSlot('/81985301/LESOIR/web/homepage', [300, 250], 'rossel-mbanner').addService(googletag.pubads());


        googletag.pubads().setTargeting("dnraf","raf");
        googletag.pubads().setTargeting("dn",'www.lesoir.be');
        googletag.pubads().setTargeting("nt",dataLayer[0]["nodetype"]);
        googletag.pubads().setTargeting("p1",dataLayer[0]["path"]);
        googletag.pubads().setTargeting("aid",dataLayer[0]["nodeid"]);
        googletag.pubads().setTargeting("pid",dataLayer[0]["termid"]);
        googletag.pubads().setTargeting("lg", "FR");
        googletag.pubads().setTargeting("keywords", [""]);
        googletag.pubads().setTargeting("region", "");
        googletag.pubads().setTargeting("ville", "");

    googletag.pubads().enableSyncRendering();
    googletag.enableServices();

  });
//})();



  // DragEnd
 // placeholder = {};
 // var sections = ['la_une', 'economie', 'monde', 'sports'];
 // jQuery.addObject('dragends', placeholder);
/*
  $('.une-bis').dragend({

      minTouchDistance  : "60",
      keyboardNavigation: true,
      pageClass         : "dragend-page",
      afterInitialize    : function() {
      },

      onSwipeEnd: function() {
        $('#gr-current-section').html('section name');
        console.info($(this)['container']);
      }

    });
*/
  // dragend

  // lazy load
  //$("img.imagecache").lazyload();


/*  var firstChild = $("#gr-main-content div:first-child").clone(),
            lastChild  = $("#gr-main-content div:last-child").clone(),
            container  = $("#gr-main-content");

        firstChild.appendTo(container);
        lastChild.prependTo(container);

        $("#gr-main-content").dragend({
          jumpToPage: 2,
          onSwipeEnd: function() {
            var first = this.pages[0],
                last = this.pages[this.pages.length - 1];

            if (first === this.activeElement) {
              this.jumpToPage(this.pages.length - 1 );
            }

            if (last === this.activeElement) {
              this.jumpToPage(2);
            }

          },
          afterInitialize: function() {
            this.container.style.visibility = "visible";
          }
        }); */
          //mm();
/*=============================================
=            End of ENA live                  =
=============================================*/

        }); /*-----  End main execution  ------*/



  }); /*-----  End main onload event  ------*/



//--><!]]>
</script>

HTML

TWIG

  <!-- Bootstrap -->
  <!-- For global overrides -->
  <link href="/themes/bootstrap-overrides.css" rel="stylesheet" media="screen">
  <!-- For sites specific overrides -->
  <link href="/themes/{{ current_theme }}/main.css" rel="stylesheet" media="screen">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

{% if app.is_collapsed %}
    <link href="/assets/css/sidebar.css" rel="stylesheet" media="screen">
{% endif %}

  <!-- [[ External modules ]] -->
  <!-- [[ Galeries - Niveau article - source https://github.com/blueimp/Bootstrap-Image-Gallery ]] -->
  <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
  <link rel="stylesheet" href="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/css/bootstrap-image-gallery.css">
  <link rel="stylesheet" href="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/css/demo.css">

header

Preview

HTML

<!--
<div class="gr-ads gr-ads-leaderboard-top">
	<img src="/assets/ads/leaderboard2.jpg" />
</div>
-->

<header id="gr-header" class="navbar-inverse">

	<div id="gr-navbar-header" class="navbar-header">
		<div class="navbar-header-content">
			<div id="gr-services-button" class="gr-header-link">
				<a href="#" title="Menu" class="navbar-toggle toggle-left" data-toggle="sidebar" data-target=".gr-navbar-collapse-services">
					<span class="top"></span>
					<span class="middle"></span>
					<span class="bottom"></span>
					<strong class="ls-menu-button">menu</strong>
				</a>
			</div>
		
		<!--
			<div id="gr-le-journal" class="gr-header-link">
				<a href="#" title="Le journal">
					<span class="fa fa-file-text-o"></span>
					<span class="subtitle">Le journal</span>
				</a>
			</div>

			<div id="gr-archives" class="gr-header-link">
				<a href="#" title="Archives">
					<span class="fa fa-folder-o"></span>
					<span class="subtitle">Dossiers</span>
				</a>
			</div>
		-->
			
			<div class="wrapper-gr-login">
			
				<div class="gr-top-menu">
					<ul>
						<li><a href="/page/12-clics">Concours</a></li>
						<li><a href="/page/12-clics">Sudinfo.be</a></li>
						<li><a href="/page/dossiers">Club abo</a></li>
					</ul>
				</div>
				
				<div class="gr-login-box">
					<div id="gr-login" >
													<a href="/page/ena-paywall/login?ref=">
								<span class="subtitle">S'identifier</span>
							</a>
							<a class="hidden-xs hidden-sm" href="/page/ena-paywall/login?ref=">
								S'identifier
							</a>
							<span class="hidden-xs hidden-sm">|</span><a class="hidden-xs hidden-sm" href="/page/ena-paywall/register?ref=">
								S'inscrire
							</a>
											</div>
				</div>
			</div>
			
			<form  id="gr-location">
				<div>
					<input type="text" class="form-text" value="7000">
					<input class="location-submit" type="submit" value="&#xe00b;">
				</div>
			</form>

			<form action="/search" method="post" id="gr-search-menu">
				<div>
					<input type="text" class="form-text form-control" placeholder="Rechercher">
					<input class="search-submit" type="submit" value="&#xe026;">
				</div>
			</form>

			<!--
			<div class="gr-header-link facebook">
				<a href="#" title="Facebook">
					<span class="facebook"></span>
					<span class="subtitle">Facebook</span>
				</a>
			</div>
			
			<div class="gr-header-link twitter">
				<a href="#" title="Twitter">
					<span class="twitter"></span>
					<span class="subtitle">Twitter</span>
				</a>
			</div>
			-->

		<!--
			<div id="gr-meteo-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Météo">
					<span class="icon-suncloud" aria-hidden="true"></span>
					<span class="subtitle">Météo</span>
				</a>

				<div class="dropdown-menu" role="menu" aria-labelledby="gr-meteo-menu">
					<div>
						<ul>
							<li class="gr-meteo-now">BRUXELLES&nbsp;&nbsp;<span class="gr-meteo-sun"><span class="icon-sun"></span>Jeu 17°</span></li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Ven 17°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Sam 15°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Dim 16°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Lun 15°</li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Mar 14°</li>
							<li class="gr-meteo-cloud"><span class="icon-cloud"></span>Mer 11°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Jeu 13°</li>
						</ul>
					</div>
				</div>
			</div>
			-->
			<div class="gr-navbar-header-center">
				<a id="logo" class="navbar-brand lameuse" rel="home" href="/page/actu" title="">
					<!--[if gte IE 9]><!-->
					<img alt="La Meuse" src="/assets/img/sudinfo.svg#lameuse"/>
					<!--<![endif]-->
					<!--[if lt IE 9]>
					<img src="/assets/css/ui-images/site-logo.png" />
					<![endif]-->
					<strong class="gr-sp-edition">Huy-Waremme</strong>
				</a>
			
						</div>
		</div>
		
		
		<ul id="gr-sections-plus-top" class="nav navbar-nav">
				
							<li><a href="/page/sports">Sport</a></li>
							<li><a href="/page/une-graphic">Une graphic</a></li>
							<li><a href="/page/belgique">Une bis</a></li>
							<li><a href="/page/une-topic">Une topic</a></li>
							<li><a href="/page/une-dossier">Une dossier</a></li>
							<li><a href="/page/une-event">Une Event</a></li>
							<li><a href="/page/une-event-graphic">Une event graphic</a></li>
							<li><a href="/page/une-event-dossier">Une event dossier</a></li>
							<li><a href="/page/12-clics">Grave accident</a></li>
						
			<li><a href="#" class="active">Faits divers</a></li>
		</ul>
		
	</div>

	
	<nav id="gr-main-nav" class="navbar-wrapper" role="navigation">
		<div id="gr-main-nav-content">
			<div class="collapse navbar-collapse gr-navbar-collapse-services sidebar sidebar-left">
				<ul id="gr-main-menu"  class="nav nav-justified">
																																					<li>
															<a href="/page/belgique">Belgique</a>
															</li>
																																<li>
															<a href="/page/economie">Économie</a>
															</li>
																																<li>
															<a href="/page/monde">Monde</a>
															</li>
																																<li>
															<a href="/page/sports">Sports</a>
															</li>
																																<li>
															<a href="/page/culture">Culture</a>
															</li>
																																<li>
															<a href="/page/debats">Opinions</a>
															</li>
																																<li>
															<a href="/page/styles">Styles</a>
															</li>
																																<li>
															<a href="/page/blogs">Technos et médias</a>
															</li>
																																<li>
															<a href="/page/index-journalistes">Journalistes</a>
															</li>
																																<li class="expanded">
															<a href="/page/le_studio">Le studio</a>
																	<span class="btn-nav"></span>
									<ul class="nav">
																																																																			<li>
																									<a href="/page/belgique">Belgique</a>
																									</li>
																																																									<li>
																									<a href="/page/economie">Économie</a>
																									</li>
																																																									<li>
																									<a href="/page/monde">Monde</a>
																									</li>
																																																									<li>
																									<a href="/page/sports">Sports</a>
																									</li>
																																																									<li>
																									<a href="/page/culture">Culture</a>
																									</li>
																																																									<li>
																									<a href="/page/debats">Opinions</a>
																									</li>
																																																									<li>
																									<a href="/page/styles">Styles</a>
																									</li>
																																																									<li>
																									<a href="/page/blogs">Technos et médias</a>
																									</li>
																																																									<li>
																									<a href="/page/index-journalistes">Journalistes</a>
																									</li>
																																																									<li class="expanded">
																									<a href="/page/le_studio">Le studio</a>
																											<span class="btn-nav"></span>
														<ul class="nav">
																																																																															<li>
																		<a href="/page/belgique">Belgique</a>
																	</li>
																																																																<li>
																		<a href="/page/economie">Économie</a>
																	</li>
																																																																<li>
																		<a href="/page/monde">Monde</a>
																	</li>
																																																																<li>
																		<a href="/page/sports">Sports</a>
																	</li>
																																																																<li>
																		<a href="/page/culture">Culture</a>
																	</li>
																																																																<li>
																		<a href="/page/debats">Opinions</a>
																	</li>
																																																																<li>
																		<a href="/page/styles">Styles</a>
																	</li>
																																																																<li>
																		<a href="/page/blogs">Technos et médias</a>
																	</li>
																																																																<li>
																		<a href="/page/index-journalistes">Journalistes</a>
																	</li>
																																																																<li>
																		<a href="/page/le_studio">Le studio</a>
																	</li>
																																													</ul>
																									</li>
																														</ul>
															</li>
															</ul>
			</div>
		</div>
	</nav>


</header>



TWIG

{% if app.is_collapsed %}
{% set data_toggle = 'sidebar' %}
{% else %}
{% set data_toggle = 'sidebar' %}
{% endif %}

<div class="gr-ads gr-ads-leaderboard-top">
	<img src="/assets/ads/leaderboard2.jpg" />
</div>

<header id="gr-header" class="navbar-inverse">

	<div id="gr-navbar-header" class="navbar-header">
		<div class="navbar-header-content">
			<div id="gr-services-button" class="gr-header-link">
				<a href="#" title="Menu" class="navbar-toggle toggle-left" data-toggle="{{ data_toggle }}" data-target=".gr-navbar-collapse-services">
					<span class="top"></span>
					<span class="middle"></span>
					<span class="bottom"></span>
					<strong class="ls-menu-button">menu</strong>
				</a>
			</div>

		<!--
			<div id="gr-le-journal" class="gr-header-link">
				<a href="#" title="Le journal">
					<span class="fa fa-file-text-o"></span>
					<span class="subtitle">Le journal</span>^
				</a>
			</div>

			<div id="gr-archives" class="gr-header-link">
				<a href="#" title="Archives">
					<span class="fa fa-folder-o"></span>
					<span class="subtitle">Dossiers</span>
				</a>
			</div>
		-->

			<div class="wrapper-gr-login">

				<div class="gr-top-menu">
					<ul>
						<li><a href="/page/12-clics">Concours</a></li>
						<li><a href="/page/12-clics">Sudinfo.be</a></li>
						<li><a href="/page/dossiers">Club abo</a></li>
					</ul>
				</div>

				<div class="gr-login-box">
					<div id="gr-login" {% if user.is_logged == 1 %}class="logged"{% endif %}>
						{% if user.is_logged == 1 %}
							<button id="gr-login-button" type="button" class="navbar-toggle toggle-right" data-toggle="{{ data_toggle }}" data-target=".gr-navbar-collapse-login">
								<span class="subtitle">Paramètres</span>
								<span class="hello-user">Bonjour M. Zeldman</span>
							</button>
						{% else %}
							<a href="{{ app.website.paywall.loginurl }}?ref={{ app.current_url|url_encode }}">
								<span class="subtitle">S'identifier</span>
							</a>
							<a class="hidden-xs hidden-sm" href="{{ app.website.paywall.loginurl }}?ref={{ app.current_url|url_encode }}">
								{{ app.website.paywall.lang.sign_in }}
							</a>
							<span class="hidden-xs hidden-sm">|</span><a class="hidden-xs hidden-sm" href="{{ app.website.paywall.registerurl }}?ref={{ app.current_url|url_encode }}">
								{{ app.website.paywall.lang.sign_up }}
							</a>
						{% endif %}
					</div>
				</div>
			</div>

			<form  id="gr-location">
				<div>
					<input type="text" class="form-text" value="7000">
					<input class="location-submit" type="submit" value="&#xe00b;">
				</div>
			</form>

			<form action="/search" method="post" id="gr-search-menu">
				<div>
					<input type="text" class="form-text form-control" placeholder="Rechercher">
					<!--[if gte IE 7]><span class="ie"><![endif]--><input class="search-submit" type="submit" value="&#xe026;"><!--[if gte IE 7]></span><![endif]-->
				</div>
			</form>

			<!--
			<div class="gr-header-link facebook">
				<a href="#" title="Facebook">
					<span class="facebook"></span>
					<span class="subtitle">Facebook</span>
				</a>
			</div>

			<div class="gr-header-link twitter">
				<a href="#" title="Twitter">
					<span class="twitter"></span>
					<span class="subtitle">Twitter</span>
				</a>
			</div>
			-->

		<!--
			<div id="gr-meteo-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Météo">
					<span class="icon-suncloud" aria-hidden="true"></span>
					<span class="subtitle">Météo</span>
				</a>

				<div class="dropdown-menu" role="menu" aria-labelledby="gr-meteo-menu">
					<div>
						<ul>
							<li class="gr-meteo-now">BRUXELLES&nbsp;&nbsp;<span class="gr-meteo-sun"><span class="icon-sun"></span>Jeu 17°</span></li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Ven 17°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Sam 15°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Dim 16°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Lun 15°</li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Mar 14°</li>
							<li class="gr-meteo-cloud"><span class="icon-cloud"></span>Mer 11°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Jeu 13°</li>
						</ul>
					</div>
				</div>
			</div>
			-->
			<div class="gr-navbar-header-center">
				<a id="logo" class="navbar-brand lameuse" rel="home" href="{{ app.website.homepageurl }}" title="{{ app.switcher.website.lesoir.label }}">
					<!--[if gte IE 9]><!-->
					<img alt="La Meuse" src="/assets/img/sudinfo.svg#lameuse"/>
					<!--<![endif]-->
					<!--[if lt IE 9]>
					<img src="/assets/css/ui-images/site-logo.png" />
					<![endif]-->
					<strong class="gr-sp-edition">Huy-Waremme</strong>
				</a>

			{% if not is_home and not is_article and not is_sport  %}
				{% set tempvar = 0 %}
				{%  if sectionsnav == 1 %}{% set tempvar = 1 %}{% endif %}
				{% include app.features_path ~ '/breadcrumbs/breadcrumbs.html.twig' with { 'sidebartop' : tempvar } %}
			{% endif %}
			</div>
		</div>

		<ul class="gr-custom-sections-plus-top-to-inject hidden">
			<li><a href="#test1">Test 1</a></li>
			<li><a href="#test2">Test 2</a></li>
			<li><a href="#test3">Test 3</a></li>
		</ul>

		<ul id="gr-sections-plus-top" class="nav navbar-nav">

			{% for i in app.website['sections-plus'] %}
				{% if loop.first or loop.last %}
					<li class="has-submenu">
						<a href="{{ i.url }}">{{ i.label }}</a>
						<ul class="submenu">
							<li><a href="#link-1">super very long link</a></li>
							<li><a href="#link-2">a second long link to test the position</a></li>
							<li><a href="#link-3">link 3</a></li>
							<li><a href="#link-3">link 3</a></li>
							<li><a href="#link-3">link 3</a></li>
							<li><a href="#link-3">link 3</a></li>
						</ul>
					</li>
				{% else %}
					<li><a href="{{ i.url }}">{{ i.label }}</a></li>
				{% endif %}
			{% endfor %}

			<li><a href="#" {% if not is_home %}class="active"{% endif %}>Faits divers</a></li>
		</ul>

	</div>

	{% if user.is_logged == 1 %}
		<nav id="gr-account-infos" class="navbar-wrapper" role="navigation">
			<div class="collapse navbar-collapse gr-navbar-collapse-login sidebar sidebar-right">
				<ul class="nav navbar-nav">
					<li><h4><a href="#"><span class="label label-default" style="font-weight:normal"><span class="fa fa-user"></span> Bonjour M. Zeldman</span></a></h4></li>
					<li class="dropdown">
						<ul class="dropdown-menu">
							<li><a href="#">Mon compte<span class="fa fa-cog pull-right"></span></a></li>
							<li><a href="#">Newsletters <span class="fa fa-envelope pull-right"></span></a></li>
							<li><a href="#">Club du Soir <span class="fa fa-tower pull-right"></span></a></li>
							<li><a href="#">Contacts <span class="fa fa-list-alt pull-right"></span></a></li>
							<li><a href="/clear/user">Déconnexion <span class="fa fa-log-out pull-right"></span></a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
	{% endif %}

	<nav id="gr-main-nav" class="navbar-wrapper" role="navigation">
		<div id="gr-main-nav-content">
			<div class="collapse navbar-collapse gr-navbar-collapse-services sidebar sidebar-left">
				<ul id="gr-main-menu"  class="nav nav-justified">
					{% for i in app.website.sections %}
						{% if not loop.first %}
							{% if loop.last %}
								<li class="expanded">
							{% else %}
								<li>
							{% endif %}
								<a href="{{ i.url }}">{% if loop.first %}<span class="fa fa-home"></span>{% endif %}{{ i.label }}</a>
								{% if loop.last %}
									<span class="btn-nav"></span>
									<ul class="nav">
										{% for i in app.website.sections %}
											{% if not loop.first %}
												{% if loop.last %}
													<li class="expanded">
												{% else %}
													<li>
												{% endif %}
													<a href="{{ i.url }}">{% if loop.first %}<span class="fa fa-home"></span>{% endif %}{{ i.label }}</a>
													{% if loop.last %}
														<span class="btn-nav"></span>
														<ul class="nav">
															{% for i in app.website.sections %}
																{% if not loop.first %}
																	<li>
																		<a href="{{ i.url }}">{% if loop.first %}<span class="fa fa-home"></span>{% endif %}{{ i.label }}</a>
																	</li>
																{% endif %}
															{% endfor %}
														</ul>
													{% endif %}
												</li>
											{% endif %}
										{% endfor %}
									</ul>
								{% endif %}
							</li>
						{% endif %}
					{% endfor %}
				</ul>
			</div>
		</div>
	</nav>


</header>


{#
<ul id="gr-sections-plus" class="nav navbar-nav navbar-right">
{% for i in app.website.sections_plus %}
	<li><a {{ lejournal|raw }}href="{{ i.url }}">{{ i.label }}</a></li>
{% endfor %}
</ul>
#}

TWIG

{% if app.is_collapsed %}
{% set data_toggle = 'sidebar' %}
{% else %}
{% set data_toggle = 'sidebar' %}
{% endif %}
{#<div class="gr-ads gr-ads-leaderboard-top">
	<img src="/assets/ads/leaderboard2.jpg" />
</div>
#}
<header id="gr-header" class="navbar-inverse gr-header-partners">

	<div id="gr-navbar-header" class="navbar-header">
		<div class="navbar-header-content">
			<div id="gr-services-button" class="gr-header-link">
				<a href="http://www.lesoir.be" title="Menu" class="navbar-toggle toggle-left">
					<span class="ls-menu-button">Retour vers lesoir.be</span>
				</a>
			</div>
		
			<div id="gr-le-journal" class="gr-header-link">
				<a href="#" title="Le journal">
					<span class="subtitle">Le journal</span>
				</a>
			</div>

			<div id="gr-archives" class="gr-header-link">
				<a href="#" title="Archives">
					<span class="subtitle">Dossiers</span>
				</a>
			</div>
			
			<div id="gr-search-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Recherche">
					<span class="subtitle">Archives</span>
				</a>

				<form class="dropdown-menu" role="menu" aria-labelledby="gr-search-menu">
					<div>
						<input type="text" class="form-text">
						<input class="search-submit" type="submit" value="Rechercher">
					</div>
				</form>

			</div>

			<div id="gr-meteo-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Météo">
					<span class="icon-suncloud" aria-hidden="true"></span>
					<span class="subtitle">Météo</span>
				</a>

				<div class="dropdown-menu" role="menu" aria-labelledby="gr-meteo-menu">
					<div>
						<ul>
							<li class="gr-meteo-now">BRUXELLES&nbsp;&nbsp;<span class="gr-meteo-sun"><span class="icon-sun"></span>Jeu 17°</span></li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Ven 17°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Sam 15°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Dim 16°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Lun 15°</li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Mar 14°</li>
							<li class="gr-meteo-cloud"><span class="icon-cloud"></span>Mer 11°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Jeu 13°</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="gr-navbar-header-center">
				<a id="logo" class="navbar-brand" rel="home" href="{{ app.website.homepageurl }}" title="{{ app.switcher.website.lesoir.label }}">
					<!--[if gte IE 9]><!-->
					<img src="/assets/css/ui-images/site-logo.svg#lesoir" data-fallback="/assets/css/ui-images/site-logo.png" onerror="this.src=this.getAttribute('data-fallback');this.onerror=null;" />
					<!--<![endif]-->
					<!--[if lt IE 9]>
					<img src="/assets/css/ui-images/site-logo.png" />
					<![endif]-->
				</a>
			</div>
		</div>
	</div>
</header>

.JS

/**
 * 	Header JS file :;
 *	Description:;
 */

TWIG

<header id="gr-header" class="navbar-inverse gr-header-small">

	<div id="gr-navbar-header" class="navbar-header">
		<div class="navbar-header-content">
			<div id="gr-services-button" class="gr-header-link gr-back-to-paid">
				<a href="http://plus.lesoir.be" title="Menu" data-toggle="tooltip" data-placement="right" rel="tooltip" title="Accédez à votre espace abonné">
					<span class="ls-menu-button">Retour vers Le Soir+</span>
				</a>
			</div>

			<div id="gr-archives" class="gr-header-link">
				<a href="#" title="Archives">
					<span class="subtitle">Dossiers</span>
				</a>
			</div>
			<div id="gr-le-journal" class="gr-header-link">
				<a href="#" title="Le journal">
					<span class="subtitle">Le journal</span>
				</a>
			</div>
		<!--
			<div id="gr-search-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Recherche">
					<span class="subtitle">Archives</span>
				</a>

				<form class="dropdown-menu" role="menu" aria-labelledby="gr-search-menu">
					<div>
						<input type="text" class="form-text">
						<input class="search-submit" type="submit" value="Rechercher">
					</div>
				</form>

			</div>

			<div id="gr-meteo-menu" class="dropdown gr-header-link">
				<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" href="http://ena-dev-master.lesoir.be:8083/sections/dossiers" title="Météo">
					<span class="icon-suncloud" aria-hidden="true"></span>
					<span class="subtitle">Météo</span>
				</a>

				<div class="dropdown-menu" role="menu" aria-labelledby="gr-meteo-menu">
					<div>
						<ul>
							<li class="gr-meteo-now">BRUXELLES&nbsp;&nbsp;<span class="gr-meteo-sun"><span class="icon-sun"></span>Jeu 17°</span></li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Ven 17°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Sam 15°</li>
							<li class="gr-meteo-sun"><span class="icon-suncloud"></span>Dim 16°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Lun 15°</li>
							<li class="gr-meteo-sun"><span class="icon-sun"></span>Mar 14°</li>
							<li class="gr-meteo-cloud"><span class="icon-cloud"></span>Mer 11°</li>
							<li class="gr-meteo-cloud"><span class="icon-rain"></span>Jeu 13°</li>
						</ul>
					</div>
				</div>
			</div>
		-->

		<div class="gr-navbar-header-center">
			<a id="logo" class="navbar-brand" rel="home" href="{{ app.website.homepageurl }}" title="{{ app.switcher.website.lesoir.label }}">
				<!--[if gte IE 9]><!-->
				<img src="/assets/css/ui-images/site-logo.svg#lesoir" data-fallback="/assets/css/ui-images/site-logo.png" onerror="this.src=this.getAttribute('data-fallback');this.onerror=null;" />
				<!--<![endif]-->
					<!--[if lt IE 9]>
					<img src="/assets/css/ui-images/site-logo.png" />
					<![endif]-->
				</a>
			</div>

			<div class="wrapper-gr-login">
				<!-- esi url: http://plus.lesoir.be/esi/panels_pane/enabootstrap_lesoir%3A2%3A13/c2VjdGlvbi8y/CACHE%3DUSER --><!-- ESI pane with content --><!-- printed from panels_pane.tpl.php -->
				<div id="gr-login" class="logged gr-header-link"><button id="gr-login-button" class="navbar-toggle toggle-right" data-target=".gr-navbar-collapse-login" data-toggle="sidebar" type="button"><span class="fa fa-user"></span>
					<span class="subtitle">Compte</span>
					<span class="hello-user">Bonjour M.REDACTION - INTERNET</span>
				</button>
			</div>
			<!-- / panels_pane.tpl.php -->

		</div>
	</div>
</div>
</header>

.LESS

/**
 * 	Header LESS file :;
 *	Description:;
 */

CSS

/**
 * 	Header css file :;
	Description:;
 */
 

articles-list-most-viewed

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--most-viewed">
	<div class="panel-heading">Les plus consultés</div>
    <ul class="list-group">
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/1">Test</a>
            </h4>
        </li>
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/2">Les syndicats annoncent une grève générale le 15 décembre</a>
            </h4>
        </li>
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/3">Affaire Francken: «Des foutaises» pour Bart De Wever</a>
            </h4>
        </li>

        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/4">U2: «Pardon d’avoir envahi votre iPhone»</a>
            </h4>
        </li>
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/5">«Le monde est en train de perdre la course contre Ebola», selon l’ONU</a>
            </h4>
        </li>
    </ul>
</div>

articles-list-section

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--section accroche-section">
	<div class="panel-heading"><span>Hockey sur Gazon</span></div>
    <ul class="list-group">
        <li class="list-group-item">
        {% set n2 = random(9) %}
    	{% set imgSrc = '/assets/img/n2/' ~ n2 ~ '.jpg' %}
					<p><a href="#" ><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a></p>
					<div class="media-body">
						<p class="gr-meta">Cyclisme</p>
						<h4 class="media-heading ">
								<a href="/node/1">«Le monde est en train de perdre la course contre Ebola», selon l’ONU</a>
						</h4>
					</div>
        </li>
        <li class="list-group-item">
					<p><a href="#" ><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a></p>
					<div class="media-body">
						<p class="gr-meta">Tennis</p>
						<h4 class="media-heading ">
								<a href="/node/2">Les syndicats annoncent une grève générale le 15 décembre</a>
						</h4>
					</div>
        </li>
        <li class="list-group-item">
           <p><a href="#" ><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a></p>
           <div class="media-body">
           	<p class="gr-meta">Football</p>
            <h4 class="media-heading ">
                <a href="/node/3">Affaire Francken: «Des foutaises» pour Bart De Wever</a>
            </h4>
					</div>
        </li>
    </ul>
    <p class="gr-more"><a href="">Plus de sports</a></p>
</div>

article-media-video-youtube

Preview

HTML

<div class="gr-media gr-media--16_9 gr-media--video gr-media--youtube">
    <iframe class="gr-media__content" src="http://www.youtube.com/embed/5nBr4Ki7Zqs?html5=1" frameborder="0" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--video gr-media--youtube">
    <iframe class="gr-media__content" src="http://www.youtube.com/embed/5nBr4Ki7Zqs?html5=1" frameborder="0" allowfullscreen=""></iframe>
</div>

TWIG

<div class="gr-media gr-media--video gr-media--youtube">
    <iframe class="gr-media__content" src="http://www.youtube.com/embed/5nBr4Ki7Zqs?html5=1" frameborder="0" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--video gr-media--4_3 gr-media--youtube">
    <iframe class="gr-media__content" src="http://www.youtube.com/embed/5nBr4Ki7Zqs?html5=1" frameborder="0" allowfullscreen=""></iframe>
</div>

article-media-ustream

Preview

TWIG

<div class="gr-media gr-media--16_9 gr-media--ustream">
	<iframe class="gr-media__content" src="http://www.ustream.tv/embed/385286?v=3&amp;wmode=direct" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<span class="fa fa-video-camera"></span>
		UStream est indisponible
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--ustream">
	<iframe class="gr-media__content" src="http://www.ustream.tv/embed/385286?v=3&amp;wmode=direct" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<span class="fa fa-video-camera"></span>
		UStream est indisponible
	</div>
</div>

HTML

<div class="gr-media gr-media--16_9 gr-media--ustream">
	<iframe class="gr-media__content" src="http://www.ustream.tv/embed/385286?v=3&amp;wmode=direct" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<span class="fa fa-video-camera"></span>
		UStream est indisponible
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--ustream">
	<iframe class="gr-media__content" src="http://www.ustream.tv/embed/385286?v=3&amp;wmode=direct" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<span class="fa fa-video-camera"></span>
		UStream est indisponible
	</div>
</div>

overlay-edition

Preview

TWIG

<div class="gr-popup-paywall-wrap">
  <div class="gr-popup-paywall gr-editions">
        <div class="paywall_close">
          <i class="fa fa-times"></i>
        </div>

        <div class="row-top">
			<h4>
				Vous être sur le point de découvrir le nouveau site
			</h4>
			<div class="paywall-logo">
			    <img alt="La Meuse" src="/assets/img/sudinfo.svg#lameuse">
			</div>
			<p>
				Choisissez votre région/édition préférée
			</p>
			<div>
        		<a href="[ENA:ena_replica_url_LIEGE]" class="btn">Liège</a>
                <a href="[ENA:ena_replica_url_HUY]" class="btn">Huy-Waremme</a>
                <a href="[ENA:ena_replica_url_NAMUR]" class="btn">Namur</a>
                <a href="[ENA:ena_replica_url_VERVIERS]" class="btn">Verviers</a>
                <a href="[ENA:ena_replica_url_BASSE-MEUSE]" class="btn">Basse-Meuse</a>
        	</div>
			<small>
				Accessible gratuitement sur simple inscription
			</small>
		</div>
  </div>
  <div class="white_overlay">&nbsp;</div>
</div>

article-media-slideshare

Preview

HTML

<div class="gr-media gr-media--16_9 gr-media--slideshare">
	<!-- <iframe class="gr-media__content" src="http://www.slideshare.net/slideshow/embed_code/17794228" frameborder="0"></iframe> -->
	<iframe class="gr-media__content" src="http://www.slideshare.net/slideshow/embed_code/14778403" frameborder="0"></iframe>
	<!--div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="fa fa-eye"></span>Voir la vue optimisée
		</a>
	</div-->
</div>

<div class="gr-media gr-media--4_3 gr-media--slideshare">
	<iframe class="gr-media__content" src="http://www.slideshare.net/slideshow/embed_code/14778403" frameborder="0"></iframe>
	<!--div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="fa fa-eye"></span>Voir la vue optimisée
		</a>
	</div-->
</div>

TWIG

<div class="gr-media gr-media--16_9 gr-media--slideshare">
	<!-- <iframe class="gr-media__content" src="http://www.slideshare.net/slideshow/embed_code/17794228" frameborder="0"></iframe> -->
	<iframe class="gr-media__content" src="http://www.slideshare.net/redacsel/picque" frameborder="0"></iframe>
	<!--div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="fa fa-eye"></span>Voir la vue optimisée
		</a>
	</div-->
</div>

<div class="gr-media gr-media--4_3 gr-media--slideshare">
	<iframe class="gr-media__content" src="http://www.slideshare.net/slideshow/embed_code/17794228" frameborder="0"></iframe>
	<!--div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="fa fa-eye"></span>Voir la vue optimisée
		</a>
	</div-->
</div>

articles-list-sport

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--section accroche-sports">
	<div class="panel-heading"><span>Sports</span></div>
    <ul class="list-group">
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/1">«Le monde est en train de perdre la course contre Ebola», selon l’ONU</a>
            </h4>
        </li>
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel-25.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/2">Les syndicats annoncent une grève générale le 15 décembre</a>
            </h4>
        </li>
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel-15.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/3">Affaire Francken: «Des foutaises» pour Bart De Wever</a>
            </h4>
        </li>
    </ul>
</div>

articles-list-most-commented

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--most-commented">
    <div class="panel-heading">Les plus commentés</div>
    <ul class="list-group">
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/2">Les syndicats annoncent une grève générale le 15 décembre</a>
            </h4>
        </li>

        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/node/11">Décès de Garcia Marquez: la Colombie décrète un deuil national de trois jours</a>
            </h4>
        </li>

        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/content/plus-de-600-taxis-ont-manifesté-à-bruxelles-contre-uber">Plus de 600 taxis ont manifesté à Bruxelles contre Uber</a>
            </h4>
        </li>

        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/content/le-salon-batibouw-ouvre-ses-portes-aux-professionnels">Le salon Batibouw ouvre ses portes aux professionnels</a>
            </h4>
        </li>
        <li class="list-group-item">
            <h4 class="media-heading ">
                <a href="/content/nigeria-attaque-du-bus-de-la-principale-équipe-de-foot">Nigeria: attaque du bus de la principale équipe de foot</a>
            </h4>
        </li>
    </ul>
</div>

articles-portraits

Preview

TWIG

{% if not title %}
  {% set title = "Portrait" %}
  
  {% set n2 = random(9) %}
  {% set imgSrc = '/assets/img/n2/' ~ n2 ~ '.jpg' %}
{% endif %}
<div class="panel panel-default gr-panel gr-panel--chronique">
  <div class="panel-heading">{{ title }}</div>
  <ul class="media-list">
   {% for i in app.dummy_content.dummy_stories|slice(0, 1) %}
   <li class="list-group-item media">

    <div class="media-heading">
      <span class="meta">Zizou</span>
      <h4><a href="{{ i.url }}">{{ i.title }}</a></h4>
      </div>
      <a href="#"><img class="media-object lazy" data-original="{{ imgSrc }}"></a>
    </li>
    {% endfor %}
  </ul>
</div>

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel-section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <p><a href="{{ i.url }}">{{ i.title }}</a></p>
        <p>Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

HTML

  <div class="panel panel-default gr-panel gr-panel--reportage" data-ena-type="articles-list-accroche-photo">
  <div class="panel-heading">Reportage</div>
  <ul class="media-list">
     </ul>
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

article-media-facebook

Preview

HTML

<div class="gr-media gr-media--facebook">
	<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="100%"></div>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<a class="gr-media__placeholder-link" href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" target="_blank">
			<span class="fa fa-facebook-square fa-2x"></span>Voir la vue optimisée
		</a>
	</div>

</div>

<div class="gr-media gr-media--facebook">
	<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="100%"></div>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<a class="gr-media__placeholder-link" href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" target="_blank">
			<span class="fa fa-facebook-square fa-2x"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&appId=1009728159055743&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

TWIG

<div class="gr-media gr-media--facebook">
	<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="100%"></div>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<a class="gr-media__placeholder-link" href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" target="_blank">
			<span class="fa fa-facebook"></span>Voir la vue optimisée
		</a>
	</div>

</div>

<div class="gr-media gr-media--facebook">
	<div class="fb-post" data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" data-width="100%"></div>
	<div class="gr-media__placeholder gr-media__placeholder--warning">
		<a class="gr-media__placeholder-link" href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553" target="_blank">
			<span class="fa fa-facebook"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&appId=1009728159055743&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

article-media-video-vimeo

Preview

HTML

<div class="gr-media gr-media--16_9 gr-media--video gr-media--vimeo">
    <iframe class="gr-media__content" src="http://player.vimeo.com/video/18352872" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--video gr-media--vimeo">
    <iframe class="gr-media__content" src="http://player.vimeo.com/video/18352872" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

TWIG

<div class="gr-media gr-media--video gr-media--vimeo">
    <iframe class="gr-media__content" src="http://player.vimeo.com/video/18352872" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--video gr-media--vimeo">
    <iframe class="gr-media__content" src="http://player.vimeo.com/video/18352872" width="100%" height="500" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

articles-list-section-accroche

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--section accroche-section-sidebar">
	<div class="panel-heading"><span>Sciences et santé</span></div>
    <ul class="list-group">
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/1">«Le monde est en train de perdre la course contre Ebola», selon l’ONU</a>
            </h4>
        </li>
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel-25.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/2">Les syndicats annoncent une grève générale le 15 décembre</a>
            </h4>
        </li>
        <li class="list-group-item">
           	<p><a href="#" ><img src="/assets/demo-img/lorempixel-15.jpg" class="media-object img-responsive lazy" /></a></p>
            <h4 class="media-heading ">
                <a href="/node/3">Affaire Francken: «Des foutaises» pour Bart De Wever</a>
            </h4>
        </li>
    </ul>
</div>

articles-list-videos

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--section accroche-videos">
	<div class="panel-heading"><span>Vidéos</span></div>
    <ul class="list-group">
        <li class="list-group-item">
        {% set pic      = random(6) %}
    	{% set imgSrc = '/assets/demo-img/lorempixel-' ~ pic ~ '.jpg' %}
					<a href="#"><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a>
					<div class="media-body fa icon-play">
						<h4 class="media-heading">
								<a href="/node/1">Attentats de Bruxelles: la liberté conditionnelle encore remise en question</a>
						</h4>
					</div>
        </li>
        <li class="list-group-item">
					<a href="#" ><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a>
					<div class="media-body fa icon-play">
						<h4 class="media-heading ">
								<a href="/node/2">Les autorités ont dit avoir fait «fausse route avec Fayçal Cheffou», selon son avocat</a>
						</h4>
					</div>
        </li>
        <li class="list-group-item">
           <a href="#"><img src="{{ imgSrc }}" class="media-object img-responsive lazy" /></a>
           <div class="media-body fa icon-play">
            <h4 class="media-heading ">
                <a href="/node/3">Donald Trump multiplie ses critiques contre l’Otan</a>
            </h4>
					</div>
        </li>
    </ul>
    <div class="gr-more"><a href="">Plus de Vidéos</a></div>
</div>

block-necro

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--necro">
  <div class="panel-heading">
    En mémoire
  </div>
  <div class="gr-necro">
   <h4>Les décès dans l'actualité</h4>
    <ul class="list-group">
     {% for i in app.dummy_content.dummy_stories|slice(0, 2) %}
     {% set n2 = random(9) %}
    	{% set imgSrc = '/assets/img/n2/' ~ n2 ~ '.jpg' %}
      <li class="list-group-item">
        <div class="gr-media">
          <img src="{{ imgSrc }}" /><span>Jean-Pierre Castaldi</span>
        </div>
        <div class="media-body">
          <p>Décès <strong>27/04/2016</strong></p>
          <p>Age <strong>87 ans</strong></p>
        </div>
      </li>
      {% endfor %}
      
    </ul>
  </div>
  <div class="gr-necro gr-necro-birth">
    <h4>Les anniversaires de leur départ</h4>
    <ul class="list-group">
     {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
     {% set n2 = random(9) %}
     {% set imgSrc = '/assets/img/n2/' ~ n2 ~ '.jpg' %}
      <li class="list-group-item"><img src="{{ imgSrc }}" /><strong class="media-body">Il y a 8ans</strong></li>
      {% endfor %}
    </ul>
  </div>
  <div class="gr-necro gr-necro-region">
    <h4>Dans votre région</h4>
    <ul class="list-group">
      <li class="list-group-item"><strong>J-P. Coffe</strong> - 86ans, Rochefort, le 27/04/2016</li>
      <li class="list-group-item"><strong>R. Hausman</strong> - 80ans, Braine l'Alleud, le 01/04/2015</li>
      <li class="list-group-item"><strong>S. Abdeslam</strong> - 32ans, Bruxelles-Capitale, le 10/09/2018</li>
    </ul>
  </div>
  <div class="gr-necro gr-necro-annonce">Toutes les annonces sur <a href="www.enmemoire.be">www.enmemoire.be</a></div>
</div>

articles-list-accroche-sections

Preview

HTML

    
<div class="panel panel-default gr-panel gr-panel--section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
      </ul>
</div>

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel-section gr-accroche-sections" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <p><a href="{{ i.url }}">{{ i.title }}</a></p>
        <p>Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{% if not title %}
  {% set title = "Tour d'horizon" %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel--section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">{{ title }}</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <h4 class="media-heading"><span class="badge">Section{{ i.subsection }}</span><a href="{{ i.url }}">{{ i.title }}</a></h4>
      </li>
    {% endfor %}
  </ul>
</div>

ads

Preview

TWIG

<div class="panel panel-default gr-panel gr-ads gr-ads-leaderboard-top">
    <a href="#"><img src="/assets/ads/leaderboard.jpg" width="840" /></a>
</div>

TWIG

<div class="panel panel-default gr-panel gr-ads gr-ads-imu">
    <a href="#"><img src="/assets/ads/imu2.jpg" width="300" /></a>
</div>

TWIG

<div class="panel panel-default gr-panel gr-ads gr-ads-imu">
    <a href="#"><img src="/assets/ads/imu.jpg" width="300" height="250" /></a>
</div>

article-media-googlemap

Preview

HTML

<div class="gr-media gr-media--16_9 gr-media--googlemap">
	<iframe class="gr-media__content" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d629.585810569571!2d4.374198655854938!3d50.86184500000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c36e1a0dd795%3A0xab93ff246b54f442!2sRue+de+l&#39;Est+31%2C+1030+Schaerbeek!5e0!3m2!1sfr!2sbe!4v1425631819887" frameborder="0" style="border:0"></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--googlemap">
	<iframe class="gr-media__content" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d629.585810569571!2d4.374198655854938!3d50.86184500000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c36e1a0dd795%3A0xab93ff246b54f442!2sRue+de+l&#39;Est+31%2C+1030+Schaerbeek!5e0!3m2!1sfr!2sbe!4v1425631819887" frameborder="0" style="border:0"></iframe>
</div>

TWIG

<div class="gr-media gr-media--googlemap">
	<iframe class="gr-media__content" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d629.585810569571!2d4.374198655854938!3d50.86184500000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c36e1a0dd795%3A0xab93ff246b54f442!2sRue+de+l&#39;Est+31%2C+1030+Schaerbeek!5e0!3m2!1sfr!2sbe!4v1425631819887" frameborder="0" style="border:0"></iframe>
</div>

article-media-deezer

Preview

TWIG

<div class="gr-media gr-media--deezer gr-media--deezer-track">
	<iframe class="gr-media__content" src="http://www.deezer.com/plugins/player?type=tracks&id=2423891&cover=true&height=240" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/plugins/player?type=tracks&id=2423891&cover=true&height=240" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--deezer gr-media--deezer-album">
	<iframe class="gr-media__content" src="http://www.deezer.com/plugins/player?type=album&id=238939&cover=true" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/plugins/player?type=album&id=238939&cover=true" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--deezer gr-media--deezer-playlist">
	<iframe class="gr-media__content" src="http://www.deezer.com/en/plugins/player?type=playlist&id=393019635&cover=true" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/en/plugins/player?type=playlist&id=393019635&cover=true" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

HTML

<div class="gr-media gr-media--deezer gr-media--deezer-track">
	<iframe class="gr-media__content" src="http://www.deezer.com/plugins/player?type=tracks&id=2423891&cover=true&height=240" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/plugins/player?type=tracks&id=2423891&cover=true&height=240" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--deezer gr-media--deezer-album">
	<iframe class="gr-media__content" src="http://www.deezer.com/plugins/player?type=album&id=238939&cover=true" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/plugins/player?type=album&id=238939&cover=true" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--deezer gr-media--deezer-playlist">
	<iframe class="gr-media__content" src="http://www.deezer.com/en/plugins/player?type=playlist&id=393019635&cover=true" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://www.deezer.com/en/plugins/player?type=playlist&id=393019635&cover=true" target="_blank">
			<span class="icon icon-deezer"></span>Voir la vue optimisée
		</a>
	</div>
</div>

overlay-paywall

Preview

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

TWIG

<div class="gr-popup-paywall-wrap">
  <div class="gr-popup-paywall">
        <div class="paywall_close">
          <i class="fa fa-times"></i>
        </div>
        
        <div class="row-top">
			<h4>
				Créez votre compte pour pouvoir accéder GRATUITEMENT jusqu’au 15 octobre
à tous les contenus du nouveau site
			</h4>
			<div class="paywall-logo">
			    <img alt="La Meuse" src="/assets/img/sudinfo.svg#lameuse">
			</div>
			<div>
                <a class="btn" href="#">J'en profite</a>
            </div>
            
            <small>
                <a href="#">Découvrir tous les avantages de notre édition des abonnés</a>
            </small>
		</div>

  </div>
  <div class="white_overlay">&nbsp;</div>
</div>

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel-section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <p><a href="{{ i.url }}">{{ i.title }}</a></p>
        <p>Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

article-media-scribble

Preview

TWIG

<div class="gr-media gr-media--16_9 gr-media--scribble">
	<iframe class="gr-media__content" src="http://embed.scribblelive.com/Embed/v5.aspx?Id=1092574&amp;ThemeId=10260" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="icon icon-scribble"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--scribble">
	<iframe class="gr-media__content" src="http://embed.scribblelive.com/Embed/v5.aspx?Id=1092574&amp;ThemeId=10260" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="icon icon-scribble"></span>Voir la vue optimisée
		</a>
	</div>
</div>

HTML

<div class="gr-media gr-media--16_9 gr-media--scribble">
	<iframe class="gr-media__content" src="http://embed.scribblelive.com/Embed/v5.aspx?Id=1092574&amp;ThemeId=10260" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="icon icon-scribble"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--scribble">
	<iframe class="gr-media__content" src="http://embed.scribblelive.com/Embed/v5.aspx?Id=1092574&amp;ThemeId=10260" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="http://embed.scribblelive.com/Embed/v5.aspx?Id=1124751&ThemeId=7346" target="_blank">
			<span class="icon icon-scribble"></span>Voir la vue optimisée
		</a>
	</div>
</div>

articles-list-with-media-object

Preview

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

TWIG

{% if not title %}
  {% set title = "Maintenant" %}
{% endif %}
<div class="panel panel-default gr-panel gr-panel--vignette">
  <div class="panel-heading">{{ title }}</div>
  <ul class="media-list">
   {% for i in app.dummy_content.dummy_stories|slice(0, 5) %}
   <li class="list-group-item media">

    <div class="media-body">
      <h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
      <p><a class="col-md-6"><img class="img-responsive lazy" data-original="{{ i.mainImg.url }}" /></a>
        {{ i.teaser }}</p>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

HTML

<!--
/**
 * 	Footer HTML file :;
 *	Description:;
 **/
-->

<header>
	<!-- account & tools -->
	<nav id="ls-account-infos" class="navbar-wrapper navbar-inverse navbar-default" role="navigation">
		<div class="container">
			<div class="row">
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li><h4><a href="#"><span class="label label-default" style="font-weight:normal"><span class="glyphicon glyphicon-user"></span> Bonjour M. Zeldman</span></a></h4></li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Votre compte<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Vos paramètres</a></li>
								<li><a href="#">Vos signets</a></li>
								<li><a href="#">Vos commentaires</a></li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cloud"></span> Votre météo<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="#">Dans votre région</a></li>
								<li><a href="#">Personnaliser</a></li>
								<li><a href="#">Désactiver</a></li>
							</ul>
						</li>
					</ul>
					<form class="navbar-form navbar-right" role="search">
						<div class="form-group">
							<input type="text" class="form-control ls-search" placeholder=""/>
						</div>
						<button type="submit" class="btn btn-default">Rechercher</button>
					</form>
				</div><!-- /.navbar-collapse -->
			</div>
		</div>
	</nav>
	<!-- main navigation -->
	<nav id="ls-main-nav" class="navbar-wrapper" role="navigation">
		<div class="container">
			<div id="ls-main-nav-content" class="row">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div class="collapse navbar-collapse">
					<a class="navbar-brand" href="#">Le Soir abonnés</a>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Le journal</a></li>
						<li><a href="#">Les archives</a></li>
						<li><a href="#">La carte</a></li>
						<li><a href="#">Le classeur</a></li>

					</ul>
				</div><!-- /.navbar-collapse -->
			</div>
		</div>
	</nav>
	<!-- main navigation -->
	<nav id="ls-content-nav" class="navbar-wrapper" role="navigation">
		<div class="container">
			<div class="row">
				<div class="collapse navbar-collapse">
					<ul class="nav nav-justified">
						<li><a href="#"><span class="glyphicon glyphicon-home"></span> home</a></li>
						<li><a href="#">Actu</a></li>
						<li><a href="#">Sports</a></li>
						<li><a href="#">Culture</a></li>
						<li><a href="#">Economie</a></li>
						<li><a href="#">Débats</a></li>
						<li><a href="#">Blogs</a></li>
						<li><a href="#">Le Studio</a></li>
						<li><a href="#">Styles</a></li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div>
		</div>
	</nav>
</header>

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

block-pdf

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--pdf">
	<div class="panel-heading">Lisez aussi la Meuse du jour</div>
	<div class="gr-carousel owl-carousel">
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
			<div class="item"><img class="lazyOwl" src="http://journal-stage.sudinfo.be/rm/prod/free/Sudpresse%3Aweb%2C2016-06-16%2CLIEGE/SU_QUOTIDIENS/2016-06-16/45/high_d-20160615-G8D2AK.jpg?id=d-20160615-G8D2AK&crop_height=221&auth=a54d8" alt="Lazy Owl Image"></div>
	</div>
</div>

article-block-more

Preview

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
	{% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel--article-block-more">
	<!-- Default panel contents -->
	<div class="panel-heading">
		Aussi en {{ current_section.label }}
	</div>
	<!-- List group -->
	<ul class="media-list">
		{% for i in app.dummy_content.dummy_stories|slice(0, 8) %}
			<li class="list-group-item media">
				<div class="media-body">
					<h4 class="media-heading">
						{% if loop.first %}
							<span class="gr-keyword gr-keyword-alerte">Analyse</span>
						{% endif %}

						{% if loop.index==4 %}
							<span class="gr-keyword gr-keyword-alerte">De notre envoyé spécial</span>
						{% endif %}

						<a href="{{ i.url }}">{{ i.title }}</a>
					</h4>
					<p>
						<a class="col-md-6">
							<img class="img-responsive lazy" data-original="{{ i.mainImg.url }}" />
						</a>
						{#{ i.teaser }#}
					</p>
				</div>
			</li>
		{% endfor %}
	</ul>
</div>

article-media-twitter

Preview

HTML

<div class="gr-media gr-media--twitter">
	<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/IlkanDemir1/status/562389132790759424"></a></blockquote>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="gr-media gr-media--twitter">
	<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/1001belges/status/562334603072241664"></a></blockquote>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

TWIG

<div class="gr-media gr-media--twitter">
	<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/IlkanDemir1/status/562389132790759424"></a></blockquote>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

<div class="gr-media gr-media--twitter">
	<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/1001belges/status/562334603072241664"></a></blockquote>
	<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

article-media-video-rtl

Preview

TWIG

<div class="gr-media gr-media--16_9 gr-media--video gr-media--rtl">
	<iframe class="gr-media__content" frameborder="0" src="http://www.rtl.be/videos/page/rtl-video-en-embed/640.aspx?VideoID=528114&key=bcef71c1-0360-4bc5-b78e-4d75d397ecfa"></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--video gr-media--rtl">
	<iframe class="gr-media__content" frameborder="0" src="http://www.rtl.be/videos/page/rtl-video-en-embed/640.aspx?VideoID=528114&key=bcef71c1-0360-4bc5-b78e-4d75d397ecfa"></iframe>
</div>

HTML

<div class="gr-media gr-media--16_9 gr-media--video gr-media--rtl">
	<iframe class="gr-media__content" frameborder="0" src="http://www.rtl.be/videos/page/rtl-video-en-embed/640.aspx?VideoID=528114&key=bcef71c1-0360-4bc5-b78e-4d75d397ecfa"></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--video gr-media--rtl">
	<iframe class="gr-media__content" frameborder="0" src="http://www.rtl.be/videos/page/rtl-video-en-embed/640.aspx?VideoID=528114&key=bcef71c1-0360-4bc5-b78e-4d75d397ecfa"></iframe>
</div>

articles-list-accroche-photo

Preview

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel-section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <p><a href="{{ i.url }}">{{ i.title }}</a></p>
        <p>Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

HTML

  <div class="panel panel-default gr-panel gr-panel--vignette">
  <div class="panel-heading">Reportage</div>
  <ul class="list-group">
     </ul>
</div>

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

TWIG

{% if not title %}
  {% set title = "Reportage" %}
{% endif %}
<div class="panel panel-default gr-panel gr-panel--vignette">
  <div class="panel-heading">{{ title }}</div>
  <ul class="list-group">
   {% for i in app.dummy_content.dummy_stories|slice(0, 1) %}
   <li class="list-group-item media">

    <div class="media-body">
      <h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
      <p><a href="#"><img class="media-object lazy" data-original="{{ i.mainImg.url }}"></a>
       </p>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

articles-list-compact

Preview

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
	{% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default">
	<!-- Default panel contents -->
	<div class="panel-heading">En direct</div>
	<!-- List group -->
	<ul class="list-group">
		{% for i in app.dummy_content.dummy_stories|slice(0, 5) %}
			<li class="list-group-item"><span class="badge pull-left">14:45</span> <a href="{{ i.url }}">{{ i.title }}</a></li>
		{% endfor %}
	</ul>
</div>

HTML

	
<div class="panel panel-default">
	<!-- Default panel contents -->
	<div class="panel-heading">En direct</div>
	<!-- List group -->
	<ul class="list-group">
			</ul>
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

article-media-storify

Preview

TWIG

<div class="gr-media gr-media--16_9 gr-media--storify">
	<iframe class="gr-media__content" src="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" target="_blank">
			<span class="icon icon-storify"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--storify">
	<iframe class="gr-media__content" src="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" target="_blank">
			<span class="icon icon-storify"></span>Voir la vue optimisée
		</a>
	</div>
</div>

HTML

<div class="gr-media gr-media--16_9 gr-media--storify">
	<iframe class="gr-media__content" src="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" target="_blank">
			<span class="icon icon-storify"></span>Voir la vue optimisée
		</a>
	</div>
</div>

<div class="gr-media gr-media--4_3 gr-media--storify">
	<iframe class="gr-media__content" src="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" frameborder="0"></iframe>
	<div class="gr-media__placeholder gr-media__placeholder--info">
		<a class="gr-media__placeholder-link" href="//storify.com/stori/armstrong-avoue-en-mondovision-twitter-se-moque/embed?border=false" target="_blank">
			<span class="icon icon-storify"></span>Voir la vue optimisée
		</a>
	</div>
</div>

articles-list-accroche-titre

Preview

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

HTML

		
<div class="panel panel-default gr-panel gr-panel--titre" data-ena-type="articles-list-accroche-titre">
	<!-- Default panel contents -->
	<div class="panel-heading">Manifestations à Hong-Kong</div>
	<!-- List group -->
						
	<ul class="list-group">
			</ul>
	
</div>

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
	{% set includepath = '../../' %}
{% endif %}
{% if not title %}
	{% set title = 'Manifestations à Hong-Kong' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel--titre" data-ena-type="articles-list-accroche-titre">
	<!-- Default panel contents -->
	<div class="panel-heading">{{ title }}</div>
	<!-- List group -->
	{% set startdiv = '' %}
	{% set enddiv = '' %}
	{% set badge = '' %}
	{%
		if is_most_viewed == 1
	%}
		{% set div_class = 'view-most-viewed' %}
		{% set startdiv = '<div class="view-most-viewed">' %}
		{% set enddiv = '</div>' %}

	{%
		endif
	%}
	{%
		if is_most_commented == 1
	%}
		{% set div_class = 'view-most-commented' %}
		{% set startdiv = '<div class="view-most-commented">' %}
		{% set enddiv = '</div>' %}
	{%
		endif
	%}
	{{ startdiv|raw }}
	<ul class="list-group">
		{% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
		{%
			if is_most_commented == 1 or is_most_viewed == 1
		%}
			{% set count = random(1000) %}
			{% set badge = '<span class="label label-default label-arrow label-arrow-left">' ~ count ~ '</span> ' %}
		{% endif %}

			<li class="list-group-item">
				<h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
				{{ badge|raw }}
			</li>
		{% endfor %}
	</ul>
	{{ enddiv|raw }}
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

article-media-video-dailymotion

Preview

TWIG

<div class="gr-media gr-media--video gr-media--dailymotion">
	<iframe class="gr-media__content" src="//www.dailymotion.com/embed/video/x2es57b?html=1" frameborder="0" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--video gr-media--dailymotion">
	<iframe class="gr-media__content" src="//www.dailymotion.com/embed/video/x2es57b?html=1" frameborder="0" allowfullscreen=""></iframe>
</div>

HTML

<div class="gr-media gr-media--16_9 gr-media--video  gr-media--dailymotion">
	<iframe class="gr-media__content" src="//www.dailymotion.com/embed/video/x2es57b?html=1" frameborder="0" allowfullscreen=""></iframe>
</div>

<div class="gr-media gr-media--4_3 gr-media--video gr-media--dailymotion">
	<iframe class="gr-media__content" src="//www.dailymotion.com/embed/video/x2es57b?html=1" frameborder="0" allowfullscreen=""></iframe>
</div>

articles-double

Preview

HTML

  <div class="panel panel-default gr-panel gr-panel--vignette">
  <div class="panel-heading">Reportage</div>
  <ul class="list-group">
     </ul>
</div>

TWIG

{% if not title %} {% set title = "Reportage" %} {% endif %}

<div class="gr-une-row gr-une-title-n2">
	{% for i in app.dummy_content.dummy_stories|slice(0, 2) %}
	<div class="media gr-une-titles">
		<a href="#"><img class="embed-container ratio-16-9 lazy" src="{{ placeholder }}" data-original="{{ i.mainImg.url }}"></a>
		<div class="gr-n2-title">
			<div class="gr-meta"><a href="/page/actu">{{ i.article_section.label }}</a></div>

			<h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
		</div>
	</div>
	{% endfor %}
</div>

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel-section" data-ena-type="articles-list-accroche-sections">
  <!-- Default panel contents -->
  <div class="panel-heading">Tour d'horizon</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <p><a href="{{ i.url }}">{{ i.title }}</a></p>
        <p>Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

articles-list-liens-secondaires

Preview

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

TWIG

{% if not title %}
  {% set title = "Maintenant" %}
{% endif %}
<div class="panel panel-default gr-panel gr-panel--vignette">
  <!-- Default panel contents -->
  <div class="panel-heading">{{ title }}</div>
  <ul class="media-list">
   {% for i in app.dummy_content.dummy_stories|slice(0, 5) %}
   <li class="list-group-item media">

    <div class="media-body">
      <h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
      <p><a class="col-md-2"><img class="img-responsive lazy" src="" data-original="{{ i.mainImg.url }}" /></a>
        {{ i.teaser }}</p>
      </div>
    </li>
    {% endfor %}
  </ul>
</div><!-- /.panel -->

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

block-meteo

Preview

TWIG

<div class="panel panel-default gr-panel gr-panel--meteo">
	<div class="panel-heading">Liège - Mardi 3 mars 2016</div>
	<div class="gr-info-meteo">
		<h4>Météo locale</h4>
		
		<form class="meteo-codepostal">
			<input type="text" id="codepostal" class="form-control" name="codepostal" placeholder="4000 Liege" />
		</form>
		
		<span class="gr-direct-services-value">18°</span>
		<a href="#" class="gr-direct-services-icon">
			<svg version="1.1" id="sun" class="climacon climacon_sun" viewBox="15 15 70 70">
			<clipPath id="sunFillClip">
			<path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"></path>
			</clipPath>
				<g class="climacon_iconWrap climacon_iconWrap-sun">
					<g class="climacon_componentWrap climacon_componentWrap-sun">
						<g class="climacon_componentWrap climacon_componentWrap-sunSpoke">
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-east" d="M72.03,51.999h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northEast" d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northWest" d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-west" d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southWest" d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-south" d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southEast" d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"></path>
						</g>
						<g class="climacon_componentWrap climacon_componentWrap_sunBody" clip-path="url(#sunFillClip)">
							<circle class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody" cx="50.034" cy="50" r="11.999"></circle>
						</g>
					</g>
				</g>
			</svg>
		</a>
  </div>
	<div class="gr-block-footer">
		<div class="gr-date-meteo"><span class="gr-temp">Demain <span class="gr-direct-services-value">18°</span></span>
			<a href="#" class='gr-direct-services-icon'>
				<svg version="1.1" id="sun" class="climacon climacon_sun" viewBox="15 15 70 70">
					<clipPath id="sunFillClip">
					<path d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"></path>
					</clipPath>
						<g class="climacon_iconWrap climacon_iconWrap-sun">
							<g class="climacon_componentWrap climacon_componentWrap-sun">
								<g class="climacon_componentWrap climacon_componentWrap-sunSpoke">
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-east" d="M72.03,51.999h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northEast" d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northWest" d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-west" d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southWest" d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-south" d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southEast" d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"></path>
								</g>
								<g class="climacon_componentWrap climacon_componentWrap_sunBody" clip-path="url(#sunFillClip)">
									<circle class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody" cx="50.034" cy="50" r="11.999"></circle>
								</g>
							</g>
						</g>
				</svg>
			</a>
		</div>
		<div class="gr-date-meteo"><span class="gr-temp">Demain <span class="gr-direct-services-value">18°</span></span>
			<a href="#" class="gr-direct-services-icon">
				<svg version="1.1" id="cloudDrizzleSun" class="climacon climacon_cloudDrizzleSun" viewBox="15 15 70 70">
					<clipPath id="cloudFillClip">
						<path d="M15,15v70h70V15H15z M59.943,61.639c-3.02,0-12.381,0-15.999,0c-6.626,0-11.998-5.371-11.998-11.998c0-6.627,5.372-11.999,11.998-11.999c5.691,0,10.434,3.974,11.665,9.29c1.252-0.81,2.733-1.291,4.334-1.291c4.418,0,8,3.582,8,8C67.943,58.057,64.361,61.639,59.943,61.639z"></path>
					</clipPath>
					<clipPath id="sunCloudFillClip">
						<path d="M15,15v70h70V15H15z M57.945,49.641c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C65.943,46.059,62.362,49.641,57.945,49.641z"></path>
					</clipPath>
					<clipPath id="cloudSunFillClip">
						<path d="M15,15v70h20.947V63.481c-4.778-2.767-8-7.922-8-13.84c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12c0,5.262-3.394,9.723-8.107,11.341V85H85V15H15z"></path>
					</clipPath>
					<g class="climacon_iconWrap climacon_iconWrap-cloudDrizzleSun">
						<g clip-path="url(#cloudSunFillClip)">
							<g class="climacon_componentWrap climacon_componentWrap-sun climacon_componentWrap-sun_cloud">
								<g class="climacon_componentWrap climacon_componentWrap_sunSpoke">
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M80.029,43.611h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S81.135,43.611,80.029,43.611z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M72.174,30.3c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L72.174,30.3z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M58.033,25.614c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C60.033,24.718,59.135,25.614,58.033,25.614z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M43.892,30.3l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C45.939,31.081,44.673,31.081,43.892,30.3z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M42.033,41.612c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C41.139,39.612,42.033,40.509,42.033,41.612z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M43.892,52.925c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L43.892,52.925z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M58.033,57.61c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C56.033,58.505,56.928,57.61,58.033,57.61z"></path>
									<path class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north" d="M72.174,52.925l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C70.125,52.144,71.391,52.144,72.174,52.925z"></path>
								</g>
								<g class="climacon_wrapperComponent climacon_wrapperComponent-sunBody" clip-path="url(#sunCloudFillClip)">
									<circle class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody" cx="58.033" cy="41.612" r="11.999"></circle>
								</g>
							</g>
						</g>
						<g class="climacon_wrapperComponent climacon_wrapperComponent-drizzle">
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-left" d="M42.001,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2.001-0.895-2.001-2v-3.998C40,54.538,40.896,53.644,42.001,53.644z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-middle" d="M49.999,53.644c1.104,0,2,0.896,2,2v4c0,1.104-0.896,2-2,2s-1.998-0.896-1.998-2v-4C48.001,54.54,48.896,53.644,49.999,53.644z"></path>
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_drizzle climacon_component-stroke_drizzle-right" d="M57.999,53.644c1.104,0,2,0.896,2,2v3.998c0,1.105-0.896,2-2,2c-1.105,0-2-0.895-2-2v-3.998C55.999,54.538,56.894,53.644,57.999,53.644z"></path>
						</g>

						<g class="climacon_wrapperComponent climacon_wrapperComponent-cloud" clip-path="url(#cloudFillClip)">
							<path class="climacon_component climacon_component-stroke climacon_component-stroke_cloud" d="M63.999,64.944v-4.381c2.387-1.386,3.998-3.961,3.998-6.92c0-4.418-3.58-8-7.998-8c-1.603,0-3.084,0.481-4.334,1.291c-1.232-5.316-5.973-9.29-11.664-9.29c-6.628,0-11.999,5.372-11.999,12c0,3.549,1.55,6.729,3.998,8.926v4.914c-4.776-2.769-7.998-7.922-7.998-13.84c0-8.836,7.162-15.999,15.999-15.999c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.336-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12C71.997,58.864,68.655,63.296,63.999,64.944z"></path>
						</g>
					</g>
				</svg>
			</a>
		</div>
	</div>
</div>

articles-list-accroche-chronique

Preview

.LESS

/**
 * 	Footer LESS file :;
 *	Description:;
 */

TWIG

{% set includepath = '' %}
{% if app.env != 1 %}
  {% set includepath = '../../' %}
{% endif %}
{% if not title %}
  {% set title = "Les chroniques" %}
{% endif %}
{#% include includepath ~ app.utils_path ~ 'time.html.twig' %#}
<div class="panel panel-default gr-panel gr-panel--chronique" data-ena-type="articles-list-accroche-chronique">
  <!-- Default panel contents -->
  <div class="panel-heading">{{ title }}</div>
  <!-- List group -->
  <ul class="list-group">
    {% for i in app.dummy_content.dummy_stories|slice(0, 3) %}
      <li class="list-group-item">
        <h4 class="media-heading"><a href="{{ i.url }}">{{ i.title }}</a></h4>
        <p class="author">Par {{ i.author }}</p>
      </li>
    {% endfor %}
  </ul>
</div>

HTML

    
<div class="panel panel-default gr-panel gr-panel--chronique" data-ena-type="articles-list-accroche-chronique">
  <!-- Default panel contents -->
  <div class="panel-heading">Les chroniques</div>
  <!-- List group -->
  <ul class="list-group">
      </ul>
</div>

CSS

/**
 * 	Footer css file :;
	Description:;
 */
 

layout-html

Preview

TWIG


    <!-- base libraries -->
      <script src="//code.jquery.com/jquery.js"></script>
      <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
      <script src="/assets/bootstrap/dist/js/bootstrap.min.js"></script>
      <script src="/assets/initializr/js/libs/modernizr-2.8.3.min.js"></script>


    <!-- specific libraries -->
      <script src="/assets/js/jquery-plugins/headroom/dist/headroom.js"></script>
      <script src="/assets/js/jquery-plugins/headroom/dist/jQuery.headroom.js"></script>
      <script src="/assets/js/enquire.js/enquire.js"></script>
      <script src="/assets/js/custom/matchmedia.js"></script>
      <script src="/assets/js/dragend.js"></script>
      <script src="/assets/js/jquery-plugins/jquery.lazyload.js"></script>
      <script src="/assets/js/jquery-plugins/writeCapture.js"></script>
      <script src="/assets/js/jquery-plugins/jquery.writeCapture.js"></script>

    <!-- Article : galeries -->
      <script src="http://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
      <script src="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/js/bootstrap-image-gallery.js"></script>
      <!-- <script src="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/js/demo.js"></script> -->
      <script src="//www.googletagservices.com/tag/js/gpt.js"></script>


      <script src="/assets/js/responsive.js"></script>

      {% if app.is_collapsed %}
        <script src="/assets/js/sidebar.js"></script>
      {% endif %}

<script type="text/javascript">
<!--//--><![CDATA[//><!--

// Here go Bootstrap ENA tools for demo purpose
$(document).ready(function() {

/*=============================================
=            ENA bootstrap demo               =
=============================================*/
  $(function () {
    //  actions //
    $('#switcher-themes select').change(function() {
      $('#switcher-themes').submit();
    });

    $('#switcher-themes input[type=checkbox]').change(function() {
      $('#switcher-themes').submit();
    });

    $('.tree-toggler').click(function () {
      $(this).parent().children('ul.tree').toggle(300);
    });
    $('.nav-tabs').tab();
    $( "iframe.resizable" ).resizable();
    $( "pre.component" ).resizable();

  }); // End demo behaviors onload

/*=============================================
=            ENA live                         =
=============================================*/
  $(function () {

/*==========  Global: Sidebars behavior  ==========*/

    // Toggle buttons & collapsed behaviors
    // Header & sidebars quick return behavior
    $sidebars = $('.sidebar');
    $("header").headroom({
      onUnpin: function() {
       $.each($sidebars, function() {
          $(this).removeClass('sidebar-open'); // make sure sibebar disappear
         /*if($(this).hasClass('sidebar-open')) {
          $(this).removeClass('sidebar-open');
         } */
       });
    }});

/*==========  Global: Sections navigation  ==========*/

    $('#gr-sidenav a').each(
      function() {
          $(this).hover(function() {
             $('.gr-label', $(this)).delay(10).fadeIn();
          },
          function() {
             $('.gr-label', $(this)).delay(10).fadeOut();
          }
        )
      }
    );
    $('#gr-sidenav a').css('display','block')


/*==========  Article: lecture Zen  ==========*/


dummy = '<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"></div></div></div></div>';


  //alert(dummy);

  // toggled = false;
  //
  // $('.article-features-zen-reading').click(
  //       function() {
  //
  //         if(toggled == true) {
  //           $('#gr-zen-modal').fadeOut();
  //           toggled = false;
  //         }
  //
  //         $.get( "/article-zen-reading/{{ app.current_story.id }}", function( data ) {
  //
  //           $('<div/>')
  //             .attr('id', 'gr-zen-modal')
  //            //.addClass('modal-body')
  //           .append('<div class="modal" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body">' + data +  '</div></div></div></div>')
  //
  //           .appendTo('#gr-main-content')
  //           .fadeIn();
  //
  //           toggled = true;
  //        });
  //     }
  //   );

  /*==========  Article: Gallery  ==========*/

  $linksContainer = $('#gr-gallery-thumbnails');

  function doModal(e) {

    e.preventDefault();
    e.stopPropagation();

       $('#blueimp-gallery')
            .data({'useBootstrapModal': !true})
            .toggleClass('blueimp-gallery-controls', true);

        blueimp.Gallery($('a', $linksContainer), $('#blueimp-gallery').data());
  }



  $.getJSON( "/assets/demo-img/results.json", function( data ) {

  $.each(data.gallery, function (index, photo) {

    if(index > 3) {
        return;
    }

    var thumbnail_caption = '<div class="gr-caption"><h4>' + photo.caption_title + '</h4></div>';


    var  baseUrl = photo.url;
    var cont = $('<div/>').addClass('col-xs-6 col-md-3 thumbnail gr-gallery-thumbnail embed-responsive-16by9').append(thumbnail_caption).hover(
         function(){
             $(this).find('.gr-caption').fadeIn(250); //.fadeIn(250)
         },
         function(){
             $(this).find('.gr-caption').fadeOut(250); //.fadeOut(205)
         }
     );   ;

    $('<a/>')
        .append($('<img>').prop('src', photo.url ))
        .prop('href', photo.url )
        .prop('title', photo.title)
        .attr('data-gallery', '')
        .on('click', function() { doModal(event) })
        .appendTo(cont);
        cont.on('click', function() { doModal(event)}).appendTo($linksContainer);
    });
  });

  $('#image-gallery-launch').on('click', function (event) {
      event.preventDefault();
     $('#blueimp-gallery')
          .data({'useBootstrapModal': !true})
          .toggleClass('blueimp-gallery-controls', true);

      blueimp.Gallery($('a', $linksContainer), $('#blueimp-gallery').data());
  });

  $("[rel='tooltip']").tooltip();

   $('.thumbnail').hover(
       function(){
           $(this).find('.gr-caption').fadeIn(250); //.fadeIn(250)
       },
       function(){
           $(this).find('.gr-caption').fadeOut(250); //.fadeOut(205)
       }
   );

  /*==========  Global: Ads  ==========*/

 var ads_html = "<div><h1><script>document.write('<h1>ADS HERE !!!!!</h1>')</script></div>";

  //$('<div/>').html(ads_html).addClass('gr-ads gr-ads-horizontal-top').prependTo('#gr-main-content');
  //$('<div/>').html(ads_html).addClass('gr-ads gr-ads-rectangle-top').prependTo('#gr-aside-content');
 $('<div/>').prependTo('#ena #gr-main-content')
    .attr('id', 'rossel-leader-2')
    .addClass('adunit gr-ads gr-ads-horizontal-top')
    .writeCapture()
    .html('<script>googletag.display(\'rossel-leader-2\');</script>');
 $('<div/>').prependTo('#ena #gr-aside-content')
    .attr('id', 'rossel-mbanner')
    .addClass('adunit gr-ads gr-ads-rectangle-top')
    .writeCapture()
    .html('<script>googletag.display(\'rossel-mbanner\');</script>');

  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  //(function() {
    var gads = document.createElement('script');
    gads.async = true;
    gads.type = 'text/javascript';
    gads.src = 'http://www.googletagservices.com/tag/js/gpt.js';
    var node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(gads, node);
    //googletag.defineOutOfPageSlot('/81985301/LESOIR/web/ict/', 'rossel-oop-1').addService(googletag.pubads());
 googletag.cmd.push(function() {
     googletag.defineSlot('/81985301/LESOIR/web/homepage', [[728, 90], [840, 150], [840, 250], [970, 250], [995, 123]], 'rossel-leader-2').addService(googletag.pubads());
    googletag.defineSlot('/81985301/LESOIR/web/homepage', [300, 250], 'rossel-mbanner').addService(googletag.pubads());


        googletag.pubads().setTargeting("dnraf","raf");
        googletag.pubads().setTargeting("dn",'www.lesoir.be');
        googletag.pubads().setTargeting("nt",dataLayer[0]["nodetype"]);
        googletag.pubads().setTargeting("p1",dataLayer[0]["path"]);
        googletag.pubads().setTargeting("aid",dataLayer[0]["nodeid"]);
        googletag.pubads().setTargeting("pid",dataLayer[0]["termid"]);
        googletag.pubads().setTargeting("lg", "FR");
        googletag.pubads().setTargeting("keywords", [""]);
        googletag.pubads().setTargeting("region", "");
        googletag.pubads().setTargeting("ville", "");

    googletag.pubads().enableSyncRendering();
    googletag.enableServices();

  });
//})();



  // DragEnd
 // placeholder = {};
 // var sections = ['la_une', 'economie', 'monde', 'sports'];
 // jQuery.addObject('dragends', placeholder);
/*
  $('.une-bis').dragend({

      minTouchDistance  : "60",
      keyboardNavigation: true,
      pageClass         : "dragend-page",
      afterInitialize    : function() {
      },

      onSwipeEnd: function() {
        $('#gr-current-section').html('section name');
        console.info($(this)['container']);
      }

    });
*/
  // dragend

  // lazy load
  //$("img.imagecache").lazyload();


/*  var firstChild = $("#gr-main-content div:first-child").clone(),
            lastChild  = $("#gr-main-content div:last-child").clone(),
            container  = $("#gr-main-content");

        firstChild.appendTo(container);
        lastChild.prependTo(container);

        $("#gr-main-content").dragend({
          jumpToPage: 2,
          onSwipeEnd: function() {
            var first = this.pages[0],
                last = this.pages[this.pages.length - 1];

            if (first === this.activeElement) {
              this.jumpToPage(this.pages.length - 1 );
            }

            if (last === this.activeElement) {
              this.jumpToPage(2);
            }

          },
          afterInitialize: function() {
            this.container.style.visibility = "visible";
          }
        }); */
          //mm();
/*=============================================
=            End of ENA live                  =
=============================================*/

        }); /*-----  End main execution  ------*/



  }); /*-----  End main onload event  ------*/



//--><!]]>
</script>

HTML

TWIG

  <!-- Bootstrap -->
  <!-- For global overrides -->
  <link href="/themes/bootstrap-overrides.css" rel="stylesheet" media="screen">
  <!-- For sites specific overrides -->
  <link href="/themes/{{ current_theme }}/main.css" rel="stylesheet" media="screen">
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

{% if app.is_collapsed %}
    <link href="/assets/css/sidebar.css" rel="stylesheet" media="screen">
{% endif %}

  <!-- [[ External modules ]] -->
  <!-- [[ Galeries - Niveau article - source https://github.com/blueimp/Bootstrap-Image-Gallery ]] -->
  <link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
  <link rel="stylesheet" href="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/css/bootstrap-image-gallery.css">
  <link rel="stylesheet" href="/assets/js/jquery-plugins/Bootstrap-Image-Gallery-master/css/demo.css">