CMS Development

MNault
Contributor | Elite Partner
Contributor | Elite Partner

Theme used to create a few new pages

SOLVE

Can a Theme be used to create a few new pages on older site that uses templates? We have a client thats site uses traditional templates. They need a couple of new pages designed and I am wondering if I can use a "Theme" that we purchased (I know I can copy it to the client account) to make these new pages. What I am wondering is how do I use their "global headers" with the new theme pages? I wish there was more information on HubSpot about using the new themes. Thank you!

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Theme used to create a few new pages

SOLVE

Hi @MNault

getting the global header from templates to themes is possible but you'll need to include all the depending css and js to the theme.

Personally I think working in the Design-Manager is much easier for this kind of work, but you can go the CLI way if you'd want to. 

 

The idea is:
- Copy the path of your "old" global header group // which you can find by right-clicking it and select "copy path"
- paste it in the base.html(the default layout which should be used for all pages) like this

{% block header %}
{% global_partial path='PATH-TO-THE-GLOBAL-GROUP', no_wrapper=True %}
{% endblock header %}

 

this will "load" load the header into the base. BUT: You have to migrate the depending css style and js into the theme. Otherwise it won't work properly. From my experience - it can get very frustrating since mixing two different styles is not easy at all and the js will most likely "terminate" each other. It was a fun time with a lot of testing, debugging and optimizing. 

So if you don't have a highly complex mega-menu structure in the header - consider to recreate the look&feel in the purchased theme. It should have a header.html somewhere in the folder-structure. You could also ask the theme creator if he will recreate it for you. 

 

best, 

Anton

Anton Bujanowski Signature

View solution in original post

2 Replies 2
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Theme used to create a few new pages

SOLVE

Hi @MNault

getting the global header from templates to themes is possible but you'll need to include all the depending css and js to the theme.

Personally I think working in the Design-Manager is much easier for this kind of work, but you can go the CLI way if you'd want to. 

 

The idea is:
- Copy the path of your "old" global header group // which you can find by right-clicking it and select "copy path"
- paste it in the base.html(the default layout which should be used for all pages) like this

{% block header %}
{% global_partial path='PATH-TO-THE-GLOBAL-GROUP', no_wrapper=True %}
{% endblock header %}

 

this will "load" load the header into the base. BUT: You have to migrate the depending css style and js into the theme. Otherwise it won't work properly. From my experience - it can get very frustrating since mixing two different styles is not easy at all and the js will most likely "terminate" each other. It was a fun time with a lot of testing, debugging and optimizing. 

So if you don't have a highly complex mega-menu structure in the header - consider to recreate the look&feel in the purchased theme. It should have a header.html somewhere in the folder-structure. You could also ask the theme creator if he will recreate it for you. 

 

best, 

Anton

Anton Bujanowski Signature
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Theme used to create a few new pages

SOLVE

Hi @MNault ,

Just clone exiting template and change the name accrodingly:

https://prnt.sc/15ork5e
<!--
templateType: page
isAvailableForNewContent: true
label: Change Template name
-->



Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.