Bugfixes and theme customization updates

partials/brand-blocks-2.htm

@@ -1,24 +1,30 @@
 <div class="row mkt">
     <div class="col-sm-6 mkt__block mkt__block--overlay">
-        <a href="#">
-            <figure class="mkt__img">
-                <img alt="" src="https://farm3.staticflickr.com/2693/4193135790_dc0d20fb69_b.jpg" />
-            </figure>
-            <div class="mkt__content text-center">
-                <h3 class="text-white">This is content for this block.</h3>
-                <p class="text-white text-caps">Shop this Feature</p>
+        <a href="{{ theme.block1Link }}">
+            <div class="mkt__content text-center block" style="background-image: url(
+                {{ theme.block1Image.thumbnail('auto', 'auto') }}
+            );">
+                <h3 class="text-white">
+                    {{ theme.block1Text1 }}
+                </h3>
+                <p class="text-white text-caps">
+                    {{ theme.block1Text2 }}
+                </p>
             </div>
         </a>
     </div>
 
     <div class="col-sm-6 mkt__block mkt__block--overlay">
-        <a href="#">
-            <figure class="mkt__img">
-                <img src="https://farm1.staticflickr.com/19/106619526_630018976b_z.jpg" />
-            </figure>
-            <div class="mkt__content text-center">
-                <h3 class="text-white">This is content for this block.</h3>
-                <p class="text-white text-caps">Shop this Feature</p>
+        <a href="{{ theme.block2Link }}">
+            <div class="mkt__content text-center block" style="background-image: url(
+                {{ theme.block2Image.thumbnail('auto', 'auto') }}
+            );">
+                <h3 class="text-white">
+                    {{ theme.block2Text1 }}
+                </h3>
+                <p class="text-white text-caps">
+                    {{ theme.block2Text2 }}
+                </p>
             </div>
         </a>
     </div>

partials/brand-blocks-3.htm

@@ -1,37 +1,46 @@
 <div class="row mkt">
-    <div class="col-sm-4 mkt__block">
-        <a href="#">
-            <figure class="mkt__img">
-                <img src="https://farm5.staticflickr.com/4051/4297705996_ba97ba018f_z.jpg" />
-            </figure>
-            <div class="text-center mkt__content">
-                <h4>This is content for this block.</h4>
-                <p class="text-muted">Ac posuere sagittis aenean justo curabitur condimentum platea a praesent per.</p>
+    <div class="col-sm-4 mkt__block mkt__blocks-3 mkt__block--overlay">
+        <a href="{{ theme.block3Link }}">
+            <div class="text-center mkt__content block" style="background-image: url(
+                {{ theme.block3Image.thumbnail('auto', 'auto') }}
+            );">
             </div>
+            <h4>
+                {{ theme.block3Text1 }}
+            </h4>
+            <p class="text-muted">
+                {{ theme.block3Text2 }}
+            </p>
         </a>
     </div>
 
-    <div class="col-sm-4 mkt__block">
-        <a href="#">
-            <figure class="mkt__img">
-                <img src="https://farm8.staticflickr.com/7013/6527816421_55977c2f6f_z.jpg" />
-            </figure>
-            <div class="text-center mkt__content">
-                <h4>This is content for this block.</h4>
-                <p class="text-muted">Ac posuere sagittis aenean justo curabitur condimentum platea a praesent per.</p>
+    <div class="col-sm-4 mkt__block mkt__blocks-3 mkt__block--overlay">
+        <a href="{{ theme.block4Link }}">
+            <div class="text-center mkt__content block" style="background-image: url(
+                {{ theme.block4Image.thumbnail('auto', 'auto') }}
+            );">
             </div>
+            <h4>
+                {{ theme.block4Text1 }}
+            </h4>
+            <p class="text-muted">
+                {{ theme.block4Text2 }}
+            </p>
         </a>
     </div>
 
-    <div class="col-sm-4 mkt__block">
-        <a href="#">
-            <figure class="mkt__img">
-                <img src="https://farm3.staticflickr.com/2795/4248042200_04699a4b98_z.jpg" />
-            </figure>
-            <div class="text-center mkt__content">
-                <h4>This is content for this block.</h4>
-                <p class="text-muted">Ac posuere sagittis aenean justo curabitur condimentum platea a praesent per.</p>
+    <div class="col-sm-4 mkt__block mkt__blocks-3 mkt__block--overlay">
+        <a href="{{ theme.block5Link }}">
+            <div class="text-center mkt__content block" style="background-image: url(
+                {{ theme.block5Image.thumbnail('auto', 'auto') }}
+            );">
             </div>
+            <h4>
+                {{ theme.block5Text1 }}
+            </h4>
+            <p class="text-muted">
+                {{ theme.block5Text2 }}
+            </p>
         </a>
     </div>
 </div>

partials/brand-hero.htm

@@ -1,8 +1,14 @@
 <div class="container mb1 hero">
     <div class="hero__content text-center">
-        <h1 class="text-white">SUMMER CATALOG</h1>
-        <p class="text-white text-caps"><a href="#">Shop new releases</a></p>
+        <a href="{{ theme.heroLink }}" class="hero-text">
+            <h1 class="text-white">
+                {{ theme.heroText1 }}
+            </h1>
+            <p class="text-white text-caps">
+                {{ theme.heroText2 }}
+            </p>
+        </a>
     </div>
 
     <div class="hero__bg hero__bg--c-b" style="background-image: url({{ theme.heroImage.thumbnail(500, 'auto')}});"></div>
-</div>
+</div>

partials/shop-product.htm

@@ -8,26 +8,26 @@
         </figure>
 
         {% if theme.socialToggle %}
-          <div class="social social-links">
-            <button class="facebook btn btn-sm share s_facebook">
-              <i class="fi-social-facebook"></i> &nbsp;
-              <span class='badge counter c_facebook'>&nbsp;</span>
-            </button>
-
-            <button class="twitter btn btn-sm share s_twitter">
-                <i class="fi-social-twitter"></i>
-            </button>
-
-            <button class="google btn btn-sm share s_plus">
-                <i class="fi-social-google-plus"></i> &nbsp;
-                <span class='badge counter c_plus'>&nbsp;</span>
-            </button>
-
-            <button class="pinterest btn btn-sm share s_pinterest">
-                <i class="fi-social-pinterest"></i> &nbsp;
-                <span class='badge counter c_pinterest'>&nbsp;</span>
-            </button>
-
+          <div class="social social-links">
+            <button class="facebook btn btn-sm share s_facebook">
+              <i class="fi-social-facebook"></i> &nbsp;
+              <span class='badge counter c_facebook'>&nbsp;</span>
+            </button>
+
+            <button class="twitter btn btn-sm share s_twitter">
+                <i class="fi-social-twitter"></i>
+            </button>
+
+            <button class="google btn btn-sm share s_plus">
+                <i class="fi-social-google-plus"></i> &nbsp;
+                <span class='badge counter c_plus'>&nbsp;</span>
+            </button>
+
+            <button class="pinterest btn btn-sm share s_pinterest">
+                <i class="fi-social-pinterest"></i> &nbsp;
+                <span class='badge counter c_pinterest'>&nbsp;</span>
+            </button>
+
           </div>
         {% endif %}
 
@@ -79,7 +79,7 @@ <h5>Description</h5> {{ product.description|unescape }}
                 <hr />
                 <div class="form-group">
                   <label class="title" for="customDropdown">Quantity</label>
-                  <input type="text" size="1" value="{{ quantity|default(" 1 ") }}" name="quantity" class="form-control input-sm" />
+                  <input type="text" size="1" value="{{ quantity|default(1) }}" name="quantity" class="form-control input-sm" />
                 </div>
 
                 <div class="stock-level">{{ product.in_stock_amount }} available</div>

resources/styles/main.css

@@ -6906,6 +6906,15 @@ Hero Images
     position: relative;
     overflow: hidden;
 }
+.hero__content a:hover h1 {
+    color: white;
+}
+.hero__content a:hover {
+    color: white;
+}
+.hero__content a:active {
+    color: white;
+}
 .hero__content {
     padding-top: 17.5%;
     padding-bottom: 17.5%;
@@ -6965,6 +6974,9 @@ Marketing
 .mkt__block a:hover {
     text-decoration: none;
 }
+.mkt__blocks-3 a:hover {
+    text-decoration: underline;
+}
 .mkt__block--overlay a {
     position: relative;
     overflow: hidden;
@@ -6993,12 +7005,19 @@ Marketing
     height: 100%;
     width: 100%;
 }
-.mkt__block--overlay a:hover .mkt__content {
-    background-color: rgba(0, 0, 0, 0.33);
+.mkt__content:hover {
+    -webkit-filter: brightness(70%);
+    -moz-filter: brightness(70%);
+    -o-filter: brightness(70%);
+    -ms-filter: brightness(70%);
+    filter: brightness(70%);
 }
 .mkt__content {
     padding-top: .5em;
 }
+.block {
+    background-size: cover;
+}
 .mkt__content p.text-caps {
     color: rgba(255, 255, 255, 0.85);
     font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

theme.yaml

@@ -5,13 +5,45 @@ website: 'http://hotmeteor.com'
 engine: twig
 404: '404'
 customFields:
+    # Logos
     logoText: { type: text, title: 'Logo text', default: COASTAL, comment: 'Replaces all instance of your logo name around the site' }
-    faviconImage: { type: image, title: 'Favicon Image (Image you see on the chrome)', default: '@/images/ic-heart-hover.png' }
-    heroImage: { type: image, title: 'Home: Banner Image', default: 'https://farm1.staticflickr.com/52/142306999_627074060b_b.jpg' }
+    faviconImage: { type: image, title: "Favicon Image (Small image in your browser's URL toolbar)", default: '@/images/ic-heart-hover.png' }
+    # HERO
+    heroImage: { type: image, title: 'Banner Image', default: 'https://farm1.staticflickr.com/52/142306999_627074060b_b.jpg' }
+    heroText1: { type: text, title: 'Banner Text 1', default: 'SUMMER CATALOG' }
+    heroText2: { type: text, title: 'Banner Text 2', default: '1170 x 512' }
+    heroLink: { type: text, title: 'Banner Link', default: '/shop' }
+    # BLOCK 1
+    block1Image: { type: image, title: 'Block 1 Image', default: 'https://farm3.staticflickr.com/2693/4193135790_dc0d20fb69_b.jpg' }
+    block1Text1: { type: text, title: 'Block 1 Text 1', default: 'This is content for block 1.' }
+    block1Text2: { type: text, title: 'Block 1 Text 2', default: '570 x 374' }
+    block1Link: { type: text, title: 'Block 1 Link', default: '/shop' }
+    # BLOCK 2
+    block2Image: { type: image, title: 'Block 2 Image', default: 'https://farm1.staticflickr.com/19/106619526_630018976b_z.jpg' }
+    block2Text1: { type: text, title: 'Block 2 Text 1', default: 'This is content for block 2.' }
+    block2Text2: { type: text, title: 'Block 2 Text 2', default: '570 x 374' }
+    block2Link: { type: text, title: 'Block 2 Link', default: '/shop' }
+    # BLOCK 3
+    block3Image: { type: image, title: 'Block 3 Image', default: 'https://farm5.staticflickr.com/4051/4297705996_ba97ba018f_z.jpg' }
+    block3Text1: { type: text, title: 'Block 3 Text 1', default: 'This is content for block 3.' }
+    block3Text2: { type: text, title: 'Block 3 Text 2', default: '370 x 185' }
+    block3Link: { type: text, title: 'Block 3 Link', default: '/shop' }
+    # BLOCK 4
+    block4Image: { type: image, title: 'Block 4 Image', default: 'https://farm8.staticflickr.com/7013/6527816421_55977c2f6f_z.jpg' }
+    block4Text1: { type: text, title: 'Block 4 Text 1', default: 'This is content for block 4.' }
+    block4Text2: { type: text, title: 'Block 4 Text 2', default: '370 x 185' }
+    block4Link: { type: text, title: 'Block 4 Link', default: '/shop' }
+    # BLOCK 5
+    block5Image: { type: image, title: 'Block 5 Image', default: 'https://farm3.staticflickr.com/2795/4248042200_04699a4b98_z.jpg' }
+    block5Text1: { type: text, title: 'Block 5 Text 1', default: 'This is content for block 5.' }
+    block5Text2: { type: text, title: 'Block 5 Text 2', default: '370 x 185' }
+    block5Link: { type: text, title: 'Block 5 Link', default: '/shop' }
+    # Social
     socialFacebookUrl: { type: text, title: 'Facebook URL', default: '' }
     socialTwitterUrl: { type: text, title: 'Twitter URL', default: '' }
     socialInstagramUrl: { type: text, title: 'Instagram URL', default: '' }
     socialPinterestUrl: { type: text, title: 'Pinterest URL', default: '' }
+    # Other
     footerTagline: { type: text, title: 'Footer tagline', default: 'This is the free Coastal theme.', comment: 'Suggested length is less than 40 characters' }
     topbarColor: { type: color, title: 'Color - top bar', default: '', comment: 'Remove color for default' }
     footerColor: { type: color, title: 'Color - footer', default: '', comment: 'Remove color for default' }