Patch to make pfsense_ng theme full width
-
It's altogether possible that somebody's already done something like this. Anyhow, I've created a patch that makes the content area stretch to the width of the screen (but still maintain the original width as a minimum) - I'm using 2.1 as I need IPv6 support and the original layout was a nightmare for firewall logs, IPv6 addresses etc.
It doesn't use the original background images, but instead makes use of borders, border-radii and box-shadows, so a browser that supports CSS3 is required (I'm guessing everyone here uses a real browser ;D).
--- /usr/local/www/themes/pfsense_ng/all.css.orig 2013-01-08 10:27:10.000000000 +0000 +++ /usr/local/www/themes/pfsense_ng/all.css 2013-01-15 15:23:46.000000000 +0000 @@ -185,7 +185,8 @@ /* ID Based CSS Definitions */ /* margin: 0px auto makes the content centered, margin 0px 0px makes it aligned to the left */ #wrapper { - width: 810px; +/* width: 810px;*/ + min-width: 810px; margin: 0px 0px; /* left: 0px; */ } @@ -338,14 +339,21 @@ #content { position: relative; top: 0px; - left: 75px; +/* left: 75px;*/ margin-top: 0px; - margin-left: 0px; +/* margin-left: 0px;*/ + margin-left: 75px; + margin-right: 75px; padding-top: 50px; - padding-left: 20px; - width: 840px; + padding-left: 10px; + padding-right: 10px; +/* width: 840px;*/ + min-width: 840px; background-color: #ffffff; - background: url('images/horizontal.png') repeat-y; +/* background: url('images/horizontal.png') repeat-y;*/ + border-left: 3px solid #990000; + border-right: 3px solid #990000; + box-shadow: 10px 12px 20px 0px #333333; } @@ -359,7 +367,8 @@ position: relative; top: -10px; left: 0px; - width: 770px; +/* width: 770px;*/ + min-width: 770px; margin-top: 0px; margin-left: 5px; margin-right: 5px; @@ -374,19 +383,30 @@ #footer { position: relative; /* margin-bottom: 5px; */ - background: url('images/footer.png') no-repeat; + margin: 0px 75px; + margin-bottom: 30px; +/* background: url('images/footer.png') no-repeat;*/ + background: #ffffff; /* top: -100px; */ bottom: 0px; - left: 75px; +/* left: 75px;*/ /* width: 1210px; */ - width: 840px; - height: 60px; +/* width: 840px;*/ + min-width: 840px; +/* height: 60px;*/ + height: 30px; color: #000000; text-align: center; font-size: 0.9em; padding-top: 10px; padding-left: 10px; clear: both; + border-left: 3px solid #990000; + border-right: 3px solid #990000; + border-bottom: 3px solid #990000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + box-shadow: 10px 12px 20px 0px #333333; } #footer p { padding: 0px; @@ -1353,4 +1373,4 @@ padding-left: 12px; padding-top: 12px; padding-bottom: 12px; -} \ No newline at end of file +}btw. This patches 2.1-BETA1, so I don't know whether it will work for 2.0
-
Doesn't seem to apply for me, sure that's against a current 2.1 copy?
Hmm... Looks like a unified diff to me... The text leading up to this was: -------------------------- |--- /usr/local/www/themes/pfsense_ng/all.css.orig 2013-01-08 10:27:10.000000000 +0000 |+++ /usr/local/www/themes/pfsense_ng/all.css 2013-01-15 15:23:46.000000000 +0000 -------------------------- Patching file /usr/local/www/themes/pfsense_ng/all.css using Plan A... Hunk #1 failed at 185. Hunk #2 failed at 339. Hunk #3 failed at 367. Hunk #4 failed at 383. Hunk #5 succeeded at 1373 with fuzz 2. 4 out of 5 hunks failed--saving rejects to /usr/local/www/themes/pfsense_ng/all.css.rej done -
Bugger, I'll look into it.
2.1-BETA1 (i386) built on Tue Jan 8 04:56:07 EST 2013 FreeBSD 8.3-RELEASE-p5 -
Hmm, I've just looked at the history of all.css, and it doesn't appear to have changed for some time. I've also fetched https://raw.github.com/bsdperimeter/pfsense/master/usr/local/www/themes/pfsense_ng/all.css and diffed it to the original on my pfsense box and again, no changes.
This gives no output.
fetch -qo - https://raw.github.com/bsdperimeter/pfsense/master/usr/local/www/themes/pfsense_ng/all.css | diff -u - /usr/local/www/themes/pfsense_ng/all.css.origOut of interest, what flags did you use with patch?
#patch -t -p0 -i /var/tmp/all.css.diff --check --forward Hmm... Looks like a unified diff to me... The text leading up to this was: -------------------------- |--- /usr/local/www/themes/pfsense_ng/all.css.orig 2013-01-08 10:27:10.000000000 +0000 |+++ /usr/local/www/themes/pfsense_ng/all.css 2013-01-15 15:23:46.000000000 +0000 -------------------------- Patching file /usr/local/www/themes/pfsense_ng/all.css using Plan A... Hunk #1 succeeded at 185. Hunk #2 succeeded at 339. Hunk #3 succeeded at 367. Hunk #4 succeeded at 383. Hunk #5 succeeded at 1373. done -
It's possible that something here in the forum munged the code. Can you post your patch file somewhere? Or use something like http://pastie.org
/usr/bin/patch --directory=/ -t -p0 -i /var/patches/50f5b35930b5c.patch --check --forwardI used the System Patches package to test/apply it.
-
I'd thought that too, however when I tested it last I copied it from my forum post, and it still worked. Anyhow, here's the http://pastie.org/5696411 file.
SHA256 (all.css.diff) = 156dba2af2adeba67801ff68060141f77b57e98a12d890e5fe5e5995fc3ecc4d
SHA256 (/usr/local/www/themes/pfsense_ng/all.css.orig) = bed0ecf37181632ef428f3c1b5483af52eb2dde5efb2a8df265f903b13205aed -
Ah, turns out it was some whitespace at the top of the file doing it. Thought I had it all cleaned up, but apparently 'ignore whitespace' doesn't ignore whitespace at the start and end of the patch file.
I'll try it out in a bit, I'll probably have to force a refresh or clear the browser cache to give it a proper test.
-
Not too bad. The widgets get really, really wide and stretch a bit and look funny at really large widths but it'll do for now.
Not sure I'd bring that into the tree in its current state, but it's handy to have around as a patch people can apply with the system patches package if desired.
I uploaded a copy of the patch here:
http://files.nyi.pfsense.org/jimp/patches/widescreen-21.patchThere is a "widescreen" package for 2.0.x that is out there which is currently broken in several ways. It added a third widget column and made some other changes, but the way the original programmer coded it, it won't work on 2.1 (it overwrites the menu and does a couple other bad things).
-
Yes, that's one side-effect. I also noticed the traffic charts being stretched as the height attribute for the embed tags is hard coded. By changing them to 100%, they look perfect.
Another thing that doesn't look right is the "Dynamic View" Firewall logs, as they use (for a reason I cant fathom) divs rather than a table. I was going to post another patch for modifiying the embed tags (I've tested it in Chrome & Firefox), however it brought up something that I would describe as a bug:
When patching /usr/local/www/widgets/widgets/traffic_graphs.widget.php, it leaves the original file, which then is picked up by the widget detection function in index.php. The function will also pick up swap files which meant that I suddenly had the traffic graph widget duplicated several times. I ended up having to manually edit my config.xml to remove all the duplicates.
IMHO, the function should only match real php files in the widget directory. ie. ^[a-z0-9_-]+.php$ That probably needs another topic and a possible bug report. I'll also have a look at creating a patch, if only for my own sanity - manually editing the configuration on nano was a PITA!
