C3 [ztoptab] BE Theme - large top tab nav icons

Installs a new Backend Theme that uses large cool icons at the top as a tab navigation. Adds additional icons for Home and User (which don't have modules links). Also changes the Contao editing area to be full width. Also works great together with [favorites]. I have re-added back in the HelpViewer, as I missed it, and my clients really liked that, and then the Contao main section looks normal again.

*NOTE* This is the 3.x update of the ztheme_favorite (which bundled the favorites and nice theme together, now seperate).

https://contao.org/en/extension-list/vi ... ab.en.html

[attachment=0:16onfaph]toptab.jpg[/attachment:16onfaph]

This theme does something funky, can you test it in all recent browsers? I installed every browser I have last month when I restored my pc with an factory image, so I'm sure they are pretty recent...

Hi thyon,

I found Your theme very useful and sexy and so I added support for LiCRM and secure_accessdata module:

[attachment=0:3xs0n1de]zTopTabTheme_LiCRM.png[/attachment:3xs0n1de]
Feel free to provide it at the extensions repository: https://www.dropbox.com/sh/ab4pw14poheg7t2/D0XH0d0QTZ

best regards

Sorry Ruud. The settings for my posts were set to not notify me on replies. I've updated my defaults.

I'll look into this. The HOME alignment problem seems to be a language string that is missing.

I've updated the theme to v3.1 support:

- Fixed compatibility with Favorites
- Return of the Magical HelpViewer (the wide layout was too distracting, and end-users love it too much)
- Updated styles to match a slightly wider size
- Updates styles and other files for 3.1 compatibility (with pop-up main)
- Correct Firefox alignment problems
- Override default Tips pop-ups, hidden on groups and moved down on submenu (thanks tsarma)

Note: Ruud. I found the problem with the icons. It was a Firefox ignoring background-position-x, y. I just had to specify it on one spec (I copied that out of the inspector like that, LOL). I fixed on both the version 3.0 and 3.1 versions.

Theres an ugly effect while hovering over the buttons. It depends on the pop up help text by contao. Your hover state gets lost as contao help text pops up under the mouse. Can you repair that?

Nice work, looks great.

I've tested this on 3 browsers, so you'll have to give a screenshot to help out.

This is difficult, than I have to take a screen video, I'm not prepared to do this.

I try to explain:

click on 'Account' to go to that page, then hover over 'Content'. You see the black helptext popping up? Helptext is 'Content'. Now try to move your Pointer slightly over to the help text and stay there. The submenu dissapears. Stay there (maybe 2sec) and wait til it is blinking.

This is strange, I tried it in Chrome and there is no popping helptext on menu items. So in Chrome is no problem.

I wish I can turn of those stupid help text popping up. Deactivating 'Show explanation' does not help.

edit: opera dito no help text

You have to update to the new version, then you have to go To Maintenance, delete the JS/CSS and then also REFRESH. Only then will the new code I write be executed to move the popups or hide them.

This is what is looks like now after the JS update. It shows ONLY on the level 2 items, level 1 is completely disabled.

[attachment=0:12thjw3e]Screen Shot 2013-07-26 at 16.35.05 .png[/attachment:12thjw3e]

I've fixed the "flashing" problem on the TOP icons by moving their tooltips downward. If you update, change themes and back it should be working if you refresh.

Yes, that works, thank you. Cleaned the system and additionaly have to do a shift f5.

Now I'm searching for an extension, that removes the Tips on menu items. Or I will write it by my own.

You can just edit my tips.js file. I suppress the tips for the main items, you can copy that code into the menuitems.

Thought some people might be interested to know how the concept redesign started and compare it with how it eventually ended up looking.

Prototype Design from July 2010:
[attachment=1:27t71cvj]contao-prototype-be.jpg[/attachment:27t71cvj]

Final Result delivered in July 2012 (refined for 2013):
[attachment=0:27t71cvj]contao-toptab-final.jpg[/attachment:27t71cvj]

Quote:

---

Originally Posted by thyon

You can just edit my tips.js file. I suppress the tips for the main items, you can copy that code into the menuitems.

---

Thank you thyon, now it works. I'm working on an extension, that hides the ugly black mouseover texts by contao. There I use this to override Tips.Contao

Code:

---

Tips.Contao.implement({
  options: {
    hideElements: '.tl_level_1_group a, a.navigation, a[class^=header_]',
    onShow: function(tip, hovered) {

      if(hovered.match(this.options.hideElements)) {
        this.tip.setStyle('display', 'none');
      }
      else {
        this.tip.setStyle('display', 'block');
      }

    }
  }
});

---

Found a little error in \system\modules\ztoptab\classes\TopTab.php line 233
A missing space

Code:

---

$arrNavigationModules[$grp]['icon'] = sprintf('style="background-image:url(\'%s%s\')"', TL_SCRIPT_URL, $groupicon);
$arrNavigationModules[$grp]['icon'] = sprintf(' style="background-image:url(\'%s%s\')"', TL_SCRIPT_URL, $groupicon);

---

And a JS error
/contao/main.php?do=login
TypeError: Theme.focusInput is not a function

Code:

---

<script>
  window.addEvent('domready', function() {
    Theme.focusInput("tl_user");
  });
</script>

---

Feature request:

Can you implement a checkbox to hide the left column completely? Perhaps in addition to 'Show explanation' 'Hide help column'.

Hi Andreas

Not sure why line 233 didn't generate an error, maybe my browsers are just resilient.

That Theme.focus error message is unrelated to my code, that is a Contao bug. I noticed when on the tl_content page or whatever page you're on. I can't identify why it's happening. Just remember Contao has not been carefully designed for backend changes. It's a mess!

Also I didn't like the wide display and the loss of the help viewer, so I've reincorporated it and I've decided not to remove it again. It was something I worked on quite hard and many people like this for their clients, so it's staying. ;)

If you want, you can remove it agin yourself.

[attachment=0:qxz6lmbr]toptab.gif[/attachment:qxz6lmbr]
JS error is because the function from contao hover.js is missing in your hover.js, page was /contao/main.php?do=login

Code:

---

/* Contao Open Source CMS, (c) 2005-2013 Leo Feyer, LGPL license */
var Theme = {

        /**
        * Autofocus the first text field or textarea
        * @param object
        */
        focusInput: function(id) {
                if (id == '') return;
                var el = $$('#'+id+' input[class^="tl_text"],#'+id+' textarea');
                if (el && el.length > 0) el[0].focus();
        },

---

I do not use your theme (maybe sometimes just for fun), I thought of my customers, it could be a bit overcharged, maybe they could not see the wood for the trees :D

I hate the fact that Leo made my profile say developer, because I'm certainly not. I'm a designer. Now everyone thinks I run tests, I know php, JS, etc. I get a huge headache when I even think of coding.

I've copied the correct hover.js over. I assumed incorrectly that it was unchanged. I've also changed space issue. Thanks again.

Thank you for your extensions, just trying to report errors or bugs that I find to make things a little bit better at least ;) I'm no designer :(