Results 1 to 21 of 21

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

  1. #1
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

    Default 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]

  2. #2
    Experienced user
    Join Date
    01-12-10.
    Posts
    814

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

    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...

  3. #3
    New user
    Join Date
    04-26-13.
    Posts
    1

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

    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

  4. #4
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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.

  5. #5
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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.

  6. #6
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  7. #7
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

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

  8. #8
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  9. #9
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  10. #10
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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]

  11. #11
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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.

  12. #12
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  13. #13
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

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

  14. #14
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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]

  15. #15
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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>
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  16. #16
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    Feature request:

    Can you implement a checkbox to hide the left column completely? Perhaps in addition to 'Show explanation' 'Hide help column'.
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  17. #17
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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.

  18. #18
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    [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
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

  19. #19
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

    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.

  20. #20
    Experienced user
    Join Date
    06-10-09.
    Location
    Cape Town, South Africa
    Posts
    1,387

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

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

  21. #21
    User Andreas's Avatar
    Join Date
    07-11-09.
    Location
    Mönchengladbach
    Posts
    485

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

    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 :(
    Web-Development, Freelancer, Burgtech, XHTML, HTML5, CSS, PHP, Javascript, MooTools, MySQL and more
    Amazon wishlist

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •