We have styles.scss (base css file) and also providing option to load custom css url so custom can change their logo or colors...
Below is the requirement:
if custom URL is not available then it should load base css file
if custom URL loading is failed then it should load base css file
if custom URL is provided then it should load custom url and render the UI
I tried to option to add custom css in stylsheet in index.html but it is not loading as expected. I am getting base css is loading first and then custom css so i can see transition from base css to custom css.
how we can load only custom css when i have custom URL ?
Please let me know
Have you tried compiling it with the --aot flag?
If that doesn't work, you could use some type of semantic nomenclature (like maintainableCSS) so that you could just give different html class names to your elements so that they are only referenced by your component's css stylesheet instead of style.css
Related
I have website which is themable. the website has a theme editor which allows for dynamically change the website font. When the user selects a font, I want the font to be loaded dynamically from a css file.
The website is a static website using next export thus there's no next server in play.
when trying to load global css in runtime from the theme editor component i'm getting
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js.
Read more: https://err.sh/next.js/css-global
But i cannot move the global css loading to the custom app file since i want to only load the fonts as needed (otherwise first load sucks).
using css modules doesn't seem like the right path since i need this to be applied globally.
The following SA question is similar, but the resolution there (moving css loading to custom app) is not valid in my case.
Next.js Global CSS cannot be imported from files other than your Custom <App>
What is the best way to achieve this?
I'm testing the use of a static html template for TYPO3 (in typo3 directory). I copied the fragment <body> ... </body>
It should be like on img_1a:
and it's like img_1b, instead:
Sure, the original template "introduction" can not load my own style.css
I followed the instructions as here, img_2:
How to include a custom CSS file in TYPO3
There is CSS yet included from the Introduction Package. You should either remove this CSS or overwrite the CSS.
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?
I have a custom directive which has mutliple html elements with classes applied on them, and I have a CSS file specific to this directive, where all these classes were defined.
What is the better way of loading this CSS file on demand, whenever I use the custom directive(in any of my views?
One possibility would be to dynamically generate link tags and add them to the document head. You'd probably want to wrap this behind a service that can keep track of which style sheets have already been loaded.
You'd also want to make sure you wait until the style sheet has been loaded and applied before showing your directive so that you don't get flashes of unstyled content.
Liferay automatically appends the themeId (along with other information such as browser) to the URL when including my portlet's css files. When this happens, I find that not all my css styles are loaded. I try to access the css file directly, using /test-portlet/css/main.css?themeId=classic, and only some of the styles are loaded. When I use /test-portlet/css/main.css without the themeId appended, all the styles are loaded fine.
I have been unsuccessful in finding out why. Can anyone help me with this? I am using Liferay 6.1.1 (6.1 GA2).
Angeline can you tell me where you are including your /test-portlet/css/main.css ?
This main.css file has your custom css specific to your portlet. So to load your css when the portlet is accessed on Page. You need to either include in jsp or the recommended way that is to include below line in your test-portlet liferay-portlet.xml
<header-portlet-css>/css/main.css</header-portlet-css>
This will load your css changes.
Hope this helps !
I had the same issue. Try to rename your css (do not use main.css) and it should work.