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



  • I'd like to change the CSS (specifically the background) to all pages (including the topic list) within a single category. (Replicating something that's possible on our previous software.)

    I tried

    • adding cat_16 to the "Custom Class" on the Admin > Manage Categories > Category > Custom Class
    • and .cat_16 {background-color: #777; } to the Custom CSS (and in Stylish, for a quick test just in case)

    But it doesn't appear to have the effect that I expected.

    Am I using these wrong, and if so, is it currently possible to do what I want?


  • Community Rep

    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.



  • 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



  • @yariplus said:

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

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



  • 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.


  • Admin

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


  • Admin

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


  • Community Rep

    @PJH Ahh, nice. That definitely looks better.



  • 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.


  • Community Rep

    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>
    


  • 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>
    


  • @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.)


  • Community Rep

    @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.


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.