Translater code from designer into HubSpot Template

[jonlcrow]

I have html code from a designer that I need to translate into a template. What is the best way to do that? Should I treat modules as div and apply the classes to the modules? How do I take out any unwanted classes that HubSpot adds? How do I know which classes HubSpot is added?

Here is an example:

http://www-aimswebplus-com.sandbox.hs-sites.com/training

I added all of the CSS pages to the template. On the HTML he gave me the header doesn't include a class for "container-fluid" but it appears when I inspect the page. And it appears as if it is in "combined-css". I am assuming that this is a combination of CSS that comes from the pages I have added or possibly that also includes HubSpot css? How do I remove it?

Thanks,

Jonathan

[roisinkirby · Accepted solution]

Hey @jonlcrow first and foremost I'd advise reaching out to the designer to see if they are familiar with the HubSpot CM and if they reccommend an approach specific to their designs.

Please follow the steps detailed below to create a coded file (.html, .css, .js) within your HubSpot portal for usage with your content.

• Navigate in HubSpot Marketing to Content > Design Manager
• Select Coded Files on the left hand-side > click on New coded file
• Under What do you want to use? select Code Editor > choose Page under What do you want to create?
• Name the file > assign appropriate extension (.html, .css, .js) > allocate accordingly within your location structure

• When ready, click Save to finish creating the file

[jonlcrow]

Thanks @roisinkirby

That is the way I wound up doing it. I was able to add a lot of the HubL to manage the content on the pages. But I found styling the navigation menu exceedingly difficult - trying to match the designer's css classes to the hs-menu and hs-menu-wrapper and the variations of li and a and and and...

I tried looking at this page: https://designers.hubspot.com/docs/cos/hubspot-menu-markup

But finally gave up and decided to do it by hand, hardcoding the menu and links. Hopefully the menu won't change all that often. I'm also going to have to hard code the breadrumb trail for each page, but it seems easier than navigating the css.

The blogs were actually easier than I had imagined. Styling the classes for blog title, blog author, all of that was pretty straightforward. But if there is anything you can do to make the hubspot classes for navigation to be standardized on bootstrap that would help.