How could i include the custom css & JavaScript for particular module in DotnetNuke?
I understand that it is not like normal ASP.Net page.
If your module has a file named module.css in the root of the module folder, it will automatically get included on the page with the module.
For other CSS and for JavaScript, you should use the Client Resource Management framework to include the resources you want. Something like this:
<%# Register TagPrefix="dnn"
Namespace="DotNetNuke.Web.Client.ClientResourceManagement"
Assembly="DotNetNuke.Web.Client" %>
<dnn:DnnCssInclude runat="server"
FilePath="~/DesktopModules/MyModule/css/the-style.css" />
<dnn:DnnJsInclude runat="server"
FilePath="~/DesktopModules/MyModule/js/the-script.js"
ForceProvider="DnnFormBottomProvider" />
You can also use this:
<link rel="stylesheet" type="text/css" href="<%= ControlPath %>/module.css" />
To add external JavaScript to a custom module:
string externaJs= "externaJs";
Type cstype = System.Reflection.MethodBase.GetCurrentMethod().GetType();
string cstext = "<script src=\"" +
ResolveUrl("~/DesktopModules/ModuleName/js/JsName.js") +
"\" type=\"text/javascript\"></script>";
if (!Page.ClientScript.IsClientScriptBlockRegistered(externaJs))
Page.ClientScript.RegisterClientScriptBlock(cstype, externaJs, cstext, false);
Related
I have a cakephp app which I need to redirect some of its urls to some pure html pages. I can not change these html files as a layout and .ctp file. how can I control the routes of urls like:
mysite.com/en/something
to show some html files in the host?
For your route : mysite.com/en/something
Open you routes file located at app/Config/routes.php
Add this line
Router::connect('/en/something', array('controller'=>'pages','action'=>'something'));
In your Pages controller located at app/Controller/PagesController.php Add action to handle this route
class PagesController extends AppController{
public function something(){
//To disable the layout set it to false
$this->Layout = false;
}
}
And then, put your html code in the view located at app/View/Pages/something.ctp
<html>
<head>
<!-- your page headers -->
</head>
<body>
<!-- your body content -->
</body>
</html>
I have created a working web page page.html, which loads page.css and page.js in the header:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
Prior to that, I had already a homepage. Now, I want to create a state of homepage that leads to subpage.html which should have exactly the same behaviour as page.html:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('subpage', {
url: '/subpage',
templateUrl: '/subpage.html',
...
});
}])
However, it seems that, unlike page.html, subpage.html has NO header place to load page.css and page.js.
So, what is the best way to set the fields of the subpage state and write subpage.html, from page.html, page.css and page.js?
Would it work if I just load page.css and page.js in the header of the html of the home page? There is a risk to have conflicts with existing items in the home page, no?
Yes. I realise that, in the beginning of subpage.html, we could load directly js and css:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
One advantage of loading in subpage.html rather than in homepage is that we load these files only when we need them (i.e., opening the subpage).
In terms of "conflicts" with the home page. I guess, it is more or less similar to having js and css later in the homepage or never (when we don't open the subpage).
notify({
classes: 'alert-danger',
message: response.data.errors[e]
});
I use this https://github.com/cgross/angular-notify
My notify still show blue color.
How to implement this classes?
I had this problem and was able to resolve it by changing the order of the css files in the main index.html file of my angularjs app. Apparently you have to list the angular-notify.css before the bootstrap.css file. This resolved the issue for me.
<link rel="stylesheet" href="bower_components/angular-notify/dist/angular-notify.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
Once I switched the order of the CSS styles, the bootstrap classes apply properly using your code above.
How can I get RequireJS to load .LESS? Until now it has been nothing more than a pain in the a.. to get it to run.
In my backbone config file i have:
require.config({
paths: {
jquery: 'lib/jquery/jquery',
backbone: 'lib/backbone/backbone',
handlebars: 'lib/handlebars/handlebars',
text : 'lib/requirejs-text/text',
less: 'lib/less/less',
lodash: 'lib/lodash/lodash.min'
}
});
and on my index page i have
<link href="<?php echo base_url('assets/css/style.less')?>" rel="stylesheet" />
<link href="<?php echo base_url('assets/css/admin.less')?>" rel="stylesheet" />
it seems they get loaded, but for example all my #border, #background-dark, #grey etc etc files don't work...
so, does anybody know whats wrong?
See this plugin for requirejs. It also works fine with r.js optimizer.
my application templates are working if they are declared within index.html file.
But, I want to keep all templates in different html file,
like,
-AppTmpl.html
<!-- SidebarView Template -->
<script id="sideBarTmpl" type="text/template">
<div class="inner_div"><img src="images/com_logo.png"></div>
<div class="inner_div"><img src="images/adv_index.png"></div>
</script>
<!-- HeaderView Template -->
<script id="folderDivTmpl" type="text/template">
<div id="div_<%= menu_sequence %>"></div>
</script>
I am using underscore templates.
But problem is that these templates are not accessible by underscore.
like,
this.template = _.template($("#headerTmpl").html(), this.model.toJSON());
So what i need to do like include "AppTmpl.html" file in index.html or something.
Any solutions?
Thanks in advance !
I use requireJS with the text plugin
Then you can just load it as you need with requireJS:
require(['text!templates/AppTmpl.html'],function(AppTemplate){
this.template = _.template(AppTemplate);
});