add user.css

[nadjak77]

Hi, is there a possibility to add a user.css? The customer want to have the possibility to add some custom styles. Thank you.

[pablop76]

https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

[nadjak77]

Thanks. But this is not what I asked. I want to add a css file and not a scss.

[pablop76]

Gantry 5 compiles to css. You can write styles like in css You can also use the css file here Base Outline -> Page Settings -> Assets ->CSS

[nadjak77]

I know and I am working with scss. It is really great. But now a customer want to add sometimes a special css. I think it is too complicated to explain to him how he has to compile the scss. I think he will forget it till he needs the next time. So I want to add a css file whitch don't have to be compiled.

[pablop76]

You can also use the css file here Base Outline -> Page Settings -> Assets ->CSS

[N8Solutions]

@nadjak77 What @pablop76 is absolutely correct, and in reading through here I don't think you quite understand what you can do with the custom.scss file. The function of it, while it allows you to add scss code, you can also add simple css. So there is no need to find another solution.

To that end, I'll give you a pro tip to help you organize things better with your custom.scss file so it isn't cluttered. 😉 You can import other scss files into the custom.scss.

This is how I organize my custom.scss file. I add the domain name at the top which helps to identify what site it is for since I may have several custom.scss files open at once while working.

You should always import the dependencies and breakpoints first at the very top of the file as I have done here.

You can then import the other scss files below that. I find it is helpful to further organize the files depending on what the file is for, so I've marked the following in my file

• Outlines
• Section
• Particles
• Atoms
• Custom

Don't worry about the order I have them. You can order those any way you like. It's just how I prefer to order the style sheets to keep track of things.

How to use this:

• All the files are in the /templates/g5_hydrogen/custom/scss folder. Simply replace g5_hydrogen with the name of the template you are using.
• Any file that you are importing into the custom.scss file that is stored in the folder should be named with an underscore _ in front of the name. For example, I am importing a styling file slideshow. It is stored in the folder as _slideshow.scss.
• When importing the custom styling files, only use the name without the underscore which is why you see it written as @import "slideshow";.

So for your particular need, I would store the user.css file as _user.scss and import it into the custom.scss file written like this @import "user";.

//
// example.com
//

// Import the SASS dependencies
@import "dependencies";

// Import Breakpoints
@import "nucleus/mixins/breakpoints";

// Import Outline Styles

// Import Section Styles

// Import Particles Styles
@import "slideshow";

// Import Atoms

// Import Custom Styling
@import "contact";
@import "mailchimp";
@import "convert-forms";

// Misc. Custom Styling goes below here.

Let me know if you have any questions but I believe this should sufficiently answer your question if you follow the instructions.