How to "hide" a visible section?

Hello.
How can i hide a section but remaining visible to members?I know you don't understand so i will show you an image .   
 

When you are a staff member:

 

When you are a usual member:

 Thank you.

Hello!

We can adapt my code below to what you want, what do you think?

Code:


    $(function() {
        if (document.getElementById('logout') == null) {
            var sCategory = '4';
            $('.main-content:eq(' + sCategory + ')').addClass('protect');
            var sCSS = '<style>' +
                '.protect:after {' +
                    'background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);' +
                    'bottom: 0px;' +
                    'content: "Somente membros";' +
                    'font-size: 30px;' +
                    'left: 0px;' +
                    'line-height: 240px;' +
                    'position: absolute;' +
                    'right: 0px;' +
                    'text-align: center;' +
                    'top: 0px;' +
                    'z-index: 10;' +
                '}' +
                '.protect {' +
                    'position: relative;' +
                '}' +
                '</style>';
            document.head.insertAdjacentHTML('beforeEnd', sCSS);
        }
    });


Result:


What do you think?

JS

Where to add it? 

It should probably go in :

Administration panel > modules > javascript codes management > create a new script

placement : in the homepage

I added there but nothing seems to happen. Must i replace something?

Bump. 

What version forum are you using and which category do you want to protect ?

Also please provide your forumlink.

Thanks

I was looking in the code so you must replace "sCategory="4" with number of the category.
But when i'm logged i can't see the category.. i see it like a usual member (hided)
 Version of forum: punBB
 Link : www.vontechs.board.st

Are you using the default logout navlink ?

I think..
 "/login?logout" this is the ending of URL.

 I see if i modify in the script logout with login it's seems to appear , but when i log out isn't hiding that section.
 Maybe is something wrong in the code?

As a suggestion if you don't want want normal members to be able to view something why not just block it completely. As in not letting them know it's there.

Directions To Do So:

Okay, does your logout link have the id logout ?

ex :

Code:

<a id="logout" href="/login?logout=1">Log out</a>

I'm not sure , Ange. When i click on "Log out" button , yeah appears "/login?logout"..
 Kmack , i know how to hide them , but i want this..

Could you send me a test account ?

Sented.  

See if this works :

Code:

        $(function() {
            if (!$('#user_bar a[href="/login?logout"]').length) {
                var sCategory = '3';
                $('.main-content:eq(' + sCategory + ')').addClass('protect');
                var sCSS = '<style>' +
                    '.protect:after {' +
                        'background: none repeat scroll 0px 0px rgba(255, 255, 255, 0.8);' +
                        'bottom: 0px;' +
                        'content: "Somente membros";' +
                        'font-size: 30px;' +
                        'left: 0px;' +
                        'line-height: 240px;' +
                        'position: absolute;' +
                        'right: 0px;' +
                        'text-align: center;' +
                        'top: 0px;' +
                        'z-index: 10;' +
                    '}' +
                    '.protect {' +
                        'position: relative;' +
                    '}' +
                    '</style>';
                document.head.insertAdjacentHTML('beforeEnd', sCSS);
            }
        });

You're the best.
 Thank you very much!
 This topic is solved.

You're welcome

Topic solved and archived