<body> <p><strong><em>Institute Quick Links</em></strong></p> <ul> <li><a href="https://in.leadingre.com/pages/28/help-and-faq">Help and Support Page</a></li> <li><a href="https://in.leadingre.com/legacy/lms/index.php%3Fr%3DmyActivities/index">My Activities</a></li> <li><a href="https://in.leadingre.com/pages/30/my-profile-and-calendar">My Profile and Calendar</a></li> <li><a href="https://in.leadingre.com/pages/56/syllabi-learning-journeys">Syllabi (Learning Journeys)</a></li> <li><a href="https://in.leadingre.com/learn/course/11/institute-forums">Forums</a></li> <li><a href="https://in.leadingre.com/pages/36/contests-and-events">Contests and Events</a></li> <li><a href="https://in.leadingre.com/pages/27/student-of-the-month">Student of the Month</a></li> <li><a href="https://in.leadingre.com/pages/18/about-the-institute-deans-and-experts">About the Deans and Experts</a></li> <li><a href="https://in.leadingre.com/pages/52/multi-language-courses-page">Multi-Language Courses</a></li> <li><a href="https://in.leadingre.com/pages/50/leadingre-resource-library">Institute Resource Library</a></li> </ul> <p><a href="https://docs.google.com/forms/d/e/1FAIpQLSdJ55mt6A5ZUIF_hUv69K_Mfb2xzL5dHWqWG8aKcYeEJ7MKvw/viewform"><strong><em>Beta Test Feedback Form</em></strong></a></p> </body> </html>
I am thinking the ideal would be responsive button links that change color when hovered and clicked. What’s the best way to do this? Obviously I can rebuild the links as needed.
crud lost it but basically some blank buttons that are not very wide and with broken links.
I’m trying to hijack docebo buttons
When I have done this, I just keep it simple and do a modified list in html, wrapped in a unique identifier so that theres no potential overlap with other parts of system:
In this, the resources area is just an HTML widget and on hover it gets the blue bar.
The CSS I use for that is below.
/* Side bar page menu for Practice models, the unordered list must be wrapped in a div with id SALT-NAV-Wrapper-12985, this is a random unique attribute to not impact anywhere else. The below 6 classes/ids take a standard unordered list and modify it into the menu. */ #SALT-NAV-Wrapper-12985 ul { list-style-type: none; margin: 0; padding: 0; width: 100%; background-color: #f1f1f1; }
#SALT-NAV-Wrapper-12985 ul li { margin-left:10px; }
#SALT-NAV-Wrapper-12985 li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; }
#SALT-NAV-Wrapper-12985 li a:hover { background-color: #1f4e79; color: white; }
The HTML Structure is:
<div id="SALT-NAV-Wrapper-12985"> <ul><li><a href="https://live2.gopds.net/nyl/suite/webspace_view/KaplanCE-Final_~_461ea32cd9/Index.html" target="_blank" rel="noreferrer noopener"> Kaplan State and CE Courses</a></li> <li><a href="/learn/catalog/view/36">Annuity NYL Required To Sell</a></li> <li><a href="https://www.ap.newyorklife.com/guideme" target="_blank" rel="noreferrer noopener">GuideMe</a></li> <li><a title="Dashboard" href="https://live.gopds.net/nyl/suite/index_sso.php" target="_blank" rel="noreferrer noopener">NYLIC U Dashboard</a></li> <li><a href="/pages/98/manager-toolboxes">Manager Toolboxes</a></li> <li><a href="/pages/31/new-york-life-product-learning">New York Life Products</a></li> <li><a href="/pages/38/recommended-courses">Recommended Courses</a></li> <li><a href="/pages/66/learning-history">Learning History</a></li> </ul></div>
Another small note is that I would use relative links if internal instead of full URLs, they’ll load faster and have other advantages like using anchor tags and such.
The name and number are random? Nothing to do with salt secrets etc?
The name and number are random? Nothing to do with salt secrets etc?
Yeah sorry, that’s an inside joke, I was the “SALT”. Just a random ID that I knew would never be used by docebo to prevent future style conflicts and keep the effects of this on lists limited in scope.
How does this look on mobile app? Or do you not use that.
I might go with hover images in html or something dumb like that to make it work on mobile app.
Mobile app it falls back to a list of links in this setup. I’ve done a few where do the css local so it works in app too, balance of needs for each one. Hover images are really not great for a variety of reasons, especially if mobile is the purpose.
How do you do local css so it works in app?
Working great with global css - definitely interested in setting this up to “work right” in mobile app too @Bfarkas
Updated CSS Mostly messed with colors and rounded buttons to match sys default for the my profile widget
