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.


 

| |