I'm trying to undestand how to link CSS or JS I'll use it all over my CakePHP 1.3 application. I've read about putting assets in folder /app/webroot/css or /app/layouts/css (for css only in this case).
I've put a file named main.css and default.css but I'm missing something.
How can I do to fix it and which are the default rules for the default layout?
Normal
$this->Html->css('my_file'); corresponds to /app/webroot/css/my_file.css
$this->Html->script('my_file'); corresponds to /app/webroot/js/my_file.js
you add the php part from above to your layout file which is by default in /app/views/layouts/default.ctp (or in cake dir if you have not created one)
you can set the layout in the controller/app_controller setting $this->layout = 'foo'; which points to /app/views/layouts/foo.ctp
Themes
Setting the controller to $this->view = 'Theme'; will make cake use themes then setting $this->theme = 'SomeTheme'; in the controller will make cake use /app/views/themed/some_theme/* files
using $this->Html->script('my_file'); now points to /app/views/themed/some_theme/js/my_file.js and the same goes for the css.
css = http://book.cakephp.org/view/1437/css
js = http://book.cakephp.org/view/1589/script
themes = http://book.cakephp.org/view/1093/Themes
themes have the problem of serving css, js and other assets through php (ob_start(); include etc) and this is obviously slower than normal http serving. you can either copy files across to the webroot folder as explained in the bottom or be lazy and do something like the following https://gist.github.com/712622
Related
I've built and applied this extension react-application-injectcss(https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-application-injectcss) but it applies on all sites in my tenancy. Can I hardcode site name of a particular site where I need to apply custom css/js
Where do I change in code (.ts file)?
You could use this extension to inject the js file to the page and judge the url of the current page in the js file, and then inject the CSS file.
if ((window.location.href.toLowerCase().indexOf('testfolder') > 0))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = 'https://contoso.sharepoint.com/sites/dev/Doc/testFolder/test.css';
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
}
extension inject js file
I would say that ideologically, injecting CSS to customize things you don't own is a bit hacky and potentially harmful way. To customize site appearance, you can use the site template. For example, to "get rid of the sidebar" you could create "communication" site (that does not have the sidebar) instead of "team" site (that does). As simple as that.
I have the need to determine what app path my controller method will use for serving up the view before it does so. I'm using a theme but I also have many non-themed view files. I'm switching my themes based on domain name (2 domains point to the same Cake install) but need to exclude the non-themed views from rendering inside my theme.
This may sound confusing. Here's what is currently happening if a URL is accessed that does not have a theme view associated with it:
domainA.com/examples/index will render the view app/View/Examples/index.ctp with the layout from app/View/Layouts
domainB.com/examples/index will render the view app/View/Examples/index.ctp BUT with the layout from app/View/Themed/MyTheme/Layouts
This is because the "MyTheme" theme does not contain a view file for this controller-method pair (this is intentional). So I would like to instead have the following established:
domainB.com/examples/index continues to render the view app/View/Examples/index.ctp BUT INSTEAD with the layout from app/View/Layouts
This should only happen, of course, if and only if there is no view file within the "MyTheme" directory structure.
I think this is what you are looking for $this->View->viewPath.
You can use this in any controller call back function or action.
According to http://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses,
the way to point to a list of template containers, is to create a file inside config folder.
// In a View class
$this->loadHelper('Form', [
'templates' => 'app_form',
]);
This would load the tags in config/app_form.php. This file should
contain an array of templates indexed by name:
How do I do the same by pointing at a file inside a Plugin instead?
How do I do the same by pointing at a file inside a Plugin instead?
Guess as everywhere else in the framework? Dot notation: PluginName.app_form
If that is not working it should be added to the framework to be consistent.
I am new in MEAN and going to create new website using MEAN.
I have created the package in MEAN using the command mean package <package_name>
I have also override the default templates using the app.set('views', __dirname + '/server/views'); command in the app.js of my custom package, but the MEAN is still rendering my angular views within the MEAN's default layout.
The structure of my MEAN package folder is
packages
--core
----admin
----articles
----circles
----swagger
----system
----users
--custom
----<my_package>
------public
--------assets
--------controllers
--------directives
--------routes
--------services
--------views
------server
--------config
--------controllers
--------models
--------routes
--------views
------.bowerrc
------app.js
------bower.json
------package.json
----i18n
----theme
How can I render my own theme
To change the layout view to a different one than the default view
In the routes folder under server parent folder, look for the file that has the function mapped to the route '/'.
Now look for that function in the controllers folder. Change the name of the view to render like this:
exports.index = function(req, res) {
res.render('differentviewfile', {
user: req.user || null,
request: req
});
};
To change the look and feel of your site
You can take advantage of numerous Bootstrap themes available out there. A lot of them are free. To use them, all you have to do is change the reference to the css file (you will find it in the server side view base layout page).
Change it from the default bootstrap file to a different one, and your whole app changes. For e.g. take a look at the 16 themes available at https://bootswatch.com You can reference the CDN link to any of the themes they have directly, or you can download the css file for it and add it to your own project.
If you want to add your own styles, you can of course create your own css file and add appropriate css styles.
Did you injected a dependency to system package in your app.js file?
var MyCustomModule = new Module('mycustommodule');
/*
* All MEAN packages require registration
* Dependency injection is used to define required modules
*/
MyCustomModule.register(function(system, app, auth, database) {
You need to do that in order to wait until the system package is loaded. Then the line:
app.set('views', __dirname + '/server/views');
will override the views config set in the system package :D
I am finding trouble to display my AngularJs page from Play framework 2.2
The Angular js page is located in the same project directory which is
C:\webProj\test\app\www\index.html
Note this index.html is not the index.scala.html that we have in play views directory
I need to render this page from my Play project.
I have tried this
GET /masterid controller.Assets.at("/app/www/",index.html)
but it gives a compilation error.
Explanation of the error
There are some syntax errors in this route configuration:
GET /masterid controller.Assets.at("/app/www/",index.html)
It should be controllers instead of controller, the path is wrong, and the parameters are not specified correctly. It could be written as:
GET /masterid controllers.Assets.at(path="/app/www", file="index.html")
Note that as written, this route will map only to the index.html file, not to any other resources under /masterid.
Solution with a separate directory
To behave exactly as asked, with a separate directory and a custom URL, you would need to specity a second asset route in addition to the default one. This would also require changing all usages of #routes.Assets.at to specify two parameters (folder and file), and adding a configuration to build.sbt:
playAssetsDirectories <+= baseDirectory / "app/www"
Solution using the public directory and a custom URL
The path of least resistance is to create the custom index.html file in the project's public directory. To use a custom URL as asked in the question, you could change the default asset path to "masterid" by changing this line in the routes file:
GET /assets/*file controllers.Assets.at(path="/public", file)
to this:
GET /masterid/*file controllers.Assets.at(path="/public", file)
In this case the custom index.html file could be accessed as:
http://localhost:9000/masterid/index.html
Relative URLs to other resources under the /public folder would work as well.
Solution using the public directory and the default URL
If you don't require the /masterid URL under the root, you can save your index.html file under public/app and refer to it as:
#routes.Assets.at("app/index.html")
This will resolve to:
http://localhost:9000/assets/app/index.html
Documentation
For more extensive instructions see Working with public assets.
Make it faster, just place your file in i.e.: /public/angular-app/index.html, so you can use it via:
#routes.Assets.at("angular-app/index.html")
Next (assuming that you have standard routes) you can just use static paths to your public assets, i.e. if image is placed in folder public/img/logo.png you can access it with:
<img src="/assets/img/logo.png" alt=""/>
So just by replacing public/ to /assets/ (slash at beginning to make sure you don't need to use base tag in head of document).