sclarson
diff --git a/‎cookbook/profiler/data_collector.rst
Copy file name to clipboardExpand all lines: cookbook/profiler/data_collector.rst
+35-6Lines changed: 35 additions & 6 deletions b/‎cookbook/profiler/data_collector.rst
Copy file name to clipboardExpand all lines: cookbook/profiler/data_collector.rst
+35-6Lines changed: 35 additions & 6 deletions
@@ -106,27 +106,56 @@ Adding Web Profiler Templates
 -----------------------------
 
 When you want to display the data collected by your data collector in the web
-debug toolbar or the web profiler, create a Twig template following this
-skeleton:
+debug toolbar or the web profiler, you will need to create a Twig template. The
+following example can help you get started:
 
 .. code-block:: jinja
 
     {% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
 
     {% block toolbar %}
-        {# the web debug toolbar content #}
+        {# This toolbar item may appear along the top or bottom of the screen.#}
+        {% set icon %}
+        <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAQAAADVGmdYAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffAxkBCDStonIVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAHpJREFUOMtj3PWfgXRAuqZd/5nIsIdhVBPFmgqIjCuYOrJsYtz1fxuUOYER2TQID8afwIiQ8YIkI4TzCv5D2AgaWSuExJKMIDbA7EEVhQEWXJ6FKUY4D48m7HYU/EcWZ8JlE6qfMELPDcUJuEMPxvYazYTDWRMjOcUyAEswO+VjeQQaAAAAAElFTkSuQmCC" alt=""/></span>
+        <span class="sf-toolbar-status">Example</span>
+        {% endset %}
+
+        {% set text %}
+        <div class="sf-toolbar-info-piece">
+            <b>Quick piece of data</b>
+            <span>100 units</div>
+        </div>
+        <div class="sf-toolbar-info-piece">
+            <b>Another quick thing</b>
+            <span>300 units</div>
+        </div>
+        {% endset %}
+
+        {# Set the "link" value to false if you do not have a big "panel" 
+           section that you want to direct the user to. #}
+        {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': true } %}
+
     {% endblock %}
 
     {% block head %}
-        {# if the web profiler panel needs some specific JS or CSS files #}
+        {# Optional, if you need your own JS or CSS files. #} 
+        {{ parent() }} {# Use parent() to keep the default styles #}        
     {% endblock %}
 
     {% block menu %}
-        {# the menu content #}
+        {# This left-hand menu appears when using the full-screen profiler. #}
+        <span class="label">
+            <span class="icon"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAQAAADVGmdYAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffAxkBCDStonIVAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAHpJREFUOMtj3PWfgXRAuqZd/5nIsIdhVBPFmgqIjCuYOrJsYtz1fxuUOYER2TQID8afwIiQ8YIkI4TzCv5D2AgaWSuExJKMIDbA7EEVhQEWXJ6FKUY4D48m7HYU/EcWZ8JlE6qfMELPDcUJuEMPxvYazYTDWRMjOcUyAEswO+VjeQQaAAAAAElFTkSuQmCC" alt=""/></span>
+            <strong>Example Collector</strong>
+        </span>
     {% endblock %}
 
     {% block panel %}
-        {# the panel content #}
+        {# Optional, for showing the most details. #} 
+        <h2>Example</h2>
+        <p>
+            <em>Major information goes here</em>
+        </p>
     {% endblock %}
 
 Each block is optional. The ``toolbar`` block is used for the web debug