5

I'm starting a Meteor project and I want to use different body css classes on different pages. If I add a css class to body I get:

Attributes on <body> not supported

The only way I've found is adding the class using JS. Is there a better way to do this?

1
  • 1
    or use the Js or create wrapper for each page Jun 24, 2014 at 9:10

7 Answers 7

17

The standard practice is to set body class in respective path hooks:

Router.map(function() {

  this.route('someRoute', {
    path: '/someAddress',

    onBeforeAction: function() {
      $('body').addClass('someRouteBodyClass');
      this.next();
    },

    onStop: function() {
      $('body').removeClass('someRouteBodyClass');
    },

    ...
  };

});
5
  • @Hubert what if you want to this for all routes?
    – zumbamusic
    Dec 1, 2014 at 20:48
  • You can use controllers and extend them. For example: ClassController = RouteController.extend({onBeforeAction: ..., onStop: ...});, then in the map: this.route('someRoute', {controller: ClassController}).
    – Hubert OG
    Dec 2, 2014 at 14:41
  • You might need to add this.next(); at the end of onBeforeAction.
    – oskare
    Sep 30, 2015 at 8:48
  • 1
    You can also use a Template.body helper as suggested in this post, to do it the "Meteor" way. stackoverflow.com/questions/29994859/…
    – phocks
    Oct 20, 2015 at 9:44
  • @oskare: you're right. This wasn't necessary at the time the answer was originally posted, though :-)
    – Hubert OG
    Oct 24, 2015 at 0:48
2

The accepted solution which uses router is great. There's also a solution for setting body class for the whole app:

Meteor.startup(function() {
   $('body').addClass('classes-for-body');
});
1
  • Thanks, this is especially helpful for situations where you aren't using a router. May 19, 2015 at 15:41
2

You can also perform the actions in the template "rendered" and "destroyed" callbacks.

Template.myTemplate.rendered = function(){
    $('body').addClass('my-class');
}

Template.myTemplate.destroyed = function(){
    $('body.my-class').removeClass('my-class');
}
2

With FlowRouter it work with:

FlowRouter.group({
  prefix: '/admin',
  triggersEnter: [function() {
    $('body').addClass('admin-layout');
  }],
  triggersExit: [function() {
    $('body').removeClass('admin-layout');
  }],
});
0

you can always do the style in each html page. not a best practise. but, it works. :D

0

Another way to go to add a class depending on the route you are on :

var currentCategory = new ReactiveVar();
Router.onAfterAction(function() {
    var categoryName = Router.current().options.route._path.split('/')[1];
    currentCategory.set(categoryName);
});
Template.mainLayout.helpers({
    currentCategory: function() {
        return currentCategory.get();
    }
});

--

<template name="mainLayout">
  <body class='{{currentCategory}}'>
</body>
1
  • 1
    As far as I can tell this adds a second <body> element to the document, which isn't quite ideal… Mar 5, 2016 at 18:35
0

This is what i use to add body class to only homepage.

Router.route('/', {
name: 'landing',
onAfterAction: function() {
    setTitle();
},
onBeforeAction: function(){
    $('body').addClass('home');
    this.next();
},
onStop: function() {
  $('body').removeClass('home');
}});    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.