Change background for currentUser

1

Hello,

I’m trying to have different backgrounds for logged and not logged in user.
I’ve tried the following code:


 {{#if currentUser}} 
<body style="background-image:url('img/bg.jpg');background-repeat: no-repeat;" >

{{else}}
<body style="background-image:none;background-repeat: no-repeat;" >
{{/if}}

This doesn’t work either

<body {{#if currentUser}} style="background-image:none;" {{else}} style="background-image:url('img/bg.jpg');background-repeat: no-repeat;" {{/if}}>

Both are giving me complier errors.
What is working tho is:

<body style="background-image:url('img/bg.jpg');background-repeat: no-repeat;">
{{> template}}


</body>
2

Since body is not a template, you can’t really use template directives in it. Try this instead

Tracker.autorun(function(){
    var body = document.getElementsByTagName('body')[0];
    if(Meteor.userId()) {
        body.classList.add('loggedIn');
    } else {
        body.classList.remove('loggedIn');
    }
});```
1 Like
3

I need to remove a background (make it white) when user logs in

4

Solved the issue.
Added this to my login event handler, to change the background to white on login.

Template.login.events({
 'submit .loginSubmit': function(event, template) {
  event.preventDefault();
  var email = event.target.email.value;
  var password = event.target.password.value;
  console.log(email, password);

 Meteor.loginWithPassword(email, password, function(err) {
  if (err) {
   Bert.alert(err.reason, 'danger' );
  }

  if(!Meteor.userId()){
  document.body.style.backgroundImage = "url('img/bg.jpg')";
  } else {
  document.body.style.backgroundImage = "none";
  document.body.style.backgroundColor = "white";
  }
 


});

 },

Also added this on event when my first template is rendered.


Template.triphtml.rendered = function(){
   $(".bootstrapselect").selectpicker();

  if(!Meteor.userId()){
  document.body.style.backgroundImage = "url('img/bg.jpg')";
  } else {
  document.body.style.backgroundImage = "none";
  document.body.style.backgroundColor = "white";
  }