Add button/object beside hamburger menu

This forum is for discussions on the Help & Manual Premium Pack and the Premium Pack Toolbox configuration utility introduced with Premium Pack 3

Moderators: Alexander Halser, Tim Green

Post Reply
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Add button/object beside hamburger menu

Unread post by Mark Wilsdorf »

Tim,

I'd like to look at the possibility of adding a button somewhere left of the hamburger menu.

I know this is likely messy--and gets away from the idea of having a broadly applicable skin to apply in an automated fashion--but where in your PP code should I begin looking to consider adding a button, something like the one shown below. (Please don't yell at me for even considering such madness.<g>)
ButtonLoc.png
Mark Wilsdorf
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Add button/object beside hamburger menu

Unread post by Tim Green »

Hi Mark,

You need to add this in the HTML Page Template, inside the table cell with the ID "topicnavcell". It should be after the opening <span> tag and before the <a id="atoclink" tag:

Code: Select all

<td id="topicnavcell"><span>
YOUR CODE HERE ==>
<a id="atoclink" class="topicnavlink" 
Note that this will be problematic on smartphones, so you will need to exclude it there by including the class="desk_tablet" attribute to your tags. If they need additional classes just separate with a space, e.g. class="myclass deskt_tablet". 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Add button/object beside hamburger menu

Unread post by Mark Wilsdorf »

Thanks Tim.

That worked fine. But I was hoping for something that would show a View Cart button on the page title panel in both phone and desktop environments--so it would always be visible, on every page.

Anyway, just messing around I figured out that I could add button(s) in the header menu...which works in both environments. That may be adequate for what I need--though not perpetually visible on a phone; requires tapping on the hamburger menu. Examples:
temp3p.png
temp3.png
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Add button/object beside hamburger menu

Unread post by Tim Green »

Hi Mark,

If you need a button on phones and are certain that you have enough space for it, you can try inserting it to the left of the hamburger menu icon:

Code: Select all

<HMINCLUDE:HM_HEADERBOX.html>
<IFNOT_VAR[OPT_HEADERMENUOFF=true]>===INSERT HERE===<div id="phone_hamburger_icon" class="phone">
You may need to experiment a little with some inline CSS, or CSS added to the phone CSS file, to get the positioning right. :?
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Add button/object beside hamburger menu

Unread post by Mark Wilsdorf »

Thanks Tim.

I've tried several variations but I can't seem to get anything to display to the left of the hamburger menu. Here's one iteration where I tried to just display a 16x16 graphic there:

Code: Select all

<div id="headerbox">
<HMINCLUDE:HM_HEADERBOX.html>
<IFNOT_OPT_HEADERMENUOFF>
  <img class="phone" border="0" src="http://goflagship.com/images/b2.png">  <!-- 16x16 graphic --> 
  <div id="phone_hamburger_icon" class="phone"><i id="phone_hamburger" class="icon icon-menu icon-inverse"></i></div>
</IFNOT_OPT_HEADERMENUOFF></div>
* PP 3.35
* Yes, I'm clearing the phone browser's cache between each attempt.

Anything obvious that I'm missing?
User avatar
Tim Green
Site Admin
Posts: 23155
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Add button/object beside hamburger menu

Unread post by Tim Green »

Hi Mark,

Your icon is being displayed, it just hasn't been positioned, because everything in the header is absolutely positioned. It will be in the top left corner, possibly just out of sight on your phone. Use these style settings as a starting-point:

Code: Select all

<img class="phone" border="0" src="https://goflagship.com/images/b2.png" style="position:absolute;top:16px;right:48px;">
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Mark Wilsdorf
Posts: 151
Joined: Thu Dec 24, 2009 8:41 pm
Contact:

Re: Add button/object beside hamburger menu

Unread post by Mark Wilsdorf »

Finally figured out why I wasn't getting this to work...the editor I was using for baggage files was renaming the original file to *_bak.* and using the original filename to create a new file for editing. This confused the PP Toolbox app (I kept getting that nasty message about closing files...which I wasn't closing!!), so the file changes I was making weren't getting used.

Anyway, after switching to edit Baggage files in a different editor, it looks like your solution will work great.

As always Tim, THANKS for your excellent support of H&M.
Post Reply