Full html menu system

Want to share your OpenWrt / Gargoyle knowledge? Implemented a new feature? Let us know here.

Moderator: Moderators

Post Reply
BashfulBladder
Moderator
Posts: 250
Joined: Thu Jan 17, 2013 11:43 pm

Full html menu system

Post by BashfulBladder »

I'm finishing up a Gargoyle theme - I call it Horchata (horizontal charcoal theme). Its a pure CSS3 nav menu - but requires full exposure of the menu system. I've amended gargoyle_header_footer to wrap a fully exposed nav_unselected_container.

So the default theme common.css yields this:
default-new.png
default-new.png (108.73 KiB) Viewed 8844 times
same html code with Horchata yields this:
horchata.png
horchata.png (69.72 KiB) Viewed 8844 times
(ignore the status info in the wol page, its just sample hardcoded data)

So, is there any appetite for full menu exposure?
TP-Link WDR3600 v1.1 running 1.5.10+ L10n-English (Built 20130922 - OpenWrt r38093)
TP-Link WDR4300 running 1.5.10+ i18n-English (Built 20131010 - OpenWrt r38286)

https://github.com/BashfulBladder/gargoyle-plugins/wiki

User avatar
powerlogy
Posts: 66
Joined: Wed Aug 22, 2012 12:04 pm
Location: Turkey

Re: Full html menu system

Post by powerlogy »

It seems very classy, keep up mate.

drawz
Posts: 33
Joined: Sun Feb 17, 2013 11:55 pm

Re: Full html menu system

Post by drawz »

looks great. gargoyle could really use a more modern default UI

BashfulBladder
Moderator
Posts: 250
Joined: Thu Jan 17, 2013 11:43 pm

Re: Full html menu system

Post by BashfulBladder »

Thanks guys. I don't think Horchata would replace the existing default Gargoyle theme. Adapting the existing structure into horchata has errata, so its not without its own issues. As I read more, these seem to be endemic to pure CSS menus (drop-down menus sill exposed when clicking previous page, IOS issues)...

So I installed the modified gargoyle_header_footer & then installed the horchata theme. So odd seeing it there live!

Why is my spinner not centered? Could it be (blush) I'm too big?
wait.png
wait.png (12.2 KiB) Viewed 8796 times
TP-Link WDR3600 v1.1 running 1.5.10+ L10n-English (Built 20130922 - OpenWrt r38093)
TP-Link WDR4300 running 1.5.10+ i18n-English (Built 20131010 - OpenWrt r38286)

https://github.com/BashfulBladder/gargoyle-plugins/wiki

BashfulBladder
Moderator
Posts: 250
Joined: Thu Jan 17, 2013 11:43 pm

Re: Full html menu system

Post by BashfulBladder »

Here is a patch to expose all Gargoyle menus.

You have to compile these changes and either copy the gargoyle_header_footer binary to your router or build a firmware that you flash onto your router.

It is not a theme. If you should choose to make a theme around the new structure of the menus, it will (most likely) not be compatible with the vanilla gargoyle_header_footer - so don't submit it for inclusion, because it won't look as you intend.

The patch file is compatible with the existing themes - all it does is shoe the extra menu options.

Seek the answers to your CSS questions elsewhere.

-------------------------
1. Download & extract the patch here
gargoyle_header_footer.patch.zip
(1.76 KiB) Downloaded 307 times
2. To the gargoyle source you obtained from github, here, or from your own hard drive, apply the patch. The patch is sensitive *relative* to the gargoyle source.

cd /path/to/gargoyle_folder
patch -p0 -i gargoyle_header_footer.patch

3. compile
3a. if you already have a working buildroot environment:
cd /path/to/gargoyle_folder/ar71xx_src (or your platform)
make package/gargoyle/compile
[make a backup of your existing gargoyle_header_footer by openening a separate ssh seession & cp /usr/bin/gargoyle_header_footer /usr/bin/GHF-backup]
scp /path/to/gargoyle_folder/gargoyle/ar71xx-src/build_dir/target-mips_r2_uClibc-0.9.33.2/gargoyle/ipkg-ar71xx/gargoyle/usr/bin/gargoyle_header_footer root@192.168.1.1:/usr/bin


One other note: if you build a theme around this & you use it to hide & show menus on hover, don't expect it work well on touch devices. There are a few onClick=return true that deal with ios issues, but don't expect perfection on touch devices. hover is a challenge on touch devices.
TP-Link WDR3600 v1.1 running 1.5.10+ L10n-English (Built 20130922 - OpenWrt r38093)
TP-Link WDR4300 running 1.5.10+ i18n-English (Built 20131010 - OpenWrt r38286)

https://github.com/BashfulBladder/gargoyle-plugins/wiki

sajjadhalai
Posts: 108
Joined: Sun Apr 08, 2012 6:54 am

Re: Full html menu system

Post by sajjadhalai »

Plz provide a theme as Sample, thanx . common.css file and internal.css file

BashfulBladder
Moderator
Posts: 250
Joined: Thu Jan 17, 2013 11:43 pm

Re: Full html menu system

Post by BashfulBladder »

As per our last discussion:
So, if you want the patch & YOU are going to learn how to write a Cascading Style Sheet, and YOU are doing your own theme, just ask for the patch & I'll provide it & instructions on how to use it.

Again, its a YOU thing. No bash. No bashy - its ALL Sajji.
TP-Link WDR3600 v1.1 running 1.5.10+ L10n-English (Built 20130922 - OpenWrt r38093)
TP-Link WDR4300 running 1.5.10+ i18n-English (Built 20131010 - OpenWrt r38286)

https://github.com/BashfulBladder/gargoyle-plugins/wiki

Eric
Site Admin
Posts: 1441
Joined: Sat Jun 14, 2008 1:14 pm

Re: Full html menu system

Post by Eric »

I've now incorporated a modified version of this patch.

I've set some CSS rules (before other stylesheets are loaded -- they can be over-ridden), on the elements that are different, to hide them by default. This preserves the current themes, but allows for the option of over-riding those rules and displaying the full menu option. Also note that the code for the selected menu header is a bit different than in your patch -- but it should still allow for what you want to do if you modify the CSS rules properly.

User avatar
powerlogy
Posts: 66
Joined: Wed Aug 22, 2012 12:04 pm
Location: Turkey

Re: Full html menu system

Post by powerlogy »

Why not use LuCI ? It seems they make up that nicely.

BashfulBladder
Moderator
Posts: 250
Joined: Thu Jan 17, 2013 11:43 pm

Re: Full html menu system

Post by BashfulBladder »

I have added not the first shown theme (which still has a commercial typeface), but another theme that depends on this style of patch - specifically the one included by Eric since July 13. This theme cannot work on 1.5.10 - there will be no menus.

Image

You can get instructions on how to download a package ready to install on your router from here:
https://github.com/BashfulBladder/gargoyle-plugins/wiki
TP-Link WDR3600 v1.1 running 1.5.10+ L10n-English (Built 20130922 - OpenWrt r38093)
TP-Link WDR4300 running 1.5.10+ i18n-English (Built 20131010 - OpenWrt r38286)

https://github.com/BashfulBladder/gargoyle-plugins/wiki

Post Reply