Posts Tagged: Web Development
HubSpot HubL Code Snippet Collection – Filters, Functions, and Macros
Below is a list of my commonly used HubSpot CMS HubL filters, functions, and Macros. Email me if you have one you would like to add to this list. Create a slug from a text string I used this when I wanted to add a CSS class name to the li of a menu using… Read more »
Category: Code Snippets
How to Create a Landing Page in HubSpot Without a Template
Are you trying to create a landing page without a template in HubSpot? HubSpot drag and drop templates make it easy to build a landing page to help you generate leads or promote a webinar. Below are the steps on how to do so. 1. Open HubSpot Landing Pages Admin In the top navigation menu… Read more »
Category: Tutorials
How to Make CSS Style Customizations to HubSpot CMS Pages
Are you creating a HubSpot landing page or website page but want to make a small design style adjustment? Sometimes you just have to dig in and get your hands dirty writing some code. But don’t worry it isn’t as bad as it looks. And if this is your first time, afterward you will think… Read more »
Category: Articles
How do you change the styling of a HubSpot pop up form?
I recently tried adding a HubSpot popup form but I noticed I didn’t like the styles. It wasn’t exactly what I was looking for. The form admin does not provide extensive customization options, but if you are comfortable adding CSS styles you can adjust the popup to fit your needs. Below are the changes I… Read more »
Category: Articles
Does HubSpot CMS use Bootstrap?
HubSpot does not use Bootstrap as-is for their CMS and grid system. Instead, its default 12 column grid system and class naming is based on the Bootstrap 2 grid system, but the actual code is different. Here is what the default HubSpot layout.css file looks like. HubSpot 2 column grid (Bootstrap 2) div structure example
| 1 2 3 4 5 6 7 8 | <div class="row-fluid "> <div class="span6"> Column 1 content </div> <div class="span6"> Column 2 content </div> </div> |
So can I… Read more »
Category: Common Questions
What are the Best Image Size Dimensions for Responsive Web Design?
When building image carousels, jumbotrons, or full background sections you will often need to properly size an image. Below are some recommendations based on the most common device screen sizes and if you are using parallax or fixed background images. Desktop (1920×1080) 2000px x 360px, 4000px x 720px (retina) Parallax (images need to be as… Read more »
Category: Common Questions
WooCommerce Product Category and Terms Select Filters [code snippet]
The code below will help you add a form select filter for Woocommerce online shop on WordPress.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <?php $categories = get_terms( ['taxonomy' => 'product_cat', 'hide_empty' => true] ); ?> <div class="product-categories"> <h3>Categories</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $categories as $category ) { ?> <option value="<?php echo get_term_link( $category->term_id ); ?>"><?php echo $category->name; ?></option> <?php } ?> </select> </div> <?php $terms = get_terms(array('taxonomy' => 'product_tag', 'hide_empty' => true)); ?> <div class="product-tags" > <h3>Template Tags</h3> <select class="form-control shop-filter" onchange="location = this.value;"> <option selected value="/shop/">All</option> <?php foreach ( $terms as $term ) { ?> <option value="<?php echo get_term_link( $term->term_id, 'product_tag' ); ?>"><?php echo $term->name; ?></option> <?php } ?> </select> </div> <script> jQuery(document).ready(function() { var queryString = window.location.href; console.log(queryString); jQuery(".shop-filter > option").each(function() { if (this.value == queryString) { this.selected = 'selected'; } }); }); </script> |
Category: Code Snippets
How to Remove Default HubSpot CTA Styles
HubSpot allows marketers to create custom styled CTA buttons. This can be a problem if you have a large team who may not know how to follow brand guidelines. This creative freedom can make buttons look inconsistent across your website. You could educate all of your users to never create custom styles. Or you could… Read more »
Category: Code Snippets
Scale Up and Crop an Image WordPress [code snippet]
In WordPress you may need to increase the size of all thumbnails but WordPress does not res up the images to prevent distortion. Using the method outlined in this example you can use object-fit to make undersized images fit your desired aspect ratio. .img-crop__polyfill image is sized to the desired dimensions. This will help keep… Read more »
Category: Code Snippets
How to Get a Wistia Video Thumbnail Without the API
Wistia video provides some handy embed codes for your videos but what if you want to create a custom player or use the thumbnail image by itself. You can use their API but the setup could me more complicated than you need. Thankfully Wistia provides Oauth url’s used in WordPress to grab the data for… Read more »
Category: Code Snippets
