v5 Cloud

Hi all,

I wish to add an item to the mobile footer (not the 'Menu' option contained within), to be located between 'Search' and 'Menu'. I thought the Menu Manager would let me do this, but of course it does not (I can only add items within 'Menu', not the level up from there). Can anyone clue me in to how I would achieve this given that there is no longer access to templates? Please keep in mind that I am not a coder.

Thanks.

Ah. Is this what I should be looking at?

Assuming it is, I still might have some questions. :)

I am using test installation of v5 Cloud.

Just a small bug report - I copied the default theme, I waited, and it timed out. I back-buttoned and there are three copies of the default them. I only clicked it once.

Update on copy bug: I delete them and tried again - same result. Since it timed out, I cannot be certain that the theme copied properly. I do not know which way the copies stacked, so I selected the middle one and deleted the other two.

37 minutes ago, Como said:

I am using test installation of v5 Cloud.

Just a small bug report - I copied the default theme, I waited, and it timed out. I back-buttoned and there are three copies of the default them. I only clicked it once.

Update on copy bug: I delete them and tried again - same result. Since it timed out, I cannot be certain that the theme copied properly. I do not know which way the copies stacked, so I selected the middle one and deleted the other two.

Thanks. Have added a bug report for that

Edit, read post wrong.

Edited May 13, 20251 yr by Moestuin

Thank you for posting your instructions, @Moestuin. Actually, it in the menu bar at the very bottom (the mobile footer menu bar), between 'search' and 'menu' where I need the additional button.

I have managed to locate the correct template and will be looking at how to use a hook to add the button. There is fair bit of code - I am unsure how much I can borrow from elsewhere in the menu bar - I'll probably need some help once I've had a deeper look into this.

I actually read you post wrong, tought you wanted to add more to the footer itself, not the mobile navigation footer. So deleted that post.

I did a small test for the mobile navigation footer:

Then in your custom CSS:

.ipsMobileFooter {  /* your new mobile footer */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.ipsMobileFooter:nth-of-type(2) {  /* hide to orginal mobile footer*/
  display: none;
}
.ipsLayout__app {
  margin-bottom: 55px;  /* make sure bottom layout not hidden behind new mobile footer */
}

Note that because of the hook, that you have 2 footers .ipsMobileFooter, so you need to hide one with CSS.

Then ofcouse my emtpy Content from first picture, shows an empty bar on mobile:

You can use the "View template" and copy over the current items. And then add somewhere in that template your extra button.
Ofcouse you have to restyle the CSS buttons also, as now there is no space for an addtional button.

Edited May 13, 20251 yr by Moestuin

I am getting somewhere now:

Got a Test inside it:

Was not needed to restyle the CSS buttons.

Just find , and copy this part before it, and adjust this to a new button.

<li data-el="more" class="ipsMobileFooter__item">

<button class="ipsMobileFooter__link" aria-controls='ipsOffCanvas--navigation' aria-expanded='false' data-ipscontrols>

<span class="ipsMobileFooter__icon">

<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>

</span>

{{$notificationCount= \IPS\Member\UserMenu::mobileNotificationCount();}}

{{if $notificationCount}}

<span class='ipsNotification'>{$notificationCount}</span>

{{endif}}

<span class="ipsMobileFooter__text">{lang="mobile_footer_menu"}</span>

</button>

</li>

Edited that part for myself:

Change for example, http://www.test.com to the link on you website where you want to go.
And change WIKI to something else.

Now only need to find a good icon for it.

<li data-el="more" class="ipsMobileFooter__item">

<a href="http://www.test.com" class="ipsMobileFooter__link" aria-controls='ipsOffCanvas--navigation' aria-expanded='false' data-ipscontrols">

<span class="ipsMobileFooter__icon">

<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512">

<path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/>

</svg>

</span>

<span class="ipsMobileFooter__text">Wiki</span>

</a>

</li>

Correction to css:

.ipsMobileFooter {
  position: fixed;       /* Fixes the footer relative to the viewport */
  bottom: 0;             /* Positions it at the bottom of the screen */
  left: 0;               /* Aligns it to the left edge */
  width: 100%;           /* Makes it span the full width */
  z-index: 9999;         /* Ensures it stays on top of other elements */
}
.ipsMobileFooter:nth-of-type(2) {
  display: none;
}
@media (max-width: 768px) {
    .ipsLayout__app {
    margin-bottom: 55px;
    }
}

Edited May 13, 20251 yr by Moestuin

17 minutes ago, Moestuin said:

I am getting somewhere now:

You've got further than me. I managed to add an item before the mobile footer menu - it appeared above. I tried creating an svg file (for a chat icon), but I could not get that to display. And I have been unable to find out how to add a new language string. I'll now look through what you have posted now to see how you did it. Thank you so much for going to this effort! It is greatly appreciated.

I just typed in the text that i needed, we only use one language. But if you use multiply on the website:

Go to customaization, languages, then press "+ Add Phrase"

Will have to find a beter icon, but as test it is ok.


svg icons, and you can edit them on the website:
https://www.svgrepo.com/collection/zest-interface-icons/
once you download or create an svg icon, right click and open with notepad:
copy the <svg to /svg>
not the first line <?xml

Edited May 13, 20251 yr by Moestuin

55 minutes ago, Moestuin said:

I actually read you post wrong, tought you wanted to add more to the footer itself, not the mobile navigation footer. So deleted that post.

Maybe we are using different terminology for the same thing. I do mean the bar, at the very bottom in mobile view, with (by default and logged in): unread content; notifications; messages; search; menu.

I though this would be System: from/global/mobileFooterBar

Hook target: mobile footer menu

But I see that you have selected mobileFooter.

I have already created an svg for this - I believe this is correct:

<svg width="16" height="16" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

<path d="m59.14 79.053c-4.1655 0-7.5189 3.3534-7.5189 7.5189v26.316c0 4.1655 3.3534 7.5189 7.5189 7.5189h2.9528l1.3854 10.493 12.468-9.5746 1.1963-0.91881h20.46c4.1655 0 7.5189-3.3534 7.5189-7.5189v-26.316c0-4.1655-3.3534-7.5189-7.5189-7.5189h-38.463z" fill-opacity="0" stroke="#28364c" stroke-width="7.365"/>

</svg>

Edited May 13, 20251 yr by Como

Hook target: mobile footer menu == when you press on menu, the menu pops open, and you can add items there.

Edited May 13, 20251 yr by Moestuin

5 minutes ago, Moestuin said:

Hook target: mobile footer menu == when you press on menu, the menu pops open, and you can add items there.

Ah. I see. That's within the 'menu' item in that bar.

But I remain confused by we are creating a whole new footer. Is it because it is not possible to add an item to the existing one? I'll copy your exact process before I post again. Again, thank you.

9 minutes ago, Moestuin said:

Hook target: mobile footer menu == when you press on menu, the menu pops open, and you can add items there.

Ha! I've just found my menu item in there. It is not remotely right, but it is there.

3 minutes ago, Como said:

But I remain confused by we are creating a whole new footer.

Me too, i have not found a way to edit the current template in v5. Only can add things before or after blocks. Or i think you will have to make an entire theme.
Thats why i just copy the entire template, and hide the orginial bar. For me this also feels like a workaround, but i don't know how to do it on a other way.

1 minute ago, Moestuin said:

Me too, i have not found a way to edit the current template in v5. Only can add things before or after blocks. Or i think you will have to make an entire theme.
Thats why i just copy the entire template, and hide the orginial bar. For me this also feels like a workaround, but i don't know how to do it on a other way.

I see. It seems like something which should be more straightforward - to edit a menu.

Edited May 13, 20251 yr by Como

25 minutes ago, Moestuin said:

Me too, i have not found a way to edit the current template in v5. Only can add things before or after blocks. Or i think you will have to make an entire theme.
Thats why i just copy the entire template, and hide the orginial bar. For me this also feels like a workaround, but i don't know how to do it on a other way.

What some are doing is to hide items with CSS, then add your own elements

I did this in the above CSS example. It feels a bit like a 'hack'. But it works.

15 hours ago, Moestuin said:

I did this in the above CSS example. It feels a bit like a 'hack'. But it works.

It does feel that way, doesn't it.

Given that this approach is sometimes necessary, and Invision have decided that we should not be able to edit the original templates, would it make sense to have a function to duplicate the template (which then takes over) and the original is kept in reserve for possible reversion? Now, there might well be reasons for Invision to disallow the editing of original templates I do not at all appreciate, and duplicating/archiving original templates might be at odds with Invision's rationale for the change - I don't know. I'm just throwing this out there in case it holds any value. Because from my (possibly/probably) naive perspective, being able to create a parallel template this way - which contains its own (possibly conflicting) code - and then using CSS to hide the original outputted content is not intuitive to me.

Anyway, using your instructions, @Moestuin, I created a new mobile footer menu bar last night. It all looks perfect - thank you! The only wrinkle is that I do not know how to use the new button to trigger the JS event for the chat room - a link is not going to cut it. Beyond a small amount of JS and some added CSS to make the chat room play nicely within the theme, there is nothing for me to edit at my Invision site. I am waiting on some instructions from the chat room host/provider.

54 minutes ago, Como said:

I do not know how to use the new button to trigger the JS event for the chat room -

Do you have the example of the JS event?

My first tought is, that at the theme, you add a javascript, with a listner, something like this. Then it always lisens if someone presses the button. And then you execute you javascript code what is required.

			<li data-el="more" class="ipsMobileFooter__item">

with the code from yesterday, i see there are now two times the above item. Change your button, to chat.

document.addEventListener('DOMContentLoaded', function() {
  const footerNav = document.querySelector('#ipsMobileFooter');

  if (footerNav) {
    footerNav.addEventListener('click', function(event) {
      const target = event.target;
      const liElement = target.closest('li.ipsMobileFooter__item[data-el="chat"]');

      if (liElement && footerNav.contains(liElement)) {
        // Your code to execute when the specific <li> is clicked
        console.log('Clicked on the <li> with data-el="chat" inside #ipsMobileFooter');
      }
    });
  }
});

Edited May 14, 20251 yr by Moestuin

Hi @Moestuin

I really wasn't expecting more help from you. But since I have not yet heard back from the chat room developers... :)

Having said that, I am unsure of how to find the information you seek. I can see the HTML for the button, but I have no idea how that's involved in triggering the JS event (or where to find the event). I'll give the developers another 24 hours to see if/what I get back from them. The chat room is supposed to work (with only moderate effort) on nearly any platform, so I expect they should be able to help me. But if not, I'll be back. But thank you for your offer of further assistance. And in the interim, I'll have a look using the Inspect Tools and see what I can make of your code.

Hi @Moestuin

I might have something. This appears to be the relevant event. I can provide a fully expanded view if necessary.

The following is a 'click' event.

Linked JS file: vendor-CCBXFUKk-chunk.js

Edited May 14, 20251 yr by Como

i guess that is the the icon for the chat, that is called. If you want to link from you footer button, to a button in chat, i guess that would be right, otherwise do have the chatbox url and discription where you want to go to. (or send trough pm) . Also is the chat on the same server/domain, or other server? As then it would be an issue with cross-origin

Edited May 14, 20251 yr by Moestuin

19 minutes ago, Moestuin said:

i guess that is the the icon for the chat, that is called. If you want to link from you footer button, to a button in chat, i guess that would be right, otherwise do have the chatbox url and discription where you want to go to. (or send trough pm)

It is. I'll send you a PM. Thanks.