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.
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
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.
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 [email protected]:mcspronko/magento-2-pronko-consulting-theme.gitThis 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent