Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

adding SCSS to helix ultimate

Featured Lock Resolved Issue
What is the best way to add scss to the new helix ultimate?
We have css area int he template for custom, and we can add a custom.css file in the css folder which is loaded last if we have a fair bit of css.
But if we want to add scss can we add that to the custom scss file or is there another path we should use?

14 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
1) add file into /css/ folder of template
2) then in <head> section (from setting) add

<link href="/templates/shaper_helixultimate/css/custom.scss" rel="stylesheet" type="text/css" />


peace of cake. All clear ? if yes click " Accept As Answer "
All of the answer is great apart from the disposition of the cake, I doubt if about to be eaten it will be at peace, but happy to have a piece of it even if it's not a peaceful cake ;)
I did as you suggested and it does show the file as one would expect but the scss is as is its not compiled into css and so although its there its not being used by the page.
I have the setting in advanced for scss switched off so its not compressed
In the chrome console I get this :-

Resource interpreted as Stylesheet but transferred with MIME type text/plain: "https://mysite.co.uk/templates/shaper_helixultimate/css/custom.scss"

Should it not be compiled first and are we needing to compile locally then upload tot he file (if thats the case we can just add it into custom.css!)

Paul Frankowski - Staff

More than a month ago #Permalink
It's not recompiled file, because this file was added manually, it's not part of Helix.
I shown only method to insert file. You have to read more in internet how to use scss files.
Or customize Helix Ultimate deeper, sorry beyond support.
Ahh ok I see, I saw you were using scss and assumed you were letting us add to a file that would be compiled with your scss.
I know how to add a file and if we are compiling it locally then we may as well just add it to the custom.css file and for that we dont have to add a file link in the head so its not and ideal solution.
Shame, I had hoped we could use scss in the template without modifying
Hi Paul
There is a way
You can add a custom scss file in the scss folder. This will not be prepossessed. So it heeds to be imported into one that is.
So I added a line
@import 'custom'; Note its not custom .scss even thought thats the name of the file

Now you can add what ever scss to your custom file and its processed and added as css to the helix ultimate template.

Can I suggest you add the @import 'custom'; in the last scss file you load and place it at the bottom. It will not impede performance if its empty and will stop the updates overwriting the import line every time .
This should greatly help any developers and keeps it all in the right place. They just make the file in the scss folder (don't add it in the distro otherwise it will overwrite with the blank one) and 'Bobs your Uncle'

pepperstreet

More than a month ago #Permalink
(Following…)

Alexander van Aken

More than a month ago #Permalink
Can you guys add custom.scss as last inside master.scss with @import into helix please. This way it doesn't override on helix update and everyone can use scss. As long as you include a script that checks if there is already a custom.scss file on update or install so it will never be updated.

Paul Frankowski - Staff

More than a month ago #Permalink
I think it's good idea, I will ask.

Alberto Salazar

More than a month ago #Permalink
Following too

Alexander van Aken

More than a month ago #Permalink
I think it's good idea, I will ask.
any updates on this one Paul about adding custom.scss into master.scss? Starting blank template since I got too many issues and using helix ultimate with sp pagebuilder only.

The reason why I ask is, that when I choose a template and want to override colors according to template.css (which is compiled) I need to walk through 4500 lines of code to filter all color and background elements that actually use a specific coloring. That is an insane an unusable way of overriding. I ofcourse walk though each page manually and update only what stands out visually, but most colors are not conform a fixed enviroment that scss uses. Therefor I really hope in future every template will support custom overriding with scss. Untill then I won't use any template anymore. Which mean only sp pagebuilder subscription. Sorry. In addition, I hpe sp pagebuilder will get it's own variables enviroment too, since each element contains it's own set if styles which is a super drama to change for a page. And once busy and not happy, you can do it all again which costs more time then starting blank. And this means that for agencies like me it becomes a no go zone. I hope I can help to improve sp pagebuilder, I use it mainly but it makes the pain big now due to the above issues.

Paul Frankowski - Staff

More than a month ago #Permalink
I hope soon, as I remember it was quite often asked
--

Alexander van Aken

More than a month ago #Permalink
I hope soon, as I remember it was quite often asked
--
thanks!

ssnobben

More than a month ago #Permalink
Following too...???


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 111
Toufiq

Toufiq

Total Accepted Answers: 105
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 61
Ofi Khan

Ofi Khan

Total Accepted Answers: 55
Rashida Rahman

Rashida Rahman

Total Accepted Answers: 34

121

Templates

314132

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us