Have you been coding on our COS for a while now and have been left wondering how to customize a feature or intiate a capability? You may have been utilizing our knowledge docs, our free Hubspot Design Certification or even the Hubspot Designer's Forum. All of the following are top rated questions pulled from the Hubspot Designer's Forum. On this forum, you can ask questions, answer other people's questions and share knowledge on the Hubspot COS and HubL. Topics range from specific capabilities to more general questions regarding the product. Take a look at some of our most popular questions and how we answer these questions.
How do you get your line numbers back when developing on the COS?
Discovered at this year's INBOUND conference, Chris Mathieu of New Breed Marketing shared a pro-tip about getting your line numbers back while developing on the COS. Chris posted:
"You can put a page in debug mode and not have it auto minify your CSS and JS by appending the following to any URL ?hsDebug=True
Ex: http://www.newbreedmarketing.com/blog?hsDebug=True"
How do you combine multiple sets of blog posts into a single listing?
This has always been of our most popular queries across various forms of communication. To get multiple blogs to render in the same feed, Hubspot has created some tokens to make the rendering of all the blogs into one chronological feed easy.
David Hunt says, "To implement this technique:
-
Define a variable and store a set of posts
-
Define a second variable that stores a second set of posts
-
Define a third variable that combines the two variables and applies a sort filter. The example below sorts by publish date, but you could also sort based on other properties such as 'name'.
-
Loop through the posts in this combined variable
Feel free to go to this knowledge tutorial to learn more.
How do you add Custom CSS styles to CTA buttons?
On this query, featured on the Designer's Forum, a user asked if there was a way to customize CTA buttons. David Hunt answers, "If you use the CTA button builder and select a predefined style, the CSS gets added to a unique id selector (something like a#cta_button_158015_new) that is difficult to override unless you were to use the same or more specific selector. The reason for such a specific selector is to try to ensure that button renders consistently when embedded on any page. Unless you want to use a bunch of !important tags in your code, I recommend choosing the "Link (No Style)" option and styling that button from scratch. You can still copy any of the button builder generated CSS from predefined styles and apply them to your custom class. Since you will be styling a plain link, you will have complete control over the look of your CTA."
How do you dynamically print topic names on the topic listing page with HubL or Javascript?
While I originally thought this was only possible using JS, this can be using purely HubL. To dynamically print the name of a topic in a topics listing page, add the following code to your Listing Layout, before your main content for loop (ie {% for content in contents %}):
{% if topic %}<h3>Posts about {{ topic|replace('-',' ')|title}}</h3>{% endif %}
<!-- uses filters to replace - with a space and make the topic's first letter uppercase -->
Please note that the code must be placed within the if listing view statement.
Click here for more ideas of how to use Javascript to enable this feature.
How do you customize the look of the default social sharing and follow me social modules in the Hubspot COS?
HubSpot offers a follow me and social sharing module that generates social icons that respectively link to your site or share your content. These dynamically generated buttons have default icons that can be customized with CSS. To do this, you need to hide HubSpot's default icon images and replace with either a background image of your own or a vector icon. First you need to hide the existing icons. Click here for some example CSS to do so.
Once you have hidden the default icons, you can set new background images or use vector icons. The final result allows your user's to add and remove social accounts via HubSpot's UI, but display vector based icons like the one's at the bottom of this page: http://www.underseaband.com/ Again, click here to see example code.
Do you have any questions about the COS? Try going to the Hubspot Designer's Forum now!
