Multiple Template Styles, But Only One Template.css – SCSS Compilation Overwrites All Styles - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

Multiple Template Styles, But Only One Template.css – SCSS Compilation Overwrites All Styles

RH

Ralf Hille

Helix Framework 7 months ago

Hi JoomShaper Team,

we’re using Helix Ultimate 2.1.2 with multiple template styles (for different sections of the same website), for example:

Style A: ENPLA – with a header height of 70px

Style B: HOME-PV – with a header height of 100px

We’ve noticed that all styles rely on the same template.css file, and whenever we save one of the styles with SCSS Compilation enabled, the settings from the other style get overwritten – because template.css gets recompiled globally.

This leads to unstable and inconsistent results when working with multiple styles. ❓ Our questions:

Is it intentional that all styles share the same compiled CSS file?

What’s the recommended approach to avoid conflicts between different styles?

Wouldn’t it make more sense to generate a separate CSS file per style, e.g. style-42.css, based on the style ID?

Thanks in advance for any guidance or best practices on this!

0
2 Answers
Order by
Oldest Newest Votes
Atick Eashrak Shuvo
Atick Eashrak Shuvo
Accepted Answer
Support Agent 7 months ago #188914

Hello Ralf Hille,

Apologies for the inconvenience caused. First and foremost, modifying core template files like template.scss or template.css is not recommended, as any template update will overwrite these changes.

For implementing custom CSS or JS, we encourage following the official documentation: Helix Framework Custom Code, CSS, JS, Meta.

If you're using multiple instances of the same template and want consistent customizations across all, we recommend using the Custom Code by Files approach. However, if you need different customizations for each template, the Custom CSS (Area) approach will allow you to manage unique styles per template.

Thank you for your understanding, and please let us know if you need further assistance.

0
Pavel
Pavel
Accepted Answer
7 months ago #188953

What’s the recommended approach to avoid conflicts between different styles?

Hi. Using different template styles makes sense only if you need different layouts (the Layout tab). In all other cases, use only one template style, custom classes, and CSS.

For example, if you need different header height add your class for the page in the menu item settings.

And use the following code in your custom.css file.

.your-class #sp-header,
.your-class #sp-header .logo,
.your-class #offcanvas-toggler {
    height: 100px;
}
.your-class .sp-megamenu-parent > li > a, 
.your-class .sp-megamenu-parent > li > span {
    line-height: 100px;
}
/* For mobile devices */
@media (max-width: 991.98px) {
    .your-class #sp-header,
    .your-class #sp-header .logo,
    .your-class #offcanvas-toggler {
        height: 60px;
    }
    .your-class .sp-megamenu-parent>li>a,
    .your-class .sp-megamenu-parent>li>span {
        line-height: 60px;
    }
}

Or more compact using variable

:root {
    --header-height: 100px;
}
.your-class #sp-header,
.your-class #sp-header .logo,
.your-class #offcanvas-toggler {
    height: var(--header-height);
}
.your-class .sp-megamenu-parent > li > a, 
.your-class .sp-megamenu-parent > li > span {
    line-height: var(--header-height);
}
/* For mobile devices */
@media (max-width: 991.98px) {
    :root {
    --header-height: 60px;
    }
}
0