BG issue

[Gaurav Grv Robinson]

I have modified the login/registration pages of my nodebb instance running persona theme. The tpl files have been modified so that a unique image bg is loaded every time the login/registration page is opened or refreshed.

All seems to be working fine but there is this strange issue - any page (recent/poplar/categories etc) that is accessed from the login/registration page also gets the same bg as of the login/registration page.. The other pages get the normal bg only after they are refreshed.

Please help me out with this issue.

My Site: http://diskuz.com

[Danny McWilliams]

I'm thinking that by defining a background in that template it's showing fine (and looks great), however in the others (categories, recent, etc) it's not been told not to display it.

Would defining no background image specifically on those templates - or a template which all use - not eliminate it?

There might be an easier route, but that's how i'd assume it's staying there.

[Gaurav Grv Robinson]

Tried that too, did not help.

[yariplus]

Put something like this in your header.tpl or custom header, to clear the background when a new page is about to load.

$(window).on('action:ajaxify.start', function (ev, data) {
  if (data.url !== 'login' && data.url !== 'register') document.body.background = "";
});

Actually, I suggest you put your whole script in the header. It makes it only load once, and easier to add on to later.

<script>
$(function(){
  function changeIt(){ ... }

  //  Initial load.
  if (app.template === 'login' || app.template === 'register') changeIt();

  // New page loading.
  $(window).on('action:ajaxify.start', function (ev, data) {
    if (data.url === 'login' || data.url === 'register') {
      changeIt();
    } else {
      document.body.background = "";
    }
  });
});
</script>

[Gaurav Grv Robinson]

@yariplus I am a noob and I am confused. What goes in the header and what part is to be called ?

Putting the entire following thing does not work.

<script>
$(function(){
function ChangeIt(){
var num = Math.ceil( Math.random() * totalCount );
document.body.background = '/images/bgimages/'+num+'.jpg';
document.body.style.backgroundSize = '50 0%%';
document.body.style.backgroundRepeat = 'fixed';
document.body.style.backgroundAttachment='fixed';
document.body.style.MozBackgroundSize = 'cover';
document.body.style.backgroundSize = 'cover';
}

// Initial load.
if (app.template === 'login' || app.template === 'register') ChangeIt();

// New page loading.
$(window).on('action:ajaxify.start', function (ev, data) {
if (data.url === 'login' || data.url === 'register') {
ChangeIt();
} else {
document.body.background = "#f0f0f0";
}
});
});
</script>

[yariplus]

@Gaurav-Grv-Robinson

document.body.background is actually a url. If you want a color, try changing it to document.body.style.background

[Gaurav Grv Robinson]

@yariplus said in BG issue:

document.body.style.background

Duly noted. Btw the entire above mentioned code has to go in the header, right ?

[yariplus]

I put it in the Custom Header section in the acp.

It should work the same if you put it in header.tpl, near the useCustomJS tag

[Gaurav Grv Robinson]

@yariplus put the entire code in the custom header section, still does not work.

<script>
$(function(){
function ChangeIt(){
var num = Math.ceil( Math.random() * totalCount );
document.body.background = '/images/bgimages/'+num+'.jpg';
document.body.style.backgroundSize = '50 0%%';
document.body.style.backgroundRepeat = 'fixed';
document.body.style.backgroundAttachment='fixed';
document.body.style.MozBackgroundSize = 'cover';
document.body.style.backgroundSize = 'cover';
}

// Initial load.
if (app.template === 'login' || app.template === 'register') ChangeIt();

// New page loading.
$(window).on('action:ajaxify.start', function (ev, data) {
if (data.url === 'login' || data.url === 'register') {
ChangeIt();
} else {
document.body.style.background = "#f0f0f0";
}
});
});
</script>

[Gaurav Grv Robinson]

@yariplus corrected a stupid mistake and it seems to work now. But there is yet another issue, if any other page is opened first except the login/register page and if from that page the login/register pages are accessed, they get the same bg i.e the one without an image.

[yariplus]

@Gaurav-Grv-Robinson

Try not using document.body.background

use
document.body.style.background = "url(http://theurl/image.png)"

[Gaurav Grv Robinson]

@yariplus said in BG issue:

document.body.style.background = "url(http://theurl/image.png)"

document.body.style.background = "url('/images/bgimages/'+num+'.jpg');
does not work.

but
document.body.background = '/images/bgimages/'+num+'.jpg';
works

[yariplus]

@Gaurav-Grv-Robinson

document.body.style.background = 'url(/images/bgimages/'+num+'.jpg)';

[Gaurav Grv Robinson]

@yariplus WOW! You're the man. It seems to be working fine.