# Translater code from designer into HubSpot Template

**URL:** <https://community.hubspot.com/t/translater-code-from-designer-into-hubspot-template/7858>\
**Category:** Tips, Tricks & Best Practices\
**Created:** [February 16, 2018, 5:24pm UTC](https://community.hubspot.com/t/translater-code-from-designer-into-hubspot-template/7858 "2018-02-16T17:24:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jonlcrow](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonlcrow/32/102945_2.png) [@jonlcrow](https://community.hubspot.com/u/jonlcrow)\
**Post date:** [February 16, 2018, 5:24pm UTC](https://community.hubspot.com/t/translater-code-from-designer-into-hubspot-template/7858/1 "2018-02-16T17:24:20Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![roisinkirby](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@roisinkirby](https://community.hubspot.com/u/roisinkirby)\
**Post date:** [March 8, 2018, 2:49pm UTC](https://community.hubspot.com/t/translater-code-from-designer-into-hubspot-template/7858/2 "2018-03-08T14:49:31Z")

</div>

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

![CreateCodedFile.gif](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/4/44b1fd0540743c5aa6dbb9c59c897735e8a26461.gif)

- When ready, click **Save** to finish creating the file

---

<div class="post-metadata">

**Author:** ![jonlcrow](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jonlcrow/32/102945_2.png) [@jonlcrow](https://community.hubspot.com/u/jonlcrow)\
**Post date:** [March 9, 2018, 1:35am UTC](https://community.hubspot.com/t/translater-code-from-designer-into-hubspot-template/7858/3 "2018-03-09T01:35:37Z")

</div>

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: [Menus and Navigation - HubSpot docs](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.