Using scss variables in particle
-
-
- ka3media
- Rocketeer
- Posts: 96
- Thanks: 1
-
Hi, i'm trying to avoid inline styles while using the colorpicker for element styles. As far as i understand i can set the YAML variable "background" and "color" like this:
background: type: input.colorpicker label: Background default: "#ffffff" text-color: type: input.colorpicker label: Text default: "#666666"
And following the sentence "Second, it provides fields the theme can hook to, providing the color variable used when the page is rendered." it says that variables are provided... I think this means the YAML variable. So i can use them with {{partical.color}}
How can I set the value for scss variables I'll use in the _myparticle.scss like $backgroundcolor or $color? Did I have to set them wihtin the twig file or is there a gantry function i can use to avoid more code to set them manually?
Thanks in advance - Last Edit: 2 years 9 months ago by ka3media.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
You cannot use a SCSS variable in a YAML file - YAML is a markup language that is just "static" content.
What you need to do is either use the SCSS variable in the particles SCSS file. Or, as we do in some particles, you can add a setting field to you particle YAML that allows you to choose the color variable that you want to use, then in the TWIG file for the particle you can act upon that setting by adding inline styling (set dynamically) according to that setting. Or, you can use the new setting to add a class on the appropriate html tag and then use that in the particles SCSS file to change the styling (because the SCSS variables are available only in SCSS).
Check our our existing particles (e.g. "infolist" particle in "Orion" when we let you choose accent-color-1 or accent-color-2).
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ka3media
- Rocketeer
- Posts: 96
- Thanks: 1
-
Hi Mark
for sure i can use it inline as inline css. But i like to avoid inline css.
The the idea is to use a variable in the partical _scss. Like rockettheme does it to set $accent-color1 or $accent-color2 within the template or the blueprints for the sections.
name: Accent Colors description: Accent colors for the Helium theme type: core form: fields: color-1: type: input.colorpicker label: Accent Color 1 default: "#4db2b3" color-2: type: input.colorpicker label: Accent Color 2 default: "#8f4dae"
So i can use these colors later within the template. But where are the variable defined... because within the yaml (accent.yaml), they are only yaml variables so far. But there are defined as :root in a way that they can be used all over the scss files. Where and how is this done?
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
The accent color values are set on the "styles" tab of the base outline.
see screenshot - the fields are set in the "accent.yaml" blueprint. So, Gantry 5 will set the scss variables based on these values. Those scss variable can then be used in any scss file.
You can create your own blueprints too and this would set your own scss variables base upon the yaml file name and the field name in the yaml. I just created a bananna.yaml file in the /blueprint/styles folder of the Template and create two fields called "color 1" and "color 2" for the "core styles section" and that then means that I can use two scss variables called "$bananna-color-1" and "$bananna-color-2".
You misunderstand what I mean by using inline styling - sure you wouldn't want to write you own html that had inline styling but your can dynamically generate and inline CSS file that styles the particular particle instance (based on particle ID) to apply a styling color to that particular instance.
Regards, Mark. - Last Edit: 2 years 9 months ago by MrT.
-
The following users have thanked you: ka3media
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
This message contains only secure information that is visible to ka3media, moderators and administrators
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- ka3media
- Rocketeer
- Posts: 96
- Thanks: 1
-
Hi Mark,
thank you for your anser. This was exactly the answer I was searching for, bacause this is undocumented.
as an active volunteer of the Joomla Project, I did the same every Joomla user does, if there is an open question.
I thought till now that the rockettheme forum and the sections for free extensions (like gantry, that is released as Open Source) where community driven.
I paid subscription for many years, because I love the work RT is doin, exspecially Gantry 5. I hold lectures on german Joomla Days about Gantry to support the system. And I'll get an active subscription again soon to support the RT work... Although the design and the intervals of new designs have decreased considerably in the last year (after Wordpress was added as a product) and I now design my templates myself.
I would never ask for unpaid professional support! The consequence of this communication must then be for me to ask my questions in social media or Joomla forum in the future... which I find a pity. Because here are the Gantry users with Gantry know how.
But again, thanks for your help till now.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
Gantry 5 is an opensource project and there is a Gantry 5 chat room on their github project
https://gitter.im/gantry/gantry5
where you can chat with likeminded developers - also there is an issue sytems on github where you can log tickets too
https://github.com/gantry/gantry5/issues
. As an opensource project you can also contribute to their documentation if you think it's lacking by doing a pull request.
RT extensions might be free but support for them is not and never has been. We do require a current subscription for support on extensions.
You're right that without subscriptions RT won't be able to make support available - so if you want to keep RT support going we would be very grateful for your support.
Anyway, as you saw, I answered your question anyway despite not having a current subscription. We do like to support current and past members wherever we can but subscriptions are our lifeblood, without them we won't be able to continue to offer support.
Thanks for your understanding.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.064 seconds