Custom CSS in Content pages with Node

[turn3636]

We are playing around with Node.js and had a question about the custom css in a content page. I’ve seen several posts on this but I don’t think it was specifically for Node. So, my question is, are you supposed to be able to see custom css styling while designing a content page? It seems that all that is rendered is the base Bootstrap, but none of our custom styling is applied while in design view. Once we upload, the custom styling is there. Just wanted to make sure this was expected behavior.

Thanks,
Chris

[turn3636]

So, if I attach a custom.css file in the project options, why can I not see it render correctly in the design view with a content page in with Node? Renders correctly when pushed up to the server. Am I doing something wrong?

[patrick]

The stylesheet defined in the project options should be rendered on the content pages. Some complex css selectors will not work, but simple class selectors should work.

[turn3636]

No selectors work. I have simple button color styles, button size styles, etc. I also have more complicated stylesheet, material design bootstrap which is very large and complex, but for now I’m just trying to get basic override styling to work. So what type of complex selectors are you referring to?

After just looking at it now, I can click on a button, and in the design tab I can see the custom css style for the button, but it does not render it in the design view. This will make designing in the content view very difficult for anyone using anything but the base bootstrap styling.

[patrick]

Only the custom stylesheet defined in the project options and the css from the used frameworks are injected in the design view of the content page. Any other css files included on the main page will not be injected.

You say the style shows in the Design panel, does it also show it in the Styles panel? Could you perhaps upload a screenshot on how it looks in design view.

[turn3636]

Sure. Here I have the design tab open and when I click on the button element, you can see the css styling for the button background color is purple, but does not render that way

and in the styles tab:

Here is my css code:

And my project settings:

I have noticed though, that when I save the page, then I have to re-attach the style file

It’s all the same result though.

[patrick]

I noticed an error in your include code <%- await include('partials/breadcrumbs', Object.assign({}, locals, )) %>.

Remove the , at the end like <%- await include('partials/breadcrumbs', Object.assign({}, locals)) %>.

[patrick]

Here a screenshot where I try the same with exact the same code as you.

[turn3636]

Patrick, I removed the coma at the end, but the result is the same. I’m also a little confused, because your last example you show me is exactly what I had. You have the coma as well. Either way, removed the coma and still no custom css.

[turn3636]

So it looks like that I may not done something correctly on my routing. When I saved that file with the missing coma and viewed it on the server, I got an error 500. I created another content page in the root (pages folder) and it seems to work correctly now.

[turn3636]

Played around with this all weekend and found the issue, or maybe I’m just doing it wrong. Whenever I create a new page under the root folder under Pages, custom css file renders correctly. However If I create a folder under Pages, and create a file in that folder, custom css does not render correctly.
If I create a route, custom css still renders correctly.
Is this the proper way of the folder structure for files? Is there another way I need to be doing it, or is their a bug that would not allow the custom css to render correctly in a files that is inside another folder?
BTW, all of these render correctly when pushed to the server, so the actual file paths are correct.

[patrick]

Thanks for the research, I will investigate it.

[StevenM]

@turn3636 was this fixed for you? I seem to be having similar issues.

Many thanks.

[turn3636]

Yes, I just checked it this morning and it seems to be working correctly for me. I am still on 3.2.2.