How to customize Nihilo.css? - javascript

One of the available themes in Dijit is Nihilo. I am using dijit/layout/.. for displaying some charts and graphs . I want to change some of the styles being used. Can any one tell me how to customize Nihilo.css and use the customized version?

Don't change nihilo.css, create another CSS file and put the link tag for the second file after the link tag for nihilo.css.
This way, if you upgrade Dojo, you will not have to merge your changes back in.

If you need to customize nihilo, I would suggest to have a look at this official guide Customizing a Theme.
Basically the idea is to build your theme, based on nihilo leaving the original nihilo untouched,.

Related

for making boostrap cdn work, do I need also the javascript cdn or only css, or all 3?

which one do I need to use?
https://www.bootstrapcdn.com/
CSS or JS or BUNDLE or all 3?
I want to use buttons styling, grid, card (and maybe dropdown but in the future)
<!-- which one? -->
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js
TLDR:
if you want basic styling, use a CSS-only file.
if you need interactivity then use also javascript
CSS is mandatory
JS is optional
I suggest seeing the official docs https://getbootstrap.com/docs/4.4/getting-started/introduction/
"Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins."
they basically say if you want some extra functionality then go for javascript one (for example you want a tooltip, a dropdown that opens and close)
if you want instead of coloring, or changing size, then use only the CSS link. (buttons are one of this case)
however, if you use this only to learn, I suggest importing all the files there, for not have any import issues.
once you will learn it, then try to use one cdn link at the time.
if you want to use bootstrap in the production site, then maybe try using the npm package instead.
npm i bootstrap
(but first try to learn using CDN, the once you know the basics, then use npm)
also remember to use <link> tag to make HTML import the CSS file, by copy the first link appear you once you open the dropdown
If you are planning to use dropdowns, poppers and tooltips, use all. If you only need styles use bootstrap.min.css only.

How to create customize Html Editor in Extjs

I have requirement to create Customize Ext JS HTML Editor. I am facing problem in creating it.
Since you're not providing any information at all there are several solutions:
You can use CSS to style your HTML editor
You can use another editor, like TinyMCE to add extra functionality
You can have a look at the documentation on how to alter functionality of the current editor any maybe even create a subclass of it.
Hope this helps a bit.

How to add javascript in addition to pure text in Joomla Article

More specifically I am trying to implement a wufoo form in a joomla article, but I need to add text, in addition to the code. I tried to just paste the code the article but all I get is the code as text. What am I missing? If it helps I have installed jCode, but I cannot find a way to add text as well in addition to the form.
I am open to other ways as well to solve this issue.
Joomla by default doesn't allow you to import code like PHP or Javascript through articles. For this, a plugin need to be used. I see you've tried using jCode, I've never used this before so can't provide any documentation on it.
I would strongly recommend using Sourcerer as a plugin for importing Javascript and PHP through your articles. It's free, well documented, well supported and easy to use. Once you've installed it, enable the plugin. Then in your article, you can use something like the following:
{source}
<script type="text/javascript">
alert('Hello world');
</script>
<?php
echo '<p>Hello world</p>!';
?>
{/source}
There will be a small button under the article textarea for Sourcerer which will bring up a popup window for you to enter all your code in.
Hope this helps
Alternate options are for your problem
If you are an admin user Remove filter option for article.
Go to article section -> Options -> Text Filter Options -> Choose your user group -> Apply no filter.
Another option is to create a module and assign that module to your article like below.
Create a module that have your forms. For module development tutorial
And create an article and set the module inside that like.
{loadposition contact_form_pos}
Inside your article just mention the module position like above
for more
Hope it make sense..

how do you make a Theme switcher using Jquery and JavaScript?

I want to make a theme swither using jQuery, I see the example made in the docs of the jQuery mobile page, but it's exhaustive as it dublicates the same page but with different theme swatch as a result it affects only one page in the App, I want a theme switcher that affects all the pages of the App, thanks.
Perhaps storing the selected theme (local storage/cookie) and using jQuery to grab that value and add a style element to the page?
Consider using jQuery UI and their themeswitcher - http://jqueryui.com/docs/Theming/ThemeSwitcher
It works great on our internal site. If nothing else, look at the way they do it and you should be able to come up with your own customer solution rather easily.
Use a session variable to determine which CSS to include.

Do Auto complete plug-in for jquery comes with out css

Is their any jQuery plug-in for auto complete that allows our own styling?
Every library i see comes with a built in cascading style sheet.
Yes and no.
At http://jqueryui.com/download you can select "no theme", but you will still get an .css that you need to use. That css is used in the javascript code to open, close and interact with the autocomplete menu and text.
It is pretty easy to alter the .css to make it look like you want it to. Try some small changes and reload the page to see what happens!
I don't have a perfect script for you, but you can download the Jquery-ui library with the "No Theme" option.
In fact, there is a minimalist default theme, but you can easily override it in order to build your own theme.
jQuery UI Does indeed allows user-based styling. You can simply change the css file as if you'd do from scratch. Heck, just write down the class names and create your own...

Categories

Resources