I have loaded all the dependencies that are required for kendo grid and chart. I have even checked the node_modules/#progress folder. The grid and chart are loaded but the styling is missing.
You need to install the KendoUI default theme, which is not a dependancy to other kendo packages.
#progress/kendo-theme-default
See documentation and tutorial here :
http://www.telerik.com/kendo-angular-ui/components/styling/
You can then include the all.css file in your tag, or include it in your root component (usually app.component) with Encapsuation set to None, so it can be applied to all components beneath.
If you want to use the scss file, you need to configure your package manager to be able to build scss files.
Related
I am new to SAP Commerce and Spartacus. I have created a new Page Template, Content Page and defined some slots in that.
I have used the existing component(s) in the content slot(s).
Now, How and where can I add the custom styles for the new Page Template?
Would you please refer to the documentation regarding Component Styles?
https://sap.github.io/spartacus-docs/css-architecture/#style-library
Since Spartacus components are built and distributed in libraries, component styles cannot be used. These styles would be pre-processed and baked into the component library. This means that the CSS rules would not be optional, nor would they be easily customizable.
Instead, component styles are delivered optionally in the styles library. You can use those styles, extend them, or completely skip them and build your CSS rules from scratch. The contract between the style library and the component library is done through the (unique) component selector.
Best regards,
Jerry
Currently I found only one solution is to add global styles and use grids to make proper layout.
I would like to include a Model in the theme, but I get the compilation error. How can I include it.
To include cs files in your theme it needs to be it's own project. You can create it using this command in the orchard command line
codegen theme MyTheme /BasedOn:TheThemeMachine /CreateProject:true /IncludeInSolution:true
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.
This relates to an Xpages project using openNtf's Extension Library for Domino 9.0.1 V 16 (2016-01-28). There is a custom theme applied that extends extLib's Bootstrap3 theme.
Now I also applied Mark Leusink's debugToolbar Plugin (V 4.0.1, 2014-03-10).
Unfortunately all tables that are display inside the toolbar are partially "destroyed", as in this example:
Debugging the resulting html I see that the "label" cells of the debug table are assigned class="label" or class="label wide". Unfortunately bootstrap.css applies a display: inline style to a .label selector.
Currently I solved this by applying my own custom css file to reset toolbar styling; but I wonder whether there might be a more elegant way, maybe some kind of property that I simply missed out here. Or is this something that have to be done within the toolbar's source code?
Please add this as a defect on the project, so the contributor is aware and can resolve.
Alternatively, download the source code from https://github.com/OpenNTF/DebugToolbar, contribute the fix and make a pull request.
Hopefully Paul's and my entries at github and within the openntf.org project will help resolving this issue. Meanwhile my workaround seems to be the only option here;
As I mentioned above I created a custom styleSheet with just one line in it:
div.dBar table.grid td.label{display:table-cell;}
Then I created a cusom control as a container for the debug toolbar so that I could link my custom style sheet as a resource. The debug custom control finally is added to all the xpages where I want to have the toolbar.
Maybe this can help others, too.
I'm creating a custom theme for my new Orchard site. The shape tracing module is incredibly useful, but for some reason it isn't rendering in my custom theme. I'm not sure what I might be missing to get it to appear.
When I set my site to use the theme TheThemeMachine, it appears just fine at the bottom of the page. When I compare the rendered source from the TheThemeMaching and my custom theme, I see all the CSS & JS references in the head for the shape tracing module. However when I scroll to the bottom of the source of my custom theme, I don't see all the script blogs with the JSON objects. I just see a lot of empty script "shape-tracing-wrapper" blocks.
Ideas?
You're missing a zone named Tail in your document.cshtml. Compare your theme's version with the one in Core/Shapes/Views.