default layout quite advanced !

Controller/DefaultController.php

@@ -8,6 +8,22 @@ class DefaultController extends Controller
 {
     public function indexAction()
     {
+        $a = array(
+            array('success', "Message de succès ! "),
+            array('success',"Un autre message de succès ! "),
+            array('danger' , "Avert lorem ipsum dolor sit amet spiritur"),
+            array('danger' ,"Avertum ipsut est amet amergitur tatouari"),
+            array('info' , "Un message d'information s'affiche."),
+            array('info' , "Info informitur escept asolitur amet. Sit Roberetur astot.")
+        );
+        
+        if ($this->getRequest()->query->get('addMessages', 1)) {
+            foreach ($a as $array) {
+                $this->get('session')->getFlashBag()->add($array[0], $array[1]);
+            }
+        }
+        
+        
         return $this->render('CLChillMainBundle::layout.html.twig');
     }
 }

Resources/assets/gumpy/sass/_custom.scss

@@ -7,10 +7,3 @@ h1,h2,h3,h4,h5,h6 {
     font-weight: $font-weight-title;
 }
 
-//correct entypo
-@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; 
-             src: url('./../../fonts/icons/entypo.eot'); 
-             src: url("../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), 
-                 url("./../../fonts/icons/entypo.woff") format("woff"), 
-                 url("./../../fonts/icons/entypo.ttf") format("truetype"); 
-}

Resources/assets/gumpy/sass/_fonts.scss

@@ -15,6 +15,101 @@
        url('../fonts/icons/#{$icons}.ttf')  format('truetype');
 }
 
+$path_to_fonts: "./../../fonts/";
+
+//correct entypo
+@font-face { 
+    font-family: "entypo"; font-style: normal; font-weight: 400; 
+    src: url('#{$path_to_fonts}icons/entypo.eot'); 
+    src: url("#{$path_to_fonts}icons/entypo.eot?#iefix") format("ie9-skip-eot"), 
+        url("#{$path_to_fonts}icons/entypo.woff") format("woff"), 
+        url("#{$path_to_fonts}icons/entypo.ttf") format("truetype"); 
+}
+
+
+$font_1: "Merriweather Sans";
+$font_1_path: "Merriweather_Sans/MerriweatherSans-";
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$path_to_fonts}#{font_1_path}Regular.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: italic;
+  font-weight: 400;
+  src: url('#{$path_to_fonts}#{$font_1_path}Italic.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$path_to_fonts}#{$font_1_path}Light.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: italic;
+  font-weight: 300;
+  src: url('#{$path_to_fonts}#{$font_1_path}LigthItalic.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$path_to_fonts}#{$font_1_path}Bold.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: italic;
+  font-weight: 700;
+  src: url('#{$path_to_fonts}#{$font_1_path}BoldItalic.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: normal;
+  font-weight: 800;
+  src: url('#{$path_to_fonts}#{$font_1_path}ExtraBold.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_1}';
+  font-style: italic;
+  font-weight: 800;
+  src: url('#{$path_to_fonts}#{$font_1_path}ExtraBoldItalic.ttf')  format('truetype');
+}
+
+$font_2: "Oxygen";
+$font_2_path: "Oxygen/Oxygen-";
+
+@font-face {
+  font-family: '#{$font_2}';
+  font-style: normal;
+  font-weight: 300;
+  src: url('#{$path_to_fonts}#{$font_2_path}Light.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_2}';
+  font-style: normal;
+  font-weight: 400;
+  src: url('#{$path_to_fonts}#{$font_2_path}Regular.ttf')  format('truetype');
+}
+
+@font-face {
+  font-family: '#{$font_2}';
+  font-style: normal;
+  font-weight: 700;
+  src: url('#{$path_to_fonts}#{$font_2_path}Bold.ttf')  format('truetype');
+}
+
 // To include your own, local copies of fonts, use the following template
 //
 //@font-face {

Resources/assets/gumpy/sass/_nav.scss

@@ -1,18 +1,8 @@
- div#connect_module_menu {
+nav#header{   
 
-     text-align: right;
 
-    nav.inline-nav {
+    #nav_list {
-        display: inline; 
         
-        ul, ol {
-
-            list-style-type: none;
-            display: inline;
-
-            li {
-                display: inline; 
-            }
-        }
     }
+
 }

Resources/assets/gumpy/sass/_searchbox.scss

@@ -1,4 +1,68 @@
-div#searchbox {
+div#usefulbar {  
+    background-color: #fbba3a;
+    z-index: 1000;
+    //to align with nav bar
+    padding-right: 15px;
+    
+    i.menu {
+        font-size: 2em;
+    }
+    
+    ul {
+        display: flex;
+        justify-content: flex-end;
+        margin: 0;
+        padding-top: 5px;
+        padding-right: 10px;
+        
+    }
+    
+    li{
+        color: white;
+        margin-left: 10px;
+       
+            a {
+                color: white;
+                text-shadow: 0px 0px 1px #555;
+            }
+            
+            i.icon-user-add:before {
+                vertical-align: -5px;
+            }
+        
+    }
+    
+    li#search_element {
         text-align: right;
+        
+        div#search_form {
+            margin: 0;
+            padding: 0;
+            
+            div {
+                margin: 0;
+            }
+            
+            .field {
+                margin: 0;
+            }
+
+            button {
+                color: white;
+                border: none;
+                bottom: -2px;
+                height: 35px;
+            }
+            
+            
+
+        }        
+        
+        
+    }
+    
+
+    
+    
 }
 

Resources/assets/gumpy/sass/chillmain.scss

@@ -1,3 +1,5 @@
 @import "_nav.scss";
 
 @import "_searchbox.scss";
+
+@import "_flashMessages.scss"

Resources/public/css/chillmain.css

@@ -1,6 +1,14 @@
-div#connect_module_menu { text-align: right; }
+div#usefulbar { background-color: #fbba3a; z-index: 1000; padding-right: 15px; }
-div#connect_module_menu nav.inline-nav { display: inline; }
+div#usefulbar i.menu { font-size: 2em; }
-div#connect_module_menu nav.inline-nav ul, div#connect_module_menu nav.inline-nav ol { list-style-type: none; display: inline; }
+div#usefulbar ul { display: flex; justify-content: flex-end; margin: 0; padding-top: 5px; padding-right: 10px; }
-div#connect_module_menu nav.inline-nav ul li, div#connect_module_menu nav.inline-nav ol li { display: inline; }
+div#usefulbar li { color: white; margin-left: 10px; }
+div#usefulbar li a { color: white; text-shadow: 0px 0px 1px #555; }
+div#usefulbar li i.icon-user-add:before { vertical-align: -5px; }
+div#usefulbar li#search_element { text-align: right; }
+div#usefulbar li#search_element div#search_form { margin: 0; padding: 0; }
+div#usefulbar li#search_element div#search_form div { margin: 0; }
+div#usefulbar li#search_element div#search_form .field { margin: 0; }
+div#usefulbar li#search_element div#search_form button { color: white; border: none; bottom: -2px; height: 35px; }
 
-div#searchbox { text-align: right; }
+div#flashMessages { margin-top: 20px; }
+div#flashMessages .flash-notice { margin-top: 10px; margin-bottom: 10px; }

Resources/public/css/gumby.css

@@ -1203,6 +1203,30 @@ i.icon-logo-db:before { content: "\f603"; height: inherit; }
 /* Fonts */
 @font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url(../fonts/icons/entypo.eot); src: url("../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("../fonts/icons/entypo.woff") format("woff"), url("../fonts/icons/entypo.ttf") format("truetype"); }
 
+@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url("./../../fonts/icons/entypo.eot"); src: url("./../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("./../../fonts/icons/entypo.woff") format("woff"), url("./../../fonts/icons/entypo.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 400; src: url("./../../fonts/font_1_pathRegular.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: italic; font-weight: 400; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-Italic.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 300; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-Light.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: italic; font-weight: 300; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-LigthItalic.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 700; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-Bold.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: italic; font-weight: 700; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-BoldItalic.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 800; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-ExtraBold.ttf") format("truetype"); }
+
+@font-face { font-family: "Merriweather Sans"; font-style: italic; font-weight: 800; src: url("./../../fonts/Merriweather_Sans/MerriweatherSans-ExtraBoldItalic.ttf") format("truetype"); }
+
+@font-face { font-family: "Oxygen"; font-style: normal; font-weight: 300; src: url("./../../fonts/Oxygen/Oxygen-Light.ttf") format("truetype"); }
+
+@font-face { font-family: "Oxygen"; font-style: normal; font-weight: 400; src: url("./../../fonts/Oxygen/Oxygen-Regular.ttf") format("truetype"); }
+
+@font-face { font-family: "Oxygen"; font-style: normal; font-weight: 700; src: url("./../../fonts/Oxygen/Oxygen-Bold.ttf") format("truetype"); }
+
 h1, h2, h3, h4, h5, h6 { font-family: "Oxygen"; font-weight: 300; color: #444444; text-rendering: optimizeLegibility; padding-top: 0.273em; line-height: 1.15538em; padding-bottom: 0.273em; }
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #d04526; }
 
@@ -2585,5 +2609,3 @@ table.rounded thead th, table.rounded thead td, table.rounded caption + tbody tr
 .ie9 .radio.checked i, .ie9 .checkbox.checked i { top: 0; }
 
 h1, h2, h3, h4, h5, h6 { font-family: "Merriweather Sans"; font-weight: 600; }
-
-@font-face { font-family: "entypo"; font-style: normal; font-weight: 400; src: url("./../../fonts/icons/entypo.eot"); src: url("../../fonts/icons/entypo.eot?#iefix") format("ie9-skip-eot"), url("./../../fonts/icons/entypo.woff") format("woff"), url("./../../fonts/icons/entypo.ttf") format("truetype"); }

Resources/views/layout.html.twig

@@ -18,51 +18,115 @@
 <body>
     {# class for multicolumn in gumpy #}
     <div class="row">
-        <div class="twelve columns" >
+        <nav id="header" class="navbar pretty" >
             
-            <div id="logo" class="four columns">
+          
+            
+                <div id="logo" class="five columns logo">
 
                 </div>
 
-            <div id="connect_module_menu">
-                <div id="header_nav_box" class="push_two six columns">
                 
-                    Bonjour <a href="#">{julien}</a>
 
-                    <nav class="inline-nav">
+                        
-                    <ul>
+
+   
+                <ul id="nav_list" class="push_five six columns">
+                    <li><a href="#">Bonjour {julien}</a></li>
                     <li><a href="#"><i class="icon-users"></i></a></li>
                     <li><a href="#"><i class="icon-export"></i></a></li>
                     <li><a href="#"><i class="icon-gauge"></i></a></li>
+                    <li><a href="#">Se déconnecter <i class="icon-logout"></i></a></li>
                 </ul>
+                         
+
+                        
+
+                    
+                
+                
+          
+            
       </nav>
+    </div>
     
-                    <a href="#">Se déconnecter <i class="icon-logout"></i></a>
+    
+    
+    <div  class="row">
+       <div id="usefulbar" gumby-fixed="top" class="">
+
+           <ul class="">
+               
+               <li id="search_element" class="">
+                   <div id="search_form"  class="">
+                        <div class="field append">
+                                 
+                                 <input type="search" name="q" 
+                                        class="wide search input" placeholder="Rechercher">
+                                 <button type="submit" class="medium primary btn">Go</button>
 
                         </div>
                     </div>
                    
+               </li>
+               
+               <li class="" >
+                   <a href="#"><i class="icon-user-add menu"></i></a>
+               </li>
+
+               
+           </ul>
+           
            
-            <div id="useful_bar" class="" >
              
-                <div class="six columns">
-                    <a href="#"><i class="icon-user-add"></i></a>
 
-                </div>
             
-                <div id="searchbox" class="field append six columns"> 
 
-                    <input type="search" name="person-search" 
-                           class="normal search input" placeholder="Rechercher des personnes">
-                    <button type="submit" class="adjoined "><i class="icon-search"></i></button>
  
        </div>
    
     </div>
     
+    {# Flash messages ! 
     
+    {% if (app.session.flashbag.get('success').length > 0 
+         OR app.session.flashbag.get('danger').length > 0 
+         OR app.session.flashbag.get('info').length > 0 ) %}#}
+    <div class="row">
+        
+        <div id="flashMessages" class="push_three six columns">
+            {% for flashMessage in app.session.flashbag.get('success') %}
+                <div class="flash-notice success alert">
+                    {{ flashMessage }}
+                </div>
+            {% endfor %}
+            
+            {% for flashMessage in app.session.flashbag.get('danger') %}
+                <div class="flash-notice danger alert">
+                    {{ flashMessage }}
+                </div>
+            {% endfor %}
+            
+            {% for flashMessage in app.session.flashbag.get('info') %}
+                <div class="flash-notice info alert">
+                    {{ flashMessage }}
+                </div>
+            {% endfor %}
+      
+            
+        </div>
+        
+    </div>
+   {# {% endif %} #}
+    
+    <div class="row">
             <div id="wrapper" style="min-height: 1500px;">
-            <p gumby-fixed="top"> Hello  ! </p>
+                
+                
+                
+                
+                <h1>Title</h1>
+            <p> Hello  ! </p>
             
             <div class="medium primary btn">
   <a href="#">Primary</a>
@@ -72,7 +136,7 @@
         
         
         
-    </div>
+