Is it possible to theme jquery-ui via npm?
Or do we still have to go through the download builder?
The jquery-ui package has the default theme included at:
./node_modules/jquery-ui/themes/base/*.css.
If we require('jquery-ui') that won't load any css styling as well, right?
Do we need to require('./jquery-ui/themes/base/all.css')?
Or is there a better way?
Is it possible to theme jquery-ui via npm?
Yes, you can use jquery theme package (link).
npm i jquery-ui-themeroller.
And import it
require('./jquery-ui-themes/themes/dot-luv/theme.css');
dot-luv is the name of theme.
Here is official document, not only theme list also tool for customize theme.
Remember to import jquery css file first require('./jquery-ui/themes/base/all.css')
If we require('jquery-ui') that won't load any css styling as well, right?
Yes, you should import require('./jquery-ui/themes/base/all.css'); to get the style file.
Do we need to require('./jquery-ui/themes/base/all.css')?
It is the simplest way to get all widgets style. But in most case we only need several widget.
That say we want datepicker only, we should import css file by
require('./jquery-ui/themes/base/core.css');
require('./jquery-ui/themes/base/datepicker.css');
And now you can use your own theme in the end.
Related
I am new to Liferay, and I still don't know the difference between the various 'kind' of Liferays.
This Liferay is what I am talking about.
I understand that you have to create a page first, and then add components (fragments) in it.
I also understand that you can go to fragments, and create a custom fragment with a custom CSS, and then import it into your page.
However, what I want to do is have a global CSS that I can use for all fragments inside a page, rather than having to add CSS for each fragment.
Is that possible, and if so, how?
I know I can use the 'style-books' which apply to an entire page, however, I don't know how to customize them, and it doesn't seem that that's even possible.
To avoid coding, you can use the css additional textbox provide by theme settings.
It's a whole page css addon for every pages in the site
I am using material-ui in my react project. I found there are two different ways to use their icons.
One is from this web site: https://material.io/tools/icons/?icon=3d_rotation&style=baseline. You can download the icon on the left panel by click it. Or you can install material-design-icons on your project.
Another way is to import them like:
import SearchIcon from '#material-ui/icons/Search';
import ArrowDownwardIcon from '#material-ui/icons/ArrowDownward';
import Close from '#material-ui/icons/Close'
I wonder are they same? Or what is the different?
If you're using Material-UI, the way I (and they) suggest to use them is with SVGIcons, the #material-ui/icons package. What I typically do is look up icons on that website you posted and pull them in from #material-ui/icons.
For example, on that website you'll see one called alarm_on well you import it from that package like import YourIcon from '#material-ui/icons/AlarmOn'.
And the reason I like to do this and not use Icon Fonts is because when people with bad connections try to load your app, the icon might not even load and they'll see an ugly "alarm_on" in plain text where the icon would be.
Take a look at the usage section here.
I am using the application layout control from the extension library. In my application banner links I would like to include icons from font-awesome but I do not manage to achieve this.
Someone to the rescue?
Balassaitis says everything I was going say only better and with pictures: https://xcellerant.net/2014/04/07/implementing-font-awesome-4-0-3-in-xpages/
NOTE: the FA classes don't work with the img tag. Use the i tag in your source instead.
Here is a npm package I am using:
http://blueprintjs.com/docs/#components.usage
I would like to use their component with CSS, but I don't their CSS affect to my own CSS. Is this possible to allow the CSS package ONLY affected in that npm components? Thanks.
Precisely what #barry-johnson said in his comment above: we use pt- as a namespace for all of our CSS classes to avoid collisions with your own application styles. For instance, you could use your own .custom-button alongside our .pt-button with no conflicts.
However, if you use a Blueprint React component, then it's going to use the Blueprint classes, and you're going to want to use our CSS (because it's not just pretty colors, there's some useful layout stuff in there too). Hope that helps!
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}