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?
- adding
-
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
-
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. -
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.)