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 !?
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?
Can I import CSS and JavaScript files to Vuetify for importing some components? Or Can I put an entire theme that would be a basic HTML theme?
For example, I found a tool that is needed in the project can I integrate it with Vuetify such as Datatables, JS validation Plugins, or some statistical widgets, even an entire theme?
Vuetify is a UI CSS framework.
So it will grant you some CSS components.
You can add pretty much what you want to it. It will have the issue of needing an overwrite in specific places (CSS cascade/specificity mainly).
But otherwise, nothing special will block you from using it alongside other things.
I am very new to Angular and currently I am trying to add styling to an existing project.
The project has been constructed using components. So for each page there are 4 files,
mypage.component.css
mypage.component.html
mypage.component.spec.ts
mypage.component.ts
I can easily style the page by adding the styles to the css file in the component and the page style works perfectly.
However the issue is there are many pages that require the same styles again and again.
I can copy and paste the same styles to each css file and it works.
But this is not the most elegant or efficient way to do this.
I want to know what the correct way to add a global.css file so that it can be accessed by each page. So that way the css is only written once.
I have googled but haven't found anything that explains how to do it in simple ways.
Thanks
Angular adds the style.css/scss file by default to your project once you created it using the ng new command, and include it within the angular.json config file to be available across the components of the project.
So you can add any global styles within src/styles.css(or scss) file, to be implemented everywhere.
you can add your generic css into style.css/style.scss.
I am building a Liferay Angular portlet that uses angular material inputs and some inputs are not rendering well at all. I am guessing that some CSS/JS is missing, but I can not figure it out what exactly.
My styling css file looks like this:
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
Also, when I inspect with Developer tools, I see the following warning:
Could not find Angular Material core theme. Most Material components may not work as expected.
I have also tried referencing the css file from the AppComponent with styleUrls: ["/o/<my-portlet_name>/lib/app/styling.css"], but without any luck.
So, my question is - How to reference a CSS file within an Angular Portlet in Liferay ?
I have read over and over again this article and finally I made the following changes:
changed the styling.css file into styling.scss
changed its content to #import "../../../../../node_modules/#angular/material/prebuilt-themes/deeppurple-amber"; - I am not sure why are necessary 5 of ../, I was expecting that by using ~ to know where node_modules folder is
added the following line in the property attribute of the #Component annotation in my Portlet: "com.liferay.portlet.header-portlet-css=/lib/app/styling.css" - yes, the extension is .css and not .scss
Really simple answer possible but I've not had the chance to work with SASS yet and especially not in Wordpress so bear with me.
I'm working on a site that has been developed in Wordpress and need to make some edits to the CSS (just increase an element's min-height from 54px to 64px at the moment). It has been done using SASS and folders have been set up for the partials and imported via a main.scss.
Where I've got stuck is that I don't understand what I need to change or action to make the _general.scss file (imported via main.scss and in a folder) compile to update the style for this element. I've changed the value from 54px to 64px as it has saved in the _general.scss but this isn't reflected via the browser (if you view the actual scss page) hence it doesn't update the style.
I know I need to recompile it some how ...but how?
Sorry in advance for what is a newbie question from an experienced coder! (embarrassing!)
You do not necessarily need to edit the CSS of the template. You always have other options at your disposal.
you can either create a child theme and make changes in it
you can also create a custom style sheet and import the main stylesheet in your style sheet and put your code into your stylesheet
or you can simply download a plugin which will allow you to put your custom css in the backend of wordpress and the plugin will import the custom css in the end of the main css file.
Following is a link to a plugin that will give you a window to add your custom css into:
https://wordpress.org/plugins/simple-custom-css/
Please use this and do not get messed up with SASS.