CMS Development

AndreaSpuri
Member

Landing template not work

Hello!

I'm a noob in Hubspot and I have this real big problem that I can't understand.
I've made a drag&drop template for landing pages as u can see in the pic. I've code all the modules inside the template with Boostrap 5.0 that I've injected inside the template. 

As u can see in the template preview everything work fine.
I would take as example the link in the footer, coz like I coded in the custom module I set the link color to "blue".

template.jpg

But when I create a new landing with my custom template, something go wrong.
First, in the editor I can't see the footer and the logo at the top is not centered.

landing-da-modificare.jpg

But when I see the preview of my page, it lost the font-size, the w and h of the button in the header and the link in the footer is white. Why?
I've checked the code and I can't understand why that link take the css rule "white" while I set the colors of links, with blue. 
As u can see in my module there are these css rules for link.
link modulo.png

But the browser give me this rule for the link, idk why!

 

link codice.png

 

white color in the browser but blue color in my custom module, why?
Pls, help me 😣

0 Upvotes
webdew
Guide | Diamond Partner
Guide | Diamond Partner

Landing template not work

Hi @AndreaSpuri ,

Inside html+hubl please add this name class before container-fluid class as shown below

 

<div class="{{name}}">

    <div class=”container-fluid”>

//your rest code here

     </div>

</div>

 

And add .{{name}} in all your css like this 

 

{% require_css %}

<style>

.{{name}} .container-fluid .col{

text-align:center;

}

 

.{{name}} .col a{

color:#000ac3;

text-decoration:none;

}

 

</style>

{% end_require_css %}


Note:- Keep css  below your html code inside html+hubl as shown in below image

webdew_0-1643272557855.png

 

Hope this helps!

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



0 Upvotes
AndreaSpuri
Member

Landing template not work

I've tried but nothing happened.

I've checked other stuff.

I've add a button with Bootstrap ofc, and there is this rules.

padding: 0.375em 0.75em;

But in the template preview the button is perfect but in the landing preview is a bit smaller, I can't understand why.

 

Immagine 2022-02-01 182249.png

Immagine 2022-02-01 182310.png

 

And in the landing editing page I can't see the footer, I can edit it but I can't see it.

Let's see that screen.Immagine 2022-02-01 182458.png

0 Upvotes
Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Landing template not work

Hey @AndreaSpuri 

 

I might bet that the issue is a conflict between hubspot default styling and boostraps.

Try using the build in grid and then your custom css on top of that.

 

As for the footer text color that is odd. The minified module.css file leads me to think you might need to clear your cache, or the styling is coming from another module or css file. Inspecting the minified file will help diagnose.

 

Hope this gets you moving! And don't hesitate to reach out!

0 Upvotes
AndreaSpuri
Member

Landing template not work

Thank u so much for helping me. 

I tried some stuff, I've add Boostrap.css inside the module and add !important to my rules, and something is changed.

As u can see below, on my link -a there are 3 different rules.

The first one is the css rule i've add inside my custom module.

The second one is from Boostrap.css 5.1.3

The third one is from Bootstrap.css 3.1

 

So as I can understand, I need to overwrite the other rules with mine, now something has sense for me.

So, without !important on my rules, the template take the Boostrap 5.1 css rules and stop.

Maybe? 

immagine_2022-01-28_131542.png

0 Upvotes