Custom background using "Custom Class" + "Custom CSS"?

yariplus

In your custom header, you can listen for contentLoaded and change the bg based on the data cid.

<script>
$(window).on('action:ajaxify.contentLoaded', function(){
  if (ajaxify.data && ajaxify.data.cid && ajaxify.data.cid === 16) {
    $('body').css('background-image', 'url(whatever.png)');
  }else{
    $('body').css('background-image', '');
  }
});
</script>

Looks a little rough because backgrounds don't fade in.

But works on all pages.

phit

body.page-category-16 {
    ..
}

assuming your category id is 16 you don't a need custom css class, but I don't think either will change the background of topics in that category

edit: I'm too slow, use what @yariplus suggested if you want it changed in posts too, mine is a simple solution just for the topic list page

PJH

@yariplus said:

if (ajaxify.data && ajaxify.data.cid && ajaxify.data.cid === '16') {

ajaxify.data.cid is actually a number, but apart from that, ta.

PJH

Actually I've made it more generic so I can easily add CSS to multiple categories:

<script>
$(window).on('action:ajaxify.contentLoaded', function(){
    if (ajaxify.data && ajaxify.data.cid){
        $('body').addClass('categoryid_'+ajaxify.data.cid);
  }
});
</script>

Then just edit .categoryid_16{.....} in the custom CSS.

<baris>

You shouldn't need js at all, each page has a specific css class added to the body element already.

<baris>

Nevermind I see you want to change css inside topics based on category, in that case you need js.

yariplus

@PJH Ahh, nice. That definitely looks better.

PJH

Of course, the class needs to be removed when you're no longer in there....

So I just figured out why the else-clause was in the original.

yariplus

Adding a one on the next start event should work I think.

</script>
$(window).on('action:ajaxify.contentLoaded', function(){
    if (ajaxify.data && ajaxify.data.cid){
        $('body').addClass('categoryid_'+ajaxify.data.cid);
        $(window).one('action:ajaxify.start', function(){
            $('body').removeClass('categoryid-'+ajaxify.data.cid);
        });
    }
});
</script>

PJH

Went with this:

<script>
$(window).on('action:ajaxify.contentLoaded', function(){
    $("body").removeClass (function (index, css) {
        return (css.match (/\bcategoryid_\S+/g) || []).join(' ');
    });
    if (ajaxify.data && ajaxify.data.cid){
        $('body').addClass('categoryid_'+ajaxify.data.cid);
    }
});
</script>

PJH

@yariplus said:

Adding a one on the next start event should work I think.

</script>
$(window).on('action:ajaxify.contentLoaded', function(){
    if (ajaxify.data && ajaxify.data.cid){
        $('body').addClass('categoryid_'+ajaxify.data.cid);
        $(window).one('action:ajaxify.start', function(){
            $('body').removeClass('categoryid-'+ajaxify.data.cid);
        });
    }
});
</script>

Testing shows that works too - but is there any way the removeClass() could fail to get called even though the body retains the class? (e.g. a refresh doesn't count as not calling it, because the classes would get reset anyway.)

yariplus

@PJH Not that I know of. The only way it wouldn't fire is if ajaxify is turned off, and in that situation the classes would get reset anyway.