README.md

The Pronko Consulting Theme for Magento 2

Welcome to the Pronko Consulting theme repository. This repository contains a custom Magento 2 theme.

Feel free to customize it for your own purposes.

All development steps and changes are documented and discussed on my YouTube Channel.

Tutorials

This is a collection of videos with explanations on how to build the theme.

Part 1: Magento 2 Custom Theme: Logo, Navigation and Layout

Part 2: Magento 2 Custom Theme: Adding Montserrat and Roboto Fonts

Part 3: Magento 2 Custom Theme: Header Content

Part 4: Magento 2 Custom Theme: Adding Google Fonts

Part 5: Magento 2 Custom Theme: Footer Links

Part 6: Magento 2 Custom Theme: Footer Content Styling

Part 7: Magento 2 Custom Theme: Newsletter Block Section

Part 8: How to speed up Magento 2 theme development by X times

The Newsletter subscription HTML content for CMS Block.

<div class="title"><h2 class="title">Subscribe for the Newsletter</h2></div>
<div class="subtitle"><p>Be the first to hear about the latest extension releases, special sales and news.</p></div>
    <form id="newsletter-subscription" class="form subscribe" action="" method="post" novalidate="">
        <div class="field newsletter"><label class="label" for="newsletter"><span>Sign Up for Our Newsletter:</span></label>
            <div class="control"><input id="newsletter" name="email" type="email" placeholder="Enter your email" /></div>
        </div>
        <div class="actions"><button class="action subscribe primary" title="Subscribe" type="submit"><span>Subscribe</span> </button></div>
    </form>
<div class="newsletter-illustration"><div class="img"></div></div>

Part 9: Create Contact Us block on a Home Page

The contact us HTML content for CMS Block.

<div class="modular-row callout showcase-contact-us">
    <div class="max-width">
        <h2 class="title">DELIVERING BEST ECOMMERCE EXPERIENCE</h2>
        <div class="subtitle"><p>As an eCommerce agency we offer everything from first-class development to a consulting that will bring any vision to life</p></div>
        <div class="contact-us-container">
            <div class="actions"><a class="action subscribe primary"><span>Contact Us</span></a></div>
        </div>
    </div>
</div>

Part 10: Showcase Banner on Home Page | Magento 2 Theme Development

<div class="modular-row showcase-header">
    <h1 class="title">Magento Ecommerce Solutions Provider</h1>
    <div class="subtitle">We provide high-quality eCommerce solutions and consulting services globally</div>
    <div class="button-container">
        <div class="actions"><a class="action primary" href="{{config path="web/secure/base_url"}}services"><span>Our Services</span></a></div>
    </div>
</div>

Part 11: How to customize Contact Us Form | Magento 2 Theme Development

Part 12: How to declare Custom Layout for CMS Page/Block/Widget | Magento 2 Theme Development

Part 13: Media Queries for Responsive Website | Magento 2 Theme Development

Part 14: Custom Media Queries | Magento 2 Theme Development

Part 15: Top Menu Labels | Magento 2 Theme Development

Use this HTML to include into the navigation items:

<span class="new">New</span>

Part 16: How to create Banner Widget in Magento 2

• Pronko Banner Widget repository

Part 17: How to add testimonials on Home Page | Magento 2 Theme Development

Part 18: How to add Owl Carousel jQuery plugin to Magento 2

Part 19: Services Container on Home Page | Magento 2 Theme Development

Part 20: Custom Buttons and Magento UI Library | Magento 2 Theme Development

About

The Pronko Consulting theme is created to show best practices on Magento 2 theme development. The theme is based on Magento 2 Blank theme. The repository is created and maintained by Max Pronko and Pronko Consulting Team. Feel free to contribute. This is a great opportunity to learn custom theme development best practices.

Development

It is recommended to use modman package manager for the theme development. Make sure to download modman before use.

Read Magento 2 Module in a Separate Repository post for details.

From the root Magento directory run the following command:

modman clone git@github.com:mcspronko/magento-2-pronko-consulting-theme.git

This command will clone the repository into the .modman/magento-2-pronko-consulting-theme directory and create a symlink in the app/code/design/Pronko folder.

Any modifications in the app/code/design/Pronko directory will be reflected in the .modman/magento-2-pronko-consulting-theme.