theheatho Posted April 19, 2021 Posted April 19, 2021 Hi, I am trying to replicate this help guide style that Invision uses for their own support guides. Specifically, I am interested in the left-side navigation, the breadcrumbs at the top, and the top-right TOC. Any ideas on how I can do this? Is there a module I can buy? I have programmers that can probably script it, but frankly they are somewhat lost at where to even start. Any suggestions? I know Invision used the Pages/Databases modules, which I own, but after that I am pretty lost in how to do this. Lindor 1
opentype Posted April 19, 2021 Posted April 19, 2021 The left-side navigation is in this Pages database template set: https://invisioncommunity.com/files/file/8663-pages-superdocs/ The breadcrumb is already a feature of the suite. There is nothing you need to get.
Claudia999 Posted April 19, 2021 Posted April 19, 2021 But the right-side "Table of contents" is obviously a company secret of IPS 😉 As many times as it has been asked here how it was created, there has never been an answer for example from @Rikki, @Matt or even @Lindy 😉 My great hope is that a TOC is a feature of next Pages update. 🙏🙏🙏🙏🙏 Beomyong Park and Iwooo 2
CoffeeCake Posted April 19, 2021 Posted April 19, 2021 1 hour ago, Claudia999 said: But the right-side "Table of contents" is obviously a company secret of IPS 😉 Pages is all about templates. It's not a secret--you can simply view the source and create a similar template yourself. It's just a nav box with links to anchors and some CSS: <nav class="sGuidesMenu"> <h2 class="ipsType_reset">In This Guide:</h2> <ul class="sGuidesMenu__list"> <li class="sGuidesMenu__item sGuidesMenu__item--H2"><a href="#generalterms"> General Terms </a></li> <li class="sGuidesMenu__item sGuidesMenu__item--H2"><a href="#apps"> Applications </a></li> </ul> </nav>
Meddysong Posted April 19, 2021 Posted April 19, 2021 2 hours ago, CoffeeCake said: It's just a nav box with links to anchors and some CSS: It is but that's not how they created it: it's generated programmatically with JS. Not bad for the case when several people are writing or editing entries. Claudia999 and CoffeeCake 2
theheatho Posted April 19, 2021 Author Posted April 19, 2021 I wish they would just sell the help guide as a module. Jeez, the effort to recreate it is annoying. Earnestinence Marguerite, Iwooo and Beomyong Park 2 1
Beomyong Park Posted July 24, 2021 Posted July 24, 2021 On 4/20/2021 at 5:45 AM, Claudia999 said: But the right-side "Table of contents" is obviously a company secret of IPS 😉 As many times as it has been asked here how it was created, there has never been an answer for example from @Rikki, @Matt or even @Lindy 😉 My great hope is that a TOC is a feature of next Pages update. 🙏🙏🙏🙏🙏 In case you want just a ToC not the nice right-side nav box, you can Add ToC plugin from CKEditor. I works fine as long as the author has permission to post HTML.
Iwooo Posted July 29, 2021 Posted July 29, 2021 Would love to see it available. It's also good for blogs. Wordpress blogs use it a lot and it helps SEO.
Jimi Wikman Posted August 20, 2021 Posted August 20, 2021 On 7/29/2021 at 10:09 AM, Iwooo said: Would love to see it available. It's just a snippet of JS 🙂 Try something like this:https://quirksmode.org/dom/toc.html
Lindor Posted September 4, 2021 Posted September 4, 2021 I can create a Guide IPS page with menu and table of contents by HTML and CSS codes @theheatho. I need some help with two JS or Jquery functions that I can't make, If any advanced user can give me some ideas or code I will appreciate. I need this: To change the class to expand some menu items: I need "onClick" change the class "cGuides_closed" by "cGuides_open" and "cGuides_open" by "cGuides_closed" again. (I'm testing this code but I don't know if scripts runs ok in pages with HTML editor) To mark the item that I'm viewing: Need to add the class "cGuides_active" to the item when your URL is visiting. (I'm testing this code but I don't know if scripts runs ok in pages with HTML editor) To create this pages and menu you should make this steps: Create a new custom Block Page named "menu_guide" and copy/paste the HTML code in this file: block-code.txt Create a new "Manual HTML" page with any name and copy/paste the HTML code in this file: page-code.txt Edit your theme and add this CSS code in your "custom.css" file: menu-CSS.txt NOTE: Obviusly, if you would to change this data you need to know some HTML code and edit as you need. To edit the menu your should edit only the block code (once time for all pages that you have included)
Recommended Posts