How can one hide the Admin bar with JavaScript?

What is your use case for hiding the admin bar? The only correct way to do this is by using the security roles in DNN. Any user who doesn't have modify access to a page will not see the admin bar. Hope this helps.

On a sidenote, I would strongly advise you to upgrade your DNN sites to v9.8 ASAP. DNN 8 has known security vulnerabilities due to old Telerik extensions which have (in my case) let through ransomware attacks earlier this year. There are some newly published resources (refer to the blogs on this site) that will help you identify the DNN extensions that you'll need to remove/update/modify in order to have them working without Telerik installed.

The use case is a customer required change. It needs to be done in JavaScript. I can hide the contents but cannot set the height to zero, to hide the vertical space, per my code sample shown. Do you know how?

Dear Paras,

I appreciate the advice about upgrading but that is not my issue at the moment, and my customer does NOT want to upgrade yet, so it is a moot point at the moment so....

I really have to solve the problem as stated above, and I would LOVE it if you could offer some way or idea on how to solve THAT problem.

...I can hide the contents of the Admin bar via JavaScript...

...but I cannot hide (set the vertical space to zero) relative to the Admin bar...

...There is a probably a fixed-header setting in CSS somewhere, buried in Bootstrap... Or a fixed margin somewhere... or the like... 

But the CSS and related things appear to be a "Big Ball Of Mud" so finding the culprit is proving very hard for me to find the culprit.

Do you have any insight into the solution that seek, relative to the problem I posted above, regarding hiding the Admin bar with Javascript?

Please advise.

Thanks.

-- Mark Kamoski

Hi Mark, as you said there must be some CSS adding a margin/padding/height somewhere. I would suggest using the inspect element tool in your browser to find the correct class that needs to be overridden in the javascript function you've got. Unfortunately, I can't help you find that without checking the CSS on the site and I don't have any DNN 8 site where I can log in and check either.

We haven't actively developed anything on a DNN site version lower than 9.xx in a long time, so I'm not sure if this will still work, but you used to be able to override where and how the Control Panel was added to the theme by explicitly adding the control panel via it's theme object. This would allow you to specify and target the wrapper CSS selectors you might be looking for.

However, this point is moot as well. When you do finally upgrade, you're going to have to figure out how to do this all over again because there is no control panel anymore. It's been replaced with the persona bar and this loads differently.

Also, I must echo the urgency of needing to upgrade. It's only a matter of time before that website is hacked if it's not upgraded. In our case, upgrading is not an option (with most of our clients). It's part of our process. Though, maybe we're just lucky and have clients that really care about whether or not their website is defaced or lost entirely. These attacks are fully automated these days.

You can control the control panel visibility by going to Admin > Site Settings, clicking Advanced Settings, expanding Usability Settings, and selecting Module Editors or Page Editors. Depending on your use case, you could also do this in the skin itself. Doing it after-the-fact via JavaScript seems a bit hacky, but then again, I don't really know the specific use case.

I too have to echo others regarding the extreme urgency for upgrading. We no longer give clients a choice in this if they are hosting with us. If they are not hosting with us and they are using our services to work on the website, we make it very clear we have no liability regarding their old DNN instances. It is not a matter of IF, but a matter of WHEN they will be hacked (or maybe even worse and have their server(s) ransomed). We have to "train them" on the urgency and help them develop a plan for upgrading as soon as possible.

...

All,

Regarding how to hide the ControlBar, I found one workaround temporary had to do it via code-infront markup on the DotNetNuke "ControlBar.ascx" as follows...

...in this file...

\admin\ControlPanel\ControlBar.ascx

...this was the code before the change, and the ControlPanel is visible, shown here...

(LessThanChar) asp:Panel ID="ControlPanel" runat="server" (GreaterThanChar)

...this is the code after the change and the ControlPanel is hidden (for all pages, but I am sure I can hack it to show/hide it conditionally here with C# but I ultimately need JavaScript) here..

(LessThanChar) asp:Panel ID="ControlPanel" runat="server" Visible="false" (GreaterThanChar)

...and YES I know it is generally discouraged practice to change the cord DotNetNuke code, but I have it all in source control, and I need to do something and I cannot find the right JavaScript to do this so...

...if you have a better idea, then please LMK, and the seminal question - (How can one hide the ControlPanel via JavaScript?) - is still "unanswered" so please help if you can.

(Yes, I totally agree, we MUST upgrade, and I am pressing the panic button here, but it is a battle and I am low on the totem pole.)

(Yes, I totally agree, we MUST not had code, but this is a weird case, a small internal-lan-only-site, and even a hack will do for now, and I have full backups, and I have source control, but I need to get the go-ahead to do it.)

I will check out what you all have said so far (and I really do appreciate it a lot) and please send more good ideas if you have them.

Thanks.

-- Mark Kamoski

...

I don't get why you do that if you made a single role and assign your customer under this role and give view-only permission to the page your problem will be automatically solved