Hi everyone,
We are using Trust theme by Impact. We recently created two custom modules in one page. The problem we are trying to solve is that when we add custom module 1 it works fine but then when we add custom module 2 it looks like it affects the css of custom module 1 so it breaks. How can we avoid that? ps: I tried adding the code for clarity but then my post was flagged as spam. Thanks in advance!
hi @HadeelGamal,
do you use the same classes in those modules or style settings?
The best practise - if you’re using style settings in the HTML+Hubl “tab” of the custom module is to write it like this:
{% require_css %}
<style>
...
YOUR STYLE INFO
...
</style>
{% end_require_css %}
...
<div>
YOUR MODULE LAYOUT
</div>
to avoid possible rendering issues or style overwrites I add an auto-class to the modules like this
<div class="moduleName-{{name|md5}}">
MODULE LAYOUT
</div>
the {{name}} function adds the name of the module(most times auto generated) as class. But to be 100% sure nothing is getting overwritten I add the |md5 filter. This converts the name to a md5 hash. Therefore: You get auto generated classes
To access them you can write your module (only in the HTML+Hubl “tab”) like this
{% require_css %}
<style>
.myModule.module-{{name|md5}}{
background:{{ module.styles.background_color.css }};
}
</style>
{% end_require_css %}
...
<div class="myModule module-{{name|md5}}">
YOUR MODULE LAYOUT
</div>
tipp: if you want to use the |md5 filter add something before it like “module-” (see in the example above).
Another option could be to use the scope_css function but keep in mind that it doesn’t work for every style field.
{% require_css %}
<style>
{% scope_css %}
...
SOME STYLE
...
{% end_scope_css %}
</style>
{% end_require_css %}
For posting code snippets in the community:
While writing an answer/post - click on the “…” in the post editor(the first icon from the right) and you’ll see the </> icon. This is the “code-option”
best,
Anton
Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.
Hi there,
Thanks for you response. So I don’t have any CSS in the HTML. I have module.html, module.css and module.js.Could there be another issue? Please Find the code for both modules below here It is a bit long sorry:
Module 1 HTML
<section class="HSS" onload="addAnimationClass()">
<div class="container">
<div class="bg">
<img class="id-1" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_5.jpg" alt="">
<img class="id-2" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/data_science_img_hero_section_home_page.jpg" alt="">
<img class="id-3" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_8_2.jpg" alt="">
</div>
<a href="#" class="text">
<h6>
<span data-id="1">Planning and Buying<span class="capital-i">|</span></span>
<span data-id="2">Data Science<span class="capital-i">|</span></span>
<span data-id="3">Technology Applications</span>
<span id="line"></span>
</h6>
</a>
<h1>Out-of-Home for the Performance Age</h1>
<p>Maximize your reach and impact with our advance data-driven strategies and technology.</p>
<button>
<a href="https://www.billups.com/contact?hsCtaTracking=de54b882-9340-4ea4-9a81-c4197f7a50ad%7C2a9086ae-a73e-4f71-90d9-642a47f658d5">GET IN TOUCH</a>
</button>
</div>
<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
<script>
window.addEventListener('load', function() {
const elements = document.querySelectorAll('.fade-in-slide-up');
elements.forEach((element, index) => {
element.classList.add('animate');
});
});
</script>
</div>
</section>
Module 1 CSS
@import url('https://fonts.googleapis.com/css?family=SourceSansProLight');
.HSS * {
margin: 0;
padding: 0;
box-sizing: border-box:
}
.html {
font-family: "Source Sans Pro Light";
font-weight: 200;
}
.HSS {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-self: center;
}
.HSS .container {
width: 100%;
max-width:1200px;
margin: 0 auto;
text-align:center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.HSS .bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS .bg::after {
content: "";
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS .mobile-text {
display: none;
}
.HSS h6 {
display: flex;
justify-content: center;
font-size: 14px;
font-family:Source Sans Pro ;
line-height:52px;
letter-spacing: 3px;
color: black;
text-transform: uppercase;
position: relative;
}
.HSS .container h1 span {
margin-right: 50px;
display: inline-block;
justify-content: center;
align-items:center;
}
.HSS h1 {
display:flex;
justify-content: center;
width: 50%;
font-size: 44px;
line-height:50px;
letter-spacing: 0px;
color: black;
position: relative;
margin-top:30px;
}
.HSS .container h6 span {
margin-right: 10px;
display: inline-block;
}
.HSS .bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.HSS .container p {
color: black;
font-size: 18px;
max-width:20 %;
margin-top: 20px;
line-height: 32px;
letter-spacing:0px;
}
.HSS button {
background-color:#316fbc;
display: inline-block;
padding: 12px 52px;
margin-top: 30px;
cursor: pointer;
border: 0;
}
.HSS a {
font-size: 12px;
font-family:Source Sans Pro;
letter-spacing:1px;
text-transform: uppercase;
color:white;
text-decoration: none;
}
.HSS button:hover {
background-color: #22b8cf;
}
.HSS button:hover a {
color: white;
}
#line {
position: absolute;
left: 0;
bottom: 0;
height: 0px;
width: 150px;
border: 2px solid #316fbc;
pointer-events: none;
z-index: -1;
transition: 0.5s ease all;
}
@keyframes anima {
0% {
opacity: 0.6;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1.1);
}
}
@media only screen and (max-width: 768px) {
.mobile-text {
display: block;
}
.text {
display: none;
}
}
.HSS .capital-i {
color: #495057;
margin-left: 20px;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: slideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: slideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: slideUp 1s ease forwards;
animation-delay: 1.5s;
}
@keyframes fadeInSlideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1.5s;
}
.animate {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
Module 1 JS:
const parentBgEl = document.querySelector(".bg");
const childEls = document.querySelectorAll(".HSS .container .text span");
const textEl = document.querySelector(".HSS .text");
const lineEl = document.querySelector("#line");
childEls.forEach((el) => {
el.addEventListener("mouseover", (e) => {
const id = el.getAttribute("data-id");
const bgEl = parentBgEl.querySelector(`.id-${id}`);
parentBgEl.querySelectorAll("img").forEach((img) => {
img.style.display = "none";
img.style.animation = "";
});
bgEl.style.display = "block";
bgEl.style.animation = "anima 1s ease forwards";
// line animation
const cords = el.getBoundingClientRect();
const textCords = textEl.getBoundingClientRect();
lineEl.style.width = cords.width + "px";
lineEl.style.left = cords.left - textCords.left + "px";
});
});
Module 2 HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<div class="gsapcontainer">
<section class="panel">
<video class="video-element" autoplay loop muted>
<source src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Final%20Edit_2_1_1.mp4" type="video/mp4">
</video>
</section>
<section class="panel">
<img class="image-element" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Awards_1.jpg">
</section>
<section class="panel">
<video class="video-element" autoplay loop muted>
<source src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/algorand_case_study_speed.mp4" type="video/mp4">
</video>
</section>
</div>
Module 2 CSS:
html {
overflow-y: scroll;
height: 100%;
/* -webkit-overflow-scrolling: touch;
overflow-scrolling: touch; */
}
body {
overflow-y: visible;
position: relative;
height: unset;
}
html, body {
overflow-x: hidden;
margin: 0;
}
.gsapcontainer {
width: 300%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
}
.gsapcontainer .panel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/* align-items: center; */
/* text-align: center; */
position: relative;
box-sizing: border-box;
/* padding: 10px; */
}
.gsapcontainer .video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
.gsapcontainer .image-element {
width: 100%;
height: 100%;
object-fit: cover;
}
Module 2 JS:
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".gsapcontainer",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
end: () => "+=" + document.querySelector(".gsapcontainer").offsetWidth
}
});
Hello @HadeelGamal
You can utilize the require_css cope_scope_css in your module.html file. However, it’s important to note that if you control CSS from the editor, conflicts may arise when using the module multiple times on the same page. To address this issue, you can scope the CSS to each individual module instance by enclosing the CSS within the `scope_css tag.
Please refer to the attached image for a clearer understanding of how to write CSS within module.html.
Hi there,
Thanks for you response. So I don’t have any CSS in the HTML. I have module.html, module.css and module.js.Could there be another issue? Please Find the code for both modules below here It is a bit long sorry:
Module 1 HTML
<section class="HSS" onload="addAnimationClass()">
<div class="container">
<div class="bg">
<img class="id-1" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_5.jpg" alt="">
<img class="id-2" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/data_science_img_hero_section_home_page.jpg" alt="">
<img class="id-3" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Home%20Page%20Assets/hero%20section%20experimetn_8_2.jpg" alt="">
</div>
<a href="#" class="text">
<h6>
<span data-id="1">Planning and Buying<span class="capital-i">|</span></span>
<span data-id="2">Data Science<span class="capital-i">|</span></span>
<span data-id="3">Technology Applications</span>
<span id="line"></span>
</h6>
</a>
<h1>Out-of-Home for the Performance Age</h1>
<p>Maximize your reach and impact with our advance data-driven strategies and technology.</p>
<button>
<a href="https://www.billups.com/contact?hsCtaTracking=de54b882-9340-4ea4-9a81-c4197f7a50ad%7C2a9086ae-a73e-4f71-90d9-642a47f658d5">GET IN TOUCH</a>
</button>
</div>
<div class="scroll-downs">
<div class="mousey">
<div class="scroller"></div>
</div>
<script>
window.addEventListener('load', function() {
const elements = document.querySelectorAll('.fade-in-slide-up');
elements.forEach((element, index) => {
element.classList.add('animate');
});
});
</script>
</div>
</section>
Module 1 CSS
@import url('https://fonts.googleapis.com/css?family=SourceSansProLight');
.HSS * {
margin: 0;
padding: 0;
box-sizing: border-box:
}
.html {
font-family: "Source Sans Pro Light";
font-weight: 200;
}
.HSS {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-self: center;
}
.HSS .container {
width: 100%;
max-width:1200px;
margin: 0 auto;
text-align:center;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.HSS .bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS .bg::after {
content: "";
left: 0;
top: 0;
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 0% 0% / 100% 100%, linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 0% 0% / 100% 100%;
}
.HSS .mobile-text {
display: none;
}
.HSS h6 {
display: flex;
justify-content: center;
font-size: 14px;
font-family:Source Sans Pro ;
line-height:52px;
letter-spacing: 3px;
color: black;
text-transform: uppercase;
position: relative;
}
.HSS .container h1 span {
margin-right: 50px;
display: inline-block;
justify-content: center;
align-items:center;
}
.HSS h1 {
display:flex;
justify-content: center;
width: 50%;
font-size: 44px;
line-height:50px;
letter-spacing: 0px;
color: black;
position: relative;
margin-top:30px;
}
.HSS .container h6 span {
margin-right: 10px;
display: inline-block;
}
.HSS .bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.HSS .container p {
color: black;
font-size: 18px;
max-width:20 %;
margin-top: 20px;
line-height: 32px;
letter-spacing:0px;
}
.HSS button {
background-color:#316fbc;
display: inline-block;
padding: 12px 52px;
margin-top: 30px;
cursor: pointer;
border: 0;
}
.HSS a {
font-size: 12px;
font-family:Source Sans Pro;
letter-spacing:1px;
text-transform: uppercase;
color:white;
text-decoration: none;
}
.HSS button:hover {
background-color: #22b8cf;
}
.HSS button:hover a {
color: white;
}
#line {
position: absolute;
left: 0;
bottom: 0;
height: 0px;
width: 150px;
border: 2px solid #316fbc;
pointer-events: none;
z-index: -1;
transition: 0.5s ease all;
}
@keyframes anima {
0% {
opacity: 0.6;
transform: scale(1);
}
100% {
opacity: 1;
transform: scale(1.1);
}
}
@media only screen and (max-width: 768px) {
.mobile-text {
display: block;
}
.text {
display: none;
}
}
.HSS .capital-i {
color: #495057;
margin-left: 20px;
}
@keyframes slideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: slideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: slideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: slideUp 1s ease forwards;
animation-delay: 1.5s;
}
@keyframes fadeInSlideUp {
0% {
opacity: 0;
transform: translateY(100%);
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.HSS .text h6 span {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
.HSS h1 {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1s;
}
.HSS p {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 1.5s;
}
.animate {
animation: fadeInSlideUp 1s ease forwards;
animation-delay: 0.5s;
}
Module 1 JS:
const parentBgEl = document.querySelector(".bg");
const childEls = document.querySelectorAll(".HSS .container .text span");
const textEl = document.querySelector(".HSS .text");
const lineEl = document.querySelector("#line");
childEls.forEach((el) => {
el.addEventListener("mouseover", (e) => {
const id = el.getAttribute("data-id");
const bgEl = parentBgEl.querySelector(`.id-${id}`);
parentBgEl.querySelectorAll("img").forEach((img) => {
img.style.display = "none";
img.style.animation = "";
});
bgEl.style.display = "block";
bgEl.style.animation = "anima 1s ease forwards";
// line animation
const cords = el.getBoundingClientRect();
const textCords = textEl.getBoundingClientRect();
lineEl.style.width = cords.width + "px";
lineEl.style.left = cords.left - textCords.left + "px";
});
});
Module 2 HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<div class="gsapcontainer">
<section class="panel">
<video class="video-element" autoplay loop muted>
<source src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Final%20Edit_2_1_1.mp4" type="video/mp4">
</video>
</section>
<section class="panel">
<img class="image-element" src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/Awards_1.jpg">
</section>
<section class="panel">
<video class="video-element" autoplay loop muted>
<source src="https://3454737.fs1.hubspotusercontent-na1.net/hubfs/3454737/algorand_case_study_speed.mp4" type="video/mp4">
</video>
</section>
</div>
Module 2 CSS:
html {
overflow-y: scroll;
height: 100%;
/* -webkit-overflow-scrolling: touch;
overflow-scrolling: touch; */
}
body {
overflow-y: visible;
position: relative;
height: unset;
}
html, body {
overflow-x: hidden;
margin: 0;
}
.gsapcontainer {
width: 300%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
}
.gsapcontainer .panel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
/* align-items: center; */
/* text-align: center; */
position: relative;
box-sizing: border-box;
/* padding: 10px; */
}
.gsapcontainer .video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
.gsapcontainer .image-element {
width: 100%;
height: 100%;
object-fit: cover;
}
Module 2 JS:
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".gsapcontainer",
pin: true,
scrub: 1,
snap: 1 / (sections.length - 1),
end: () => "+=" + document.querySelector(".gsapcontainer").offsetWidth
}
});
Hello @HadeelGamal
I have identified the issue in your code. It appears that you have added some CSS properties directly on the HTML & body tags within the second module. Unfortunately, these properties are conflicting with the rest of the page because they affect global elements.
To resolve this conflict, I have made the necessary modifications by enclosing the second module within a wrapper and applying the required CSS properties to this wrapper instead. This way, the changes will only affect the specific module and not interfere with other elements on the page.
Please review the attached image for a visual representation of the changes. In the image, I have marked the part of the CSS that needed to be removed from the global scope and applied it to the new wrapper.
Now, the second module should be working properly without affecting other parts of the page. To see the changes in action, you can check the link provided below.
