↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

magento-2-pronko-consulting-theme

eCommerce CSS

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.



↑