Custom Module not appearing in certain templates

SOLVE
jbolmer
Participant

I downloaded a free template and love the look and feel of it. I cloned and customized, but I can't figure out how to get my menu bar at the top and have it look the same as on my other pages. 

 

COS for Page I'm DevelopingCOS for Page I'm DevelopingHow the page I'm developing looksHow the page I'm developing looksHow the menu should lookHow the menu should lookHow the menu appears on other design templatesHow the menu appears on other design templates

0 Upvotes
1 Accepted solution

Accepted Solutions
Jsum
Solution
Key Advisor

@jbolmer,

 

If you downloaded a template from the market place then that template came with a style sheet. In most of cases I have seen, templates in the market place are built on evast theme, which is build on Hubspots frame work, so actually when you down load a template from the market place it will have all of Hubspots stylesheets, the evast style sheet, and the template stylesheet attached.

 

All of the above place styles on Hubspot default section classes such as "header-container-wrapper", "body-container-wrapper", and "footer-container-wrapper" and use global styling on fonts and inline-elements such as lists, paragraphs, links, etc. 

It's a huge flaw in the system that adding custom modules to the market place should fix. Templates in the market place are meant to be used as is, it doesn't seam to be considered that most people would want to add pages to their current site and so would need to easily apply their own header and footer. Custom modules are made to be self contained and are checked to ensure the contained css doesn't effect anything outside of the module. The makes the above problem a non-issue. 

As for the template, all I can say is that I've made a good chunck of change customizing downloaded templates and it is possibly my least favorite type of job. What you need to do is clone the template, attach your style sheet to it, remove it's header and footer and replace them with yours, then look at the page. 

Now you have to open your browser's inspector tool and inspect any elements out of place. Find the source of issue(s) in the css, see what file it's from (in your header and footer the issues will be coming from any of the dependent css files of the downloaded template, in the body the issues will caused by your stylesheet). 

View solution in original post

0 Upvotes
3 Replies 3
roisinkirby
HubSpot Product Team

@ndwilliams3@Jsum@benvanlooy do you have any tips / advice on how to incorportate existing global modules / styling into a new template?

0 Upvotes
Jsum
Solution
Key Advisor

@jbolmer,

 

If you downloaded a template from the market place then that template came with a style sheet. In most of cases I have seen, templates in the market place are built on evast theme, which is build on Hubspots frame work, so actually when you down load a template from the market place it will have all of Hubspots stylesheets, the evast style sheet, and the template stylesheet attached.

 

All of the above place styles on Hubspot default section classes such as "header-container-wrapper", "body-container-wrapper", and "footer-container-wrapper" and use global styling on fonts and inline-elements such as lists, paragraphs, links, etc. 

It's a huge flaw in the system that adding custom modules to the market place should fix. Templates in the market place are meant to be used as is, it doesn't seam to be considered that most people would want to add pages to their current site and so would need to easily apply their own header and footer. Custom modules are made to be self contained and are checked to ensure the contained css doesn't effect anything outside of the module. The makes the above problem a non-issue. 

As for the template, all I can say is that I've made a good chunck of change customizing downloaded templates and it is possibly my least favorite type of job. What you need to do is clone the template, attach your style sheet to it, remove it's header and footer and replace them with yours, then look at the page. 

Now you have to open your browser's inspector tool and inspect any elements out of place. Find the source of issue(s) in the css, see what file it's from (in your header and footer the issues will be coming from any of the dependent css files of the downloaded template, in the body the issues will caused by your stylesheet). 

View solution in original post

0 Upvotes
jbolmer
Participant

Thank you so much for your thoughtful response. I was getting quite frustrated because the template was blocking me from adding a header and footer, and when I finally did I could not get it to look how it was supposed to. This makes total sense now based on your answer. 

 

Luckily I reached out to Juice Tactics (a template development company on the hub) and they graciously put in some dev hours for me to add a header and footer.

 

With my limited knowldege, there's no way I would've been able to do the work. 

 

Templates are great, but lesson learned. Next time I'll make sure it has all of the components I need before building it out! 

0 Upvotes