Set CSS in Particles?
-
-
- Web Tech Plus
- Sr. Rocketeer
- Posts: 100
- Thanks: 0
- Web Designer / Small Business Owner
-
I am developing a particle which will simply output a phone number (which is hyperlinked and have the option of preceding the number with a phone icon).
What I was thinking of was adding the functionality to add options to change things like background colour, padding, border-radius etc.
Rather than adding the styling inline could it potentially be added to the css file? I'm guessing setting up a bunch of variables in an scss file and then reading the details from the particle and then the scss file compiles.
Or maybe there is another way? Or maybe there is no way to do it.
Just thought I'd ask I'd like to develop a bunch of particles I can have for websites. - This is our Web Tech Plus Team account. Advice, design and other things are what we do, thanks for your help and understanding.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21651
- Thanks: 3104
- messin' with stuff
-
Sure... you can stick a Custom CSS Class on a Section, Particle, or Block... then just target that class with your CSS/SCSS
There are several ways you can add custom CSS into Gantry 5:
On the Base Outline or Per Outline Level:
Page Settings > Assets
Page Settings > Atoms
docs.gantry.org/gantry5/configure/page-settings#assets
docs.gantry.org/gantry5/configure/page-settings#custom-css-js
or at a global custom file level
template/custom/scss/custom.scss
docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Web Tech Plus
- Sr. Rocketeer
- Posts: 100
- Thanks: 0
- Web Designer / Small Business Owner
-
Sorry if I wasn't clear I know I can set particles and sections to have classes however I was wondering if there was a way to change certain elements within particle settings.
Eg A div has a default colour of white
Within the particle, there be a colour picker which you can choose a colour from which once saved is then applied to the div.
Pretty much like in the styles tab where you can set base colours and other defaults for outlines, I was just seeing if there was a way to do this in a particle.
This is partly due to reduce actual coding per site but I am finding more and more I'm using Gantry to handle most things and some clients want to change certain aspects of their website and these are included within Gantry particles. Joomla to a lot of clients is hard enough to learn without throwing Gantry on top to change one or two things. WHy not chuck it all into Gantry so they only have 1 place to go (depending of course what is on their website) - This is our Web Tech Plus Team account. Advice, design and other things are what we do, thanks for your help and understanding.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21651
- Thanks: 3104
- messin' with stuff
-
Particles primarily consist of 2 files... a YAML file (backend elements and fields) and a TWIG file (takes YAML variables and outputs the frontend HTML)... YAML and TWIG are VERY easy languages to understand and learn.
You can override any Theme particle in your /custom/particles/ folder and you can similarly create new particles in the same directory
Any custom CSS/SCSS is best configured in your /custom/scss/custom.scss file IMO but you could import a whole new _particle.scss file as well
So, you could create a new YAML field called "color"... this field could be a color picker or a simple drop down that either injected the color hex value directly inline on the HTML element or it could just set a class on the HTML element that corresponded to some CSS/SCSS.
Creating custom Particles is beyond the scope of support here... but we have several tutorials that should get you on the right path
docs.gantry.org/gantry5/tutorials/overriding-particle-settings
docs.gantry.org/gantry5/tutorials/using-...-picker-to-your-site
docs.gantry.org/gantry5/advanced/creating-a-new-particle
docs.gantry.org/gantry5/advanced/customizing-theme-files
docs.gantry.org/gantry5/advanced/file-overrides
docs.gantry.org/gantry5/advanced/particle-yaml-field-types
docs.gantry.org/gantry5/advanced/twig-filters
You can of course Google around for other YAML/TWIG tutorials - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
Time to create page: 0.046 seconds