[HOWTO] 5 min hack to gain more space with the WebUI

[ryansoh3]

Sorry to bump this old thread but is there a way to completely remove the header and the footer in 9.2.1?
I don't think /usr/local/www/freenasUI/media/css/layout.css exists in this release because it defaults to a new file.
Thanks in advance.

 

[codenamezero]

I still haven't update to the latest version lol, so I don't know what's the new one look like. But in my first post i did mentioned that it would add some new numbers to the existing file name. Not sure if they did that in the 9.2.1 as well.

 

[ryansoh3]

Hmm I did install FreeNAS 9.2.1 on my USB again but I think it would have been wiped clean before the install, so I don't think I have newer versions of the file.
I'm a SSH noob, how do you display the contents of the /usr/local/www/freenasUI/media/css directory? Thanks.

 

[codenamezero]

Hmm I did install FreeNAS 9.2.1 on my USB again but I think it would have been wiped clean before the install, so I don't think I have newer versions of the file.
I'm a SSH noob, how do you display the contents of the /usr/local/www/freenasUI/media/css directory? Thanks.

Try ls?

 

[kamilion]

Doesn't work on 9.2.0 or 9.2.1, they changed the templates enough to where if you try the old tricks it just destroys the UI entirely.

 

[codenamezero]

Well nothing can "destroy the UI entirely", is just CSS... as long as you change the right thing it will work... try to use Chrome or FF to inspect the element, find out which class it is using, then try to change the CSS for that element.

Anyhow, I can't comment on it as I don't run anything remotely close to 9.0 yet lol, how easy is it to upgrade from 8.0.3?

 

[ryansoh3]

Thanks codenamezero and kamilion.
Shame they've intentionally locked the UI down. I'll see what I can do with Adblock Element Hiding Helper.
I'll try to upload the header and footer's CSS if you guys want to take a look.

 

[codenamezero]

Well I rebooted my NAS last night after like 2 years and the whole Web UI took a dump for some reason... So i will be upgrading to the latest 9.2.1 soon...
I've also became a Web developer in the past 2 years doing CSS and what not, so I should be able to tweak some stuff up.

 

[ryansoh3]

Thanks, I'll be looking forward to your progress.
I used the Adblock Element Hiding Helper but After I had removed the header, the System, Network, Storage, etc. bar moved up but the rest of the UI stayed there.
Removing the footer also didn't extend the UI at all either.

 

[codenamezero]

I am on 9.2.1 now and gee... too easy... :p

Just do the following, make sure you back up every files that you will be modifying:

First do mount -uw / so you can write to the file system

Then goto the the following folder:
cd /usr/local/www/freenasUI/static/css

Change the following lines

In layout.css

//Change the height from 72 to 0.
#page-header {
    height:0px;
    background: #464C53 url("../images/headerbg.png") repeat-x;
}
 
// Add the following after
#page-header div img {
    width: 0px;
}
 
// Change the height from 80 to 0
#footer {
    height:0px;
    background: #464C53 url("../images/footerbg.png") repeat-x;
}
// Change the height of topLayout from 125 to 55
#topLayout {
    height:55px;
    overflow:hidden;
}
// Change the height of footerLayout 0
#footerLayout {
    height:0px;
    width:100%;
    padding-bottom:0px;
}

In custom.css

<!-- Update, i didn't like how the message would get cut off. I put the notification message box to bottom right instead -->
#messages {
    position: absolute;
    bottom: 5px;
    right: 5px;
    min-width:250px;
}
<!-- Comment out the margin-left of .success -->
<!-- Update, also commenting out the height -->
.success {
    background-color:#40664D;
    min-width:400px;
    /*margin-left:100px;*/
    border:1px solid #222;
    max-width:500px;
    word-wrap:break-word;
    color:#000;
    /*height:50px;*/
    text-align:center;
    opacity:0.6;
    filter:alpha(opacity=18);
}

The above should take care of all the css. Hope I didn't missed any... Now lets go to move 2 divs to another location and you are done...

cd /usr/local/www/freenasUI/templates

Comment out the following lines
In base.html

                <!-- Comment out these 2 dives
                <div id="messages"></div>
                <div class="clear"></div>
                -->

Update: I don't like how the notification message got cut off after my change, so I moved it to lower right corner area instead.
In base.html again, put it before the body end tag

    <div id="messages"></div>
    <div class="clear"></div>
 
</body>

Control + F5 your browser and enjoy. This completely hide the top and bottom bars, and kept all the functionality intact.

PS: I think if you reboot, it might get override, I vaguely remember back in 8.0, i had to modify the files somewhere else... but I couldn't find exactly where the "original" files is stored.

 

[ryansoh3]

Lovely, thank you very much.
I'll report back after I try it out. :)

 

[codenamezero]

Revised the change. Moved the notification message box to the bottom right instead.

 

[ECCfrenaslover]

I'll leave this for the programers to fix for ver 9.3


Thanks for sharing!!!

 

[ryansoh3]

Nice, it works perfectly. Thank you very much CNZ. Wish I could buy you a beer. :D

 

[codenamezero]

I'll leave this for the programers to fix for ver 9.3


Thanks for sharing!!!

They are not going to fix anything... they will always keep their logo in the header and the stuff in the footer. So if you want "full screen" FreeNAS web gui, you will have to do this hack. :P

 

[ECCfrenaslover]

Yes they will! And leave the logo on as well :D

My 27 in iMac gives me all the screen I want. I am happy with it. Cheers!

 

[codenamezero]

Yes they will! And leave the logo on as well :D

My 27 in iMac gives me all the screen I want. I am happy with it. Cheers!

What bother posting? I don't get your post at all, there were nothing wrong with the UI to begin with, there is nothing for them to "fix" in 9.3... You just want to post you use a 27" iMac right?