CODEWITHSUNDEEP
angularjsnode.jsmean-stackmean.io
Dau
Dau

Reputation: 8858

How to make custom theme in MEAN

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

Upvotes: 1

Views: 1055

Answers (2)

CodeRonin
CodeRonin

Reputation: 1

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

Upvotes: 0

dreamerkumar
dreamerkumar

Reputation: 1550

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.

Upvotes: 2

Related Questions