How to add CSS class to <body class="..."> in blaze layout?

help
1

I use flat admin template, flow router and blaze layout, but I can’t see css class on the body tag

// Layout
<template name="layout">
   <body class="flat-green">
      {{> Template.dynamic template=content}}
   </body>
</template>


// Router
FlowRouter.route('/', {
    name: 'home',
    title: 'Home',
    action: function (params, queryParams) {
        BlazeLayout.render('layout', {content: 'home'});
    }
});

Pleas help me.

1 Like
2

Here’s a hacky kind of solution. From client code:

Meteor.startup(()=>{
  $('body').addClass('flat-green');
});

As far as I know Meteor doesn’t like it when you add classes to body manually like that.

3

You could always consider using a FlowRouter trigger like:

FlowRouter.route('/', {
  triggersEnter: [function () {
    Meteor.defer(function () {
      $('body').addClass('some-class');
    });      
  }],
  ...
});
4

I did it in the rendered function of my layout. Haven’t had any problems with it.

Template[getTemplate('layout')].rendered = function(){
  $('body').addClass('flat-green');
}
5

Thanks for all, Now I tried

// template
<body class="flat-blue">
</body>
<template name="layout">
<template name="layout">
    <div class="app-container">
        <div class="row content-container">

            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>

                        <!--Breadcrumb-->
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>UI Kits</li>
                            <li class="active">Theming</li>
                        </ol>

                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
..........................................
</template>

// config
BlazeLayout.setRoot('body');

It work fine, but don’t work for any event click of js file of flat admin template:

    $(function () {
        $(".navbar-expand-toggle").click(function () {
            $(".app-container").toggleClass("expanded");
            return $(".navbar-expand-toggle").toggleClass("fa-rotate-90");
        });
        return $(".navbar-right-expand-toggle").click(function () {
            $(".navbar-right").toggleClass("expanded");
            return $(".navbar-right-expand-toggle").toggleClass("fa-rotate-90");
        });
    });

    $(function () {
        return $('select').select2();
    });

    $(function () {
        return $('.toggle-checkbox').bootstrapSwitch({
            size: "small"
        });
    });

    $(function () {
        return $('.match-height').matchHeight();
    });

    $(function () {
        return $('.datatable').DataTable({
            "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>'
        });
    });