Hi,
I have been learning a lot about node using Wappler these couple of months. I wondered how to add CSS files to the content page or all CSS files should be with the layout page.
I have tried many ways to add CSS files to the content page and even restart the computer, but there has been no result. Maybe someone can redirect me to the best way to handle the situation.
Thanks.
Links to the CSS files (Bootstrap, custom) are added on the layout pages and styles in those css files will automatically apply to all content pages attached to that layout.
Is it a custom stylesheet in the layout page that you want to apply to the content page? Make sure that a link for the custom style file has been added after the Bootstrap css file link (whether using locally or via CDN). Also clear the browser cache before reopening the content page to check whether the new styles have been applied correctly.
Hello @guptast
I wanted to apply a custom stylesheet to the content page. The custom stylesheet in the layout works fine, but not the content page.
The system shows on the top right corner that it is attached. But when I preview the page, it does not show it.
Do you think I should add the file differently on the content page?
Thank you again for your reply.
Hello Mamadi,
Check whether the custom search.css file has been added after the Bootstrap5 Cerulean css file.
All the required scripts and css files are included in the layout pages only. These can’t be added on the content pages. So, in your case, scripts and css files included in the layout page called header will apply to the content page search.
If I understand correctly, we can’t add custom CSS to the content page.
That’s not correct. You can’t add link to a custom stylesheet in the content page. This is different to applying a custom CSS to the content page. In my SPA project, I have these two CSS links in the layout page. Any content page attached to this layout page will get the styles applied first from Bootstrap5 and then from custom stylesheet if applicable.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="/css/custom-style.css" />
In a SPA, all links to Bootstrap and custom stylesheets can be added to layout pages only so that these resources are available / added to content pages at the load time or dynamically loaded in response to any user actions.
Do you have a publicly accessible website for this project?
I understand now. In this case, the use of the content page is very limited compared to the standard page.
Understand that applying the layout on 10 pages with different custom CSS links is not very effective. It is better to have a link that applies on the given page. Adding all these custom links to one layout reduces the purpose of the content page.
I m currently developing the site on the localhost. But I will upload it soon.
Thanks for your feedback, I understand how everything works.
All the best with your project 