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

Status
Not open for further replies.

codenamezero

Explorer
Joined
Sep 4, 2011
Messages
59
A much better hack for Freenas 9.2.1 is in page 2, enjoy. :)

This quick hack is to turn your FreeNAS WebUI into this:

cleaner_freenas.jpg




I removed the annoying and useless header and footer that takes up 25% of the screen space... These are the files you need to modify, make sure you create a backup.

/usr/local/www/freenasUI/media/css/layout.css (thanks marcusmarcus)
Note: If you did some reinstall and some files were left behind, FreeNAS would append a number after the filename, e.g.: layout2.css
Code:
/*#page-header { height:72px;background: #464C53 url("/freenas/media/images/headerbg.png") repeat-x;}*/
 
#page-header { height:0px;background: #464C53 url("/freenas/media/images/headerbg.png") repeat-x;}


/usr/local/www/freenasUI/templates/base.html
Note: If you did some reinstall and some files were left behind, FreeNAS would append a number after the filename, e.g.: base3.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
    <title>{{ freenas_version }}</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">html, body.{{ DOJANGO.THEME }} { width: 100%; height: 100%; }</style>
    {% include "dojango/include.html" %}
    <link rel="stylesheet" href="/dojango/dojo-media/release/freenas-dojo-1.5.0/dojox/form/resources/FileInput.css" />
    <link rel="stylesheet" href="/dojango/dojo-media/release/freenas-dojo-1.5.0/dojox/form/resources/CheckedMultiSelect.css" />
    <link rel="stylesheet" href="/freenas/media/css/template2.css" type="text/css" />
<link href="/freenas/media/favicon.ico" rel="shortcut icon" type="image/x-icon" />
{% block dojango_header_extra %}{% endblock %}
</head>
 
<body class="{{ DOJANGO.THEME }}">
    <div dojoType="dijit.layout.BorderContainer" id="outer" style="width:100%; height:100%" gutters="false">
        <!-- <div dojoType="dijit.layout.ContentPane" style="height:125px;overflow:hidden;" region="top"> -->
        <div dojoType="dijit.layout.ContentPane" style="height:52px;overflow:hidden;" region="top">
            <div id="page-header">
                <div>
                    <!-- <a href="/" title="FreeNAS"><img src="/freenas/media/images/ui/freenas-logo.png" alt="FreeNAS" /></a> -->
                </div>
            </div>
            {% block menubar %}
            {% include "common/menubar2.html" %}
            {% endblock %}
        </div>
        <div dojoType="dijit.layout.ContentPane" id="menupane"
            region="left" splitter="true">
        </div>
        <div dojoType="dijit.layout.TabContainer" region="center" id="content">
        </div>
        <!-- <div dojoType="dijit.layout.ContentPane" style="height:80px;width:100%;padding-bottom:0px;" region="bottom"> -->
        <div dojoType="dijit.layout.ContentPane" style="height:0px;width:100%;padding-bottom:0px;" region="bottom">
            {% block footer %}
            {% include "footer.html" %}
            {% endblock %}
        </div>
    </div>
{% block dojango_content %}{% endblock %}
</body>
</html>


Cheers!
 

marcusmarcus

Explorer
Joined
May 27, 2011
Messages
89
Nice! looks much better now. Thanks!
Two things that may help others
1) My files were "/usr/local/www/freenasUI/media/css/layout.css" and "/usr/local/www/freenasUI/templates/base.html", they did not have the numbers in the file name.
2) My top menu bar in the interface (with Log Out) was completely blank, had to do a CTRL+F5 to refresh the cache, then my menu showed up.
 

marcusmarcus

Explorer
Joined
May 27, 2011
Messages
89
Another thing to add. If you do this, it will not show the console if you enabled "Show console messages in the footer" in your advanced settings. I think I'll go back and add the footer back just so I can have the console back, but will not add the header back.
 

codenamezero

Explorer
Joined
Sep 4, 2011
Messages
59
Another thing to add. If you do this, it will not show the console if you enabled "Show console messages in the footer" in your advanced settings. I think I'll go back and add the footer back just so I can have the console back, but will not add the header back.

Fixed. :p

/usr/local/www/freenasUI/templates/base.html
Code:
{% if consolemsg %}
<div dojoType="dijit.layout.ContentPane" style="height:80px;width:100%;padding-bottom:0px;" region="bottom">
    {% block footer %}
    {% include "footer.html" %}
    {% endblock %}
</div>
{% else %}
<!-- <div dojoType="dijit.layout.ContentPane" style="height:80px;width:100%;padding-bottom:0px;" region="bottom"> -->
{% endif %}


;)
 

vaibhavyagnik

Dabbler
Joined
Aug 26, 2011
Messages
38
hi all,
I wanted to implement this in my NAS box, but as i am a noob, i do not know how to access the files mentioned here. codenamezero, can you help out a complete noob?
 

codenamezero

Explorer
Joined
Sep 4, 2011
Messages
59
Hi,

You will need to ssh login to your NAS as root, then do the mount command to get yourself write access:
mount -uw /

After that edit those files that i mentioned above in my first post using the vi editor and save it. Example:
vi /usr/local/www/freenasUI/templates/base.html

Make the code change and then save the file. You will need to look around to see how to use vi and other basic unix command.
 

joeschmuck

Old Man
Moderator
Joined
May 28, 2011
Messages
10,994
I do like the banner reduced, maybe the developers will reduce the size of the banner based on this posting or just move the branding to the bottom of the screen.

I submitted a ticket to reduce the branding a bit.
 

vaibhavyagnik

Dabbler
Joined
Aug 26, 2011
Messages
38
can i do this if i directly attach a monitor and keyboard to the NAS rather then going the ssh way?
 

anon

Cadet
Joined
Oct 20, 2011
Messages
2
problem getting write access to files

Hi,

You will need to ssh login to your NAS as root, then do the mount command to get yourself write access:
mount -ur /

After that edit those files that i mentioned above in my first post using the vi editor and save it. Example:
vi /usr/local/www/freenasUI/templates/base.html

Make the code change and then save the file. You will need to look around to see how to use vi and other basic unix command.


hi codenamezero - I've followed your instructions (i.e. ssh as root, use "mount -ur /", then use vi to edit), however vi still reports the files as read-only files and won't let me write my changes to them. is there something else I should be doing?
 

joeschmuck

Old Man
Moderator
Joined
May 28, 2011
Messages
10,994
Try mount -uw / and once you are done editing type mount -ro / to close it all.

Edit: I'm curious if the change sticks after reboot.
 

anon

Cadet
Joined
Oct 20, 2011
Messages
2
Try mount -uw / and once you are done editing type mount -ro / to close it all.

Edit: I'm curious if the change sticks after reboot.


you're a legend joeschmuck, thanks so much - worked perfectly (I also removed the bottom footer) - now it's much easier to use the GUI on my netbook

re reboot - answer is yes! just rebooted the server, and the GUI is still beautifully free of a header and a footer - this is the most useful hack I've seen so far!
 

joeschmuck

Old Man
Moderator
Joined
May 28, 2011
Messages
10,994
you're a legend joeschmuck, thanks so much - worked perfectly (I also removed the bottom footer) - now it's much easier to use the GUI on my netbook

re reboot - answer is yes! just rebooted the server, and the GUI is still beautifully free of a header and a footer - this is the most useful hack I've seen so far!

Legend ? I know I'm old but not that old. Oh wait, you meant in my own mind, I agree :)

Glad it survived the reboot because some things don't and you need to adjust a different section on the flash drive.
 

SoftDux-Rudi

Contributor
Joined
Jun 2, 2011
Messages
108
Does anyone know if this hack will survive a firmware, or even (in the future?) service pack upgrade?
 

kamilion

Cadet
Joined
Jun 29, 2013
Messages
2
Just chipping in, here's my solution to this for 9.1-RELEASE.

Makes the GUI very usable from my samsung galaxy S3.

Updated instructions will be available from
http://files.sllabs.com/files/storage/xen/freenas_clean.txt
if available, otherwise the text should be identical to what you find below.

Code:
FreeNAS header killer for 720p android phones:
 
This process is best done through SSH,
so you have proper access to the 'nano' editor.
 
First, remount the USB storage read/write.
mount -uw /
 
Locate in /usr/local/www/freenasUI/freeadmin/static/css/custom.css
Console log width change (fixes 720p android)
Line 132: Change width = 80% to 98%
 
pre.message {
    font-family:monospace,Courier New,Courier;
    font-size:9pt;
    color:#00FF00;
    padding:0;
    width:98%;
    background-color:#000;
    min-width:600px;
    border:1px solid #222;
    height:77px;
    white-space:pre-wrap;
    max-height:77px;
    opacity:0.6;
    filter:alpha(opacity=18);
}
 
Locate in /usr/local/www/freenasUI/freeadmin/static/css/layout.css
Adjusts header and footer heights.
 
Line 21: Change footer height to 47px
 
#footer {
    height:47px;
    background: #464C53 url("../images/footerbg.png") repeat-x;
}
 
Line 77: Change Header height to 55px
 
#topLayout {
    height:55px;
    overflow:hidden;
}
 
Line 94: Change footer layout to height: 47px
 
#footerLayout {
    height:47px;
    width:100%;
    padding-bottom:0px;
}
 
Locate in /usr/local/www/freenasUI/templates/footer.html
Comments out footer panes.
 
comment out line 2-4 and 8-10 with <!-- -->:
 
<div data-dojo-type="dijit.layout.BorderContainer" id="footer" data-dojo-props="gutters:false">
<!-- <div data-dojo-type="dijit.layout.ContentPane" id="footerPane" data-dojo-props="region:'left'">
{{ sw_name }}&reg; &copy; 2013 <a href="http://www.ixsystems.com" target="_blank" title="iXsystems, Inc.">iXsystems, Inc.</a>
</div> -->
<div data-dojo-type="dijit.layout.ContentPane" id="footerMessages" data-dojo-props="region:'center'">
<pre class="message" id="msg_output" onClick="dijit.byId('log_dialog').show();"></pre>
</div>
<!-- <div data-dojo-type="dijit.layout.ContentPane" id="footerLogo" data-dojo-props="region:'right'">
<img src="{{ STATIC_URL }}ix/ix_logo.png" border="0" alt="iXsystems, Inc." align="right"/></a>
</div> -->
</div>
 
 
Locate in /usr/local/www/freenasUI/templates/base.html
Comments out Header Pane.
 
Comment out Line 49 - 53 with <!-- -->:
 
        <div data-dojo-type="dijit.layout.ContentPane" id="topLayout" data-dojo-props="region: 'top'">
            <!-- <div id="page-header">
                <div>
                    <a href="/" title="{{ sw_name }}&trade;"><img src="{{ STATIC_URL }}images/ui/{{ sw_name|lower }}-logo.png?cache={{ cache_hash }}" alt="{{ sw_name }}&trade;" style="padding-left:10px;"/></a>
                </div>
            </div> -->
            {% block menubar %}
 
Finally, remount the USB storage read-only again.
mount -ur /
 
Note: This remount can take a *long* time to complete. Just let it finish.
 

enemy85

Guru
Joined
Jun 10, 2011
Messages
757
i did the same using ur suggestions...good job!
thank you!
 
Status
Not open for further replies.
Top