SOLVED How to add a CSS file compiled to a particular template style?
-
-
- Marc
- Newbie
- Posts: 7
- Thanks: 0
-
Hello,
I have a custom.scss file for a website. I have to use several different styles sheets for particular pages of the site. I want to add different CSS using the Panel administrative styles, without using custom.scss. I want to use Sass.
Is it possible to create SCSS files compiled in CSS and linked in: Global Page Settings> Head Properties> Custom Content, example: <link rel = "stylesheet" type = "text/css" href = "templates/g5_helium/???/??/nco.css"/>
NCO.CSS is the compiled version of NCO.SCSS. If it is possible in which repertoire does this SCSS be created? The compiled version will be in which repertoire, CSS-compiled?
Thank
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 6 months ago-
My advice is to stick with one custom.scss file. You can make a CSS statement apply to a particulr page by using the menu item id in your selector (there is a class on the body tag of the form itemid-123). Also on the body tag is the outline id (outline-123) class. SASS is virtually identical to SCSS and you can use that in your custom.scss and also any inline in the css/js atom or as an asset on the page settings tab.
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.
-
-
-
- Marc
- Newbie
- Posts: 7
- Thanks: 0
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 6 months ago-
Thank you for your quick reply.
So I created CSS files in the custom>css directory and I linked them in the corresponding Styles: Page Settings > Head Properties > Custom Content
eg. for “OCA Intranet” Style: <link rel="stylesheet" type="text/css" href="templates/g5_helium/custom/css/oca-intranet.css" />
for “Casoca”: <link rel="stylesheet" type="text/css" href="templates/g5_helium/custom/css/casoca.css" />
For another site I proceeded differently by using scss files in the scss eg directory:<link rel="stylesheet" type="text/css" href="templates/g5_helium/scss/andes.scss" />
And it works.But I'm not sure this is the right way? I still haven't fully understood how CSS works with Gantry.
What is the best way to do it?
Best Regards
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 6 months ago-
You can do it that way. But, as for the best way...
I wouldn't create lots of css/scss files - I would just use the one custom.scss file. If you want to make some statements menu item (page) or outline (template) specific then you can just qualify your CSS selector a little more by using the classes on the body tag of the form .itemid-123 (menu item ID 123) or .outline-456 (outline or template ID 456). If you absolutely have to break the scss down into smaller files then begin the filename with an underscore (e.g. _myscssfile.scss) and then import them into your custom.scss file with @import "myscssfile";
Note that a scss file can contain CSS.
By taking the approach I suggest you should start your custom.scss with @import "dependencies"; thereafter your scss statements will be able to use the Gantry 5 mixins and variables.
Regards, Mark. - Last Edit: 1 year 6 months ago by MrT.
- 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.
-
-
-
- Marc
- Newbie
- Posts: 7
- Thanks: 0
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 4 months ago-
Hi Mark,
Thank you for your very interesting informations, but they do not seem to be adapted to our problem.
A few clarifications before closing this ticket.
In fact we use Joomla and Rocketheme templates to manage different websites. These correspond to categories in Joomla.
It's not multi-site but it looks like it.
For example from a Joomla site we use a single template, for each site (category). We create a different style adapted to each of them.Eg. Style1> css1 > Site1, style2 > css2 > site2, ...
Currently it works with the JSN template.
With Gantry templates, custom.css contains only the style rules common to all “websites”.
if I understood correctly so as not to overload custom.css we must add a css file for each site in the custom directory? In fact this is what we are currently doing, but is this the right solution?
This image is hidden for guests.
Please log in or register to see it.
best regard - Last Edit: 1 year 4 months ago by Marc.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 4 months ago-
Nope.
You should have one and only one custom.scss file. That will be loaded and apply to every single page of your site.
Within that custom.scss file you can qualify your CSS selectors to refine the application of that CSS statement (i.e. for a specific viewport size using media queries, to a particular menu item using the class of the form "items-123" on the body tag of the page, to a particular outline using the class of the form "outline-123" that can be found on the body tag of the page, and to a particular style using the class on the body tag of the form "g-style-preset2".
Any savings that you might make by having seperate files are trivial and likely undetectable from a users perspective. You would make great saving by employing a compressor tool such as jch_optimize. Also, by using conservative caching (global config) and gzip compression (global config).
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.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
Re: SOLVED How to add a CSS file compiled to a particular template style?
Posted 1 year 4 months ago-
I've done it for you but for future reference...
If your issue is now solved, please EDIT your FIRST POST in this thread by adding [SOLVED] at the start of the title and then select the TICK icon. This lets the moderators know that it can be moved to the solved section.
If you can't edit the first post this will be because it is more than 7 days old, so please reply stating that the topic can be closed and a moderator will do this for you.
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.045 seconds