Help - best practices for a quicklinks html widget

  • 9 September 2022
  • 9 replies
  • 173 views
lrodman
Rank
Userlevel 7
Badge +5

 

Dreamweaver rewrite:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick Links</title>
</head>

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

9 replies

lrodman
Rank
Userlevel 7
Badge +5

Why does this not work?

<body>
<p><strong><em>Institute Quick Links</em></strong></p>
<ul>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/28/help-and-faq">Help and  Support Page</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/legacy/lms/index.php%3Fr%3DmyActivities/index">My  Activities</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/30/my-profile-and-calendar">My  Profile and Calendar</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/56/syllabi-learning-journeys">Syllabi (Learning Journeys)</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/learn/course/11/institute-forums">Forums</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/36/contests-and-events">Contests  and Events</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/27/student-of-the-month">Student  of the Month</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/18/about-the-institute-deans-and-experts">About  the Deans and Experts</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/52/multi-language-courses-page">Multi-Language  Courses</a></button><br>
  <button class="mdl-button mdl-js-button button-text light-ring" tabindex="0" style="background-color: rgb(51, 51, 51); color: rgb(255, 255, 255);"><a href="https://in.leadingre.com/pages/50/leadingre-resource-library">Institute  Resource Library</a></button><br>
</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>

result

crud lost it but basically some blank buttons that are not very wide and with broken links.

 

I’m trying to hijack docebo buttons

Bfarkas
Rank
Userlevel 7
Badge +3

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 ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

#SALT-NAV-Wrapper-12985 li a {
display: block;
}

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

lrodman
Rank
Userlevel 7
Badge +5

The name and number are random? Nothing to do with salt secrets etc?

Bfarkas
Rank
Userlevel 7
Badge +3

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. 

lrodman
Rank
Userlevel 7
Badge +5

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. 

Bfarkas
Rank
Userlevel 7
Badge +3

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. 

lrodman
Rank
Userlevel 7
Badge +5

How do you do local css so it works in app?

lrodman
Rank
Userlevel 7
Badge +5

Working great with global css - definitely interested in setting this up to “work right” in mobile app too @Bfarkas 

lrodman
Rank
Userlevel 7
Badge +5

  

Updated CSS
Mostly messed with colors and rounded buttons to match sys default for the my profile widget


#SALT-NAV-HomePage ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff;
}

#SALT-NAV-HomePage ul li {
margin-left:10px;
margin-right:10px;
}

#SALT-NAV-HomePage li a {
display: block;
color: #777;
font-weight: 600;
padding: 2px 16px;
text-decoration: none;
}

#SALT-NAV-HomePage ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

#SALT-NAV-HomePage li a {
display: block;
}

#SALT-NAV-HomePage li a:hover {
background-color: #666666;
color: rgb(233, 233, 233);
    border-radius: 2px;
}


#SALT-NAV-LearningJourneysPage ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #ffffff;
}

#SALT-NAV-LearningJourneysPage ul li {
margin-left:10px;
margin-right:10px;
}

#SALT-NAV-LearningJourneysPage li a {
display: block;
color: #000;
font-weight: 600;
padding: 8px 16px;
text-decoration: none;
}

#SALT-NAV-LearningJourneysPage ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}

#SALT-NAV-LearningJourneysPage li a {
display: block;
}

#SALT-NAV-LearningJourneysPage li a:hover {
background-color: #666666;
color: rgb(233, 233, 233);
    border-radius: 2px;
}

 

Reply


Terms & ConditionsCookie settings