Setting up contact page

css-compiled/template.css

@@ -243,6 +243,26 @@ b, strong, label, th {
     .header-image #header #navbar ul.navigation ul li a:hover {
       color: #558042; }
 
+.header-lite #body {
+  padding-top: 12rem; }
+.header-lite #header {
+  box-shadow: none;
+  color: #656161; }
+  .header-lite #header a, .header-lite #header .menu-btn {
+    color: #656161; }
+  .header-lite #header .search-box i {
+    color: #656161; }
+  .header-lite #header .search-box input[type=search]:focus {
+    background-color: rgba(101, 97, 97, 0.2); }
+  .header-lite #header li.active a {
+    color: #87b672; }
+  .header-lite #header .logo ul.social-icons li {
+    background: rgba(101, 97, 97, 0.2); }
+    .header-lite #header .logo ul.social-icons li .fa {
+      color: white; }
+    .header-lite #header .logo ul.social-icons li:hover .fa {
+      color: #656161; }
+
 .footer {
   font-size: 0.9rem;
   background: #333;
@@ -704,25 +724,6 @@ td {
           #panel .navigation li ul li.active > a {
             background: #ccc; }
 
-.blogstyling #body {
-  padding-top: 12rem; }
-.blogstyling #header {
-  color: #656161; }
-  .blogstyling #header a, .blogstyling #header .menu-btn {
-    color: #656161; }
-  .blogstyling #header .search-box i {
-    color: #656161; }
-  .blogstyling #header .search-box input[type=search]:focus {
-    background-color: rgba(101, 97, 97, 0.2); }
-  .blogstyling #header li.active a {
-    color: #87b672; }
-  .blogstyling #header .logo ul.social-icons li {
-    background: rgba(101, 97, 97, 0.2); }
-    .blogstyling #header .logo ul.social-icons li .fa {
-      color: white; }
-    .blogstyling #header .logo ul.social-icons li:hover .fa {
-      color: #656161; }
-
 .blog-header {
   padding-top: 1rem !important;
   padding-bottom: 1rem;
@@ -1157,6 +1158,8 @@ ul.pagination {
     border: 0 none; }
     .modular .bottom .button:hover {
       background-color: #558042; }
+  .modular .bottom.borderbottom hr {
+    padding-top: 2rem; }
 
 .callout {
   background: #EEEEEE;

scss/template/_blog.scss

@@ -1,40 +1,4 @@
-.blogstyling {
-    #body {
-        padding-top: 12rem;
-    }
-    #header {
-        color: $light-gray;
-        a, .menu-btn {
-            color: $light-gray;
-        }
-        .search-box {
-            i {
-                color: $light-gray;
-            }
-            input[type=search] {
-                &:focus {
-                    background-color: transparentize($light-gray, 0.8);
-                }
-            }
-        }
-        li.active a {
-            color: $core-accent;
-        }
-        .logo ul.social-icons li {
-            background: transparentize($light-gray, 0.8);
-            .fa {
-                color: white;
-            }
-            &:hover {
-                .fa {
-                    color: $light-gray;
-                }
-            }
-        }
-    }
-}
 .blog-header {
-
     padding-top: 1rem !important;
     padding-bottom: 1rem;
     margin-top: 0 !important;

scss/template/_header.scss

@@ -240,3 +240,39 @@
         }
     }
 }
+.header-lite {
+    #body {
+        padding-top: 12rem;
+    }
+    #header {
+        box-shadow: none;
+        color: $light-gray;
+        a, .menu-btn {
+            color: $light-gray;
+        }
+        .search-box {
+            i {
+                color: $light-gray;
+            }
+            input[type=search] {
+                &:focus {
+                    background-color: transparentize($light-gray, 0.8);
+                }
+            }
+        }
+        li.active a {
+            color: $core-accent;
+        }
+        .logo ul.social-icons li {
+            background: transparentize($light-gray, 0.8);
+            .fa {
+                color: white;
+            }
+            &:hover {
+                .fa {
+                    color: $light-gray;
+                }
+            }
+        }
+    }
+}

scss/template/modular/_bottom.scss

@@ -33,8 +33,11 @@
                 background-color: darken($core-accent, 20%);
             }
         }
-
+        &.borderbottom {
-
+            hr {
+                padding-top: 2rem;
+            }
+        }
     }
 
 }

templates/modular/bottom.html.twig

@@ -1,6 +1,9 @@
-<div class="modular-row bottom {{ page.header.class}}">
+<div class="modular-row bottom {{ page.header.class }}">
     {{ content }}
     {% for button in page.header.buttons %}
         <a class="button{% if button.primary %} primary{% endif %}" href="{{ button.url }}">{{ button.text }}</a>
     {% endfor %}
+    {% if page.header.class == 'borderbottom' %}
+    <hr>
+    {% endif %}
 </div>

templates/modular_alt.html.twig

@@ -0,0 +1,95 @@
+{% extends 'partials/base.html.twig' %}
+
+{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
+{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
+
+{% block javascripts %}
+    {% if show_onpage_menu %}
+        {% do assets.add('theme://js/singlePageNav.min.js') %}
+    {% endif %}
+    {{ parent() }}
+{% endblock %}
+
+{% block bottom %}
+    {{ parent() }}
+    {% if show_onpage_menu %}
+        <script>
+        // singlePageNav initialization & configuration
+        $('#navbar').singlePageNav({
+            offset: $('#header').outerHeight(),
+            filter: ':not(.external)',
+            updateHash: true,
+            currentClass: 'active'
+        });
+        </script>
+    {% endif %}
+{% endblock %}
+
+{% block header_navigation %}
+    {% if show_onpage_menu %}
+        <ul class="navigation">
+        {% macro loop(page) %}
+        {% for p in page.children %}
+            {% if p.visible %}
+                {% set current_page = (p.active or p.activeChild) ? 'active' : '' %}
+                <li class="{{ current_page }}">
+                    <a href="{{ p.url }}" class="external">
+                        {% if p.header.icon %}<i class="fa fa-{{ p.header.icon }}"></i>{% endif %}
+                        {{ p.menu }}
+                    </a>
+                    {% if p.children.count > 0 %}
+                        <ul>
+                            {{ _self.loop(p) }}
+                        </ul>
+                    {% endif %}
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% endmacro %}
+        {% if config.themes.deliver.dropdown.enabled %}
+            {{ _self.loop(pages) }}
+        {% else %}
+            {% for page in pages.children %}
+                {% if page.visible %}
+                    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
+                    <li class="{{ current_page }}">
+                        <a href="{{ page.url }}" class="external">
+                            {% if page.header.icon %}<i class="fa fa-{{ page.header.icon }}"></i>{% endif %}
+                            {{ page.menu }}
+                        </a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+        {% for mitem in site.menu %}
+            <li>
+                <a href="{{ mitem.url }}">
+                    {% if mitem.icon %}<i class="fa fa-{{ mitem.icon }}"></i>{% endif %}
+                    {{ mitem.text }}
+                </a>
+            </li>
+        {% endfor %}
+    
+        {% for module in page.collection() %}
+            {% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
+            <li class="{{ current_module }}"><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
+        {% endfor %}
+         </ul>
+    {% else %}
+        {{  parent() }}
+    {% endif %}
+{% endblock %}
+
+{% block content %}
+    {% set blog_image = page.media.images|first %}
+    {% if blog_image %}
+    <div class="flush-top blog-header blog-header-image" style="background: {{ page.header.bg_color }} url({{ blog_image.url }}) no-repeat right;">
+    <h1>{{ page.title }}</h1>
+    </div>
+    {% endif %}
+    {{ page.content }}
+    {% for module in page.collection() %}
+        <div id="{{ _self.pageLinkName(module.menu) }}"></div>
+        {{ module.content }}
+    {% endfor %}
+{% endblock %}