forum category overlay

[Smudges]

VS Admin Wormopolis Brian Craig Tumbleweed or anyone

Is it possible to have a overlay on the whole category like 





I have tried by doing it via css thinking it might be a category-## css code but i can not get it to work please if there is a way to do this point me in the right direction or let me know where i am going wrong.


thanks in advance

[Wormopolis]

just one category?

[Smudges]

yes please worm as like in the pic i provided

[Wormopolis]

put into main footer


<script type="text/javascript">
$('a[name="category-3"]').next().each(function(){
 $(this).append($('<div></div>').css({
   'background-color':'#000000',
   'opacity':'.5',
   'top':'0px',
   'left':'0px',
   'height':$(this).height(),
   'width':$(this).width(),
   'position':'absolute',
   'text-align':'center'
 }).append($('<font size="6" color="#FF0000">Staff Only!</font>').css({
   'position':'absolute',
   'top':'50%'
 }))).css('position','relative');
});
</script>


change the category number to whatever your category is

[Smudges]

thanks worm that did the trick

[Smudges]

Wormopolis

1 question about above js code

i tried to implement this into it and it does work did i do it wrong, if so can you help please

#category-10.category_block{ position: relative; -webkit-filter: grayscale(100%); filter: url("filter.svg#gray"); }
#category-10:after{
content: "Customers Only";
background: url("transw70.png") repeat;
background: rgba(255,255,255,0.7);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
font-size: 30px;
line-height: 310px;
text-align: center;
z-index: 10;
cursor: normal;
}

[Wormopolis]

Well what is there looks like a completely different method then what I put. I thought you stated the JavaScript worked?

[Smudges]

the above does work but i was hoping to expand on the css side of it

[Wormopolis]

None of the categories ever get a class name of blocked, so your CSS will never get applied. If you want to change the CSS, just modify what is shown in the script