The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Animated underlines and pop-up tooltips on hover
essex23
post Aug 7 2019, 03:46 PM
Post #1





Group: Members
Posts: 7
Joined: 7-August 19
Member No.: 26,950



So I am on a project with my new employer to update their existing Knowledge Base, but the lead would like to make the design a little more up-to-date, more as he calls it "21st Century" since their old one was in WordPress.

I admittedly know NOTHING of HTML code....like...AT ALL.


The two concepts he really would like to see implemented, and they are small but would add the look and feel he would like....are animated underlines on links when hovered over, and pop-up tooltips for some things when you hover over them.


I've seen websites that should how to do them, but I can NOT seem to make them work. We have 800+ articles to update, and I would like to maybe be able to have a template for animated underlines and pop-up tooltips to use for when we get to the heavy lifting and start updating everything in the coming months.

Can someone help this code noob out? I'd sing your praises forever!! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 7 2019, 06:02 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(essex23 @ Aug 7 2019, 10:46 PM) *

the lead would like to make the design a little more up-to-date, more as he calls it "21st Century" since their old one was in WordPress.

Wordpress is still quite popular AFAIK. What matters might be wether you want to maintain the site with a Content Management System or something else. In any case, changing the platform from Wordpress to something different may not be trivial.

QUOTE
I admittedly know NOTHING of HTML code....like...AT ALL.

In that case I suggest you keep things simple. Here are a couple of old but still useful references:
http://htmlhelp.com/reference/html40/
http://htmlhelp.com/reference/css/

But how come they make you responsible for their website, if you are both newly hired and know nothing of HTML? mellow.gif

QUOTE
animated underlines on links when hovered over,

You mean that an underline should appear only when a link is hovered? Technically that's easy to do with CSS:

CODE
a:link, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}

but it can make it harder for user to understand where there are links on the page. At least give the links a different color.

QUOTE
and pop-up tooltips for some things when you hover over them.

That can easiest be done with the TITLE attribute:

CODE
<abbr title="Web Design Group">WDG</abbr>

but again the user may not understand that the element needs to be hovered to see the tooltip text. If you use other HTML elements than links you may want to style them with e.g. a dotted bottom border and a different cursor to make them stand out:

CODE
abbr {
border-bottom: 1px dotted;
cursor: help;
}

More fancy (and complex) tooltip examples can be found on the web, but stay away from those if you're beginner.

QUOTE
We have 800+ articles to update

In that case it might be easiest to style the existing HTML with CSS, without changing any of the HTML (or the database, if you use Wordpress?).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
essex23
post Aug 7 2019, 06:44 PM
Post #3





Group: Members
Posts: 7
Joined: 7-August 19
Member No.: 26,950



QUOTE(Christian J @ Aug 7 2019, 06:02 PM) *

QUOTE(essex23 @ Aug 7 2019, 10:46 PM) *

the lead would like to make the design a little more up-to-date, more as he calls it "21st Century" since their old one was in WordPress.

Wordpress is still quite popular AFAIK. What matters might be wether you want to maintain the site with a Content Management System or something else. In any case, changing the platform from Wordpress to something different may not be trivial.

QUOTE
I admittedly know NOTHING of HTML code....like...AT ALL.

In that case I suggest you keep things simple. Here are a couple of old but still useful references:
http://htmlhelp.com/reference/html40/
http://htmlhelp.com/reference/css/

But how come they make you responsible for their website, if you are both newly hired and know nothing of HTML? mellow.gif

QUOTE
animated underlines on links when hovered over,

You mean that an underline should appear only when a link is hovered? Technically that's easy to do with CSS:

CODE
a:link, a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}

but it can make it harder for user to understand where there are links on the page. At least give the links a different color.

QUOTE
and pop-up tooltips for some things when you hover over them.

That can easiest be done with the TITLE attribute:

CODE
<abbr title="Web Design Group">WDG</abbr>

but again the user may not understand that the element needs to be hovered to see the tooltip text. If you use other HTML elements than links you may want to style them with e.g. a dotted bottom border and a different cursor to make them stand out:

CODE
abbr {
border-bottom: 1px dotted;
cursor: help;
}

More fancy (and complex) tooltip examples can be found on the web, but stay away from those if you're beginner.

QUOTE
We have 800+ articles to update

In that case it might be easiest to style the existing HTML with CSS, without changing any of the HTML (or the database, if you use Wordpress?).


Wow...that is a LOT to take in. And I honestly can't make heads or tale sof it right now. I might literally spend all day tomorrow trying to figure it out. lol

Anyway, to answer a few of your queries...

They are currently using WordPress, but the free version. So they get ZERO support from WordPress when they call for help. So they are migrating from WP to Salesforce since they have the vast majority of their business data there.


They hired me not so much to maintain their website. I am by profession a Technical Writer, Technical Trainer, Instructional Designer, and Curriculum Developer. The bulk of what I am doing is going through the articles, putting them all in a standard format (some articles had styles and fonts I never heard of before), and making it look sleek, streamlined, and correct any errors that mey be in the knowledge-base articles (already found 23 in just one article.)

The request to add things like animated underlines on links and pop-ups on hover points came from the Senior IT director seeing the Beats by Dr. Dre's support page, and he thought that was something they needed. so now it falls to me to figure out how to make it work. And have a functional example to show his boss for approval.

By Friday.


I just started Monday.


I didn't even get access to everything I needed until today.



No pressure. lol
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 7 2019, 09:03 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,461
Joined: 9-August 06
Member No.: 6



QUOTE(essex23 @ Aug 7 2019, 10:46 PM) *

I've seen websites that should how to do them, but I can NOT seem to make them work.


Well, could you link to one of those sites? It would make it easier for us to understand exactly what you mean.

Animated underline, could it be CSS animations your boss is after? This ain't pretty, but it is an animated underline (or at least it looks like one). tongue.gif

CODE

a            { text-decoration: none }

a span       { border-bottom: 3px solid blue }
a:hover span { border-bottom: 3px solid blue;
               animation-name: animline;
               animation-duration: 1s;
               animation-iteration-count: infinite;
               animation-direction: alternate }


@keyframes animline { from {border-color: blue}
                      to {border-color: red}}


HTML
<a href="http://htmlhelp.com"><span>Get help with HTML</span></a>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2019, 06:26 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(essex23 @ Aug 8 2019, 01:44 AM) *

The request to add things like animated underlines on links and pop-ups on hover points came from the Senior IT director seeing the Beats by Dr. Dre's support page, and he thought that was something they needed.

This is relatively advanced CSS syntax, but a search for "css slide-in underline" turns up a few tutorial pages you might copy from, like this one: https://paulund.co.uk/css-animation-link-underline (the "Left to right" example seems to be what your boss wants). You may want to change the underline's background-color from #fff (white) to #000 (black) and remove the links' default underlining (with "text-decoration: none"), like this:

CODE
a.left
{
    position: relative;
    text-decoration: none;
}

a.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.left:hover:before {
  visibility: visible;
  width: 100%;
}

The CSS tutorial I linked to earlier shows the basics on how to implement stylesheets (e.g. embedded or as separate CSS files). For testing, I suggest you start with adding the CSS code above in a text file called e.g. "style.css" (saved in the same directory as the HTML files), then load that file with this (in the web page's HEAD section):

CODE
<link rel="stylesheet" type="text/css" href="style.css" media="screen">

The CSS tutorial also shows how to define which links you want styled, using HTML's CLASS attribute. With the CSS code above, links need a CLASS value of "left" to be styled:

CODE
<a href="" class="left">Hover Over Me</a>

You can of course use other CLASS values if you want, as long as you make the corresponding changes in the CSS. For example, the CSS CLASS selector "foo":

CODE
.foo {...}


goes along with any element using the CLASS attribute value "foo":

CODE
<p class="foo">text</p>




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
essex23
post Aug 8 2019, 08:51 AM
Post #6





Group: Members
Posts: 7
Joined: 7-August 19
Member No.: 26,950



QUOTE(Christian J @ Aug 8 2019, 06:26 AM) *

QUOTE(essex23 @ Aug 8 2019, 01:44 AM) *

The request to add things like animated underlines on links and pop-ups on hover points came from the Senior IT director seeing the Beats by Dr. Dre's support page, and he thought that was something they needed.

This is relatively advanced CSS syntax, but a search for "css slide-in underline" turns up a few tutorial pages you might copy from, like this one: https://paulund.co.uk/css-animation-link-underline (the "Left to right" example seems to be what your boss wants). You may want to change the underline's background-color from #fff (white) to #000 (black) and remove the links' default underlining (with "text-decoration: none"), like this:

CODE
a.left
{
    position: relative;
    text-decoration: none;
}

a.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.left:hover:before {
  visibility: visible;
  width: 100%;
}

The CSS tutorial I linked to earlier shows the basics on how to implement stylesheets (e.g. embedded or as separate CSS files). For testing, I suggest you start with adding the CSS code above in a text file called e.g. "style.css" (saved in the same directory as the HTML files), then load that file with this (in the web page's HEAD section):

CODE
<link rel="stylesheet" type="text/css" href="style.css" media="screen">

The CSS tutorial also shows how to define which links you want styled, using HTML's CLASS attribute. With the CSS code above, links need a CLASS value of "left" to be styled:

CODE
<a href="" class="left">Hover Over Me</a>

You can of course use other CLASS values if you want, as long as you make the corresponding changes in the CSS. For example, the CSS CLASS selector "foo":

CODE
.foo {...}


goes along with any element using the CLASS attribute value "foo":

CODE
<p class="foo">text</p>



Ok...so for the sake of my sanity...and hopefully finally being able to wrap my head around this idea....here is a sample of the code for a link that I am currently looking at. It is just a text lunk that already has the standard visible underline.

<span style="font-size: 12px;"><span style="font-family: Arial,Helvetica,sans-serif;"><span style="text-decoration: underline;"><strong><a href="https://help.myresman.com/knowledge-base/change-current-period-advance-the-period/" target="_blank">How do I change the period (change the current period)?</a></strong></span> &nbsp;&nbsp;</span></span>


How can I take what you are mentioning above and use the HTML code so that when a user hovers over the link, it does the left to right underline? Or maybe even a middle outwards underline?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
essex23
post Aug 8 2019, 11:02 AM
Post #7





Group: Members
Posts: 7
Joined: 7-August 19
Member No.: 26,950



I also just found out that the Salesforce environment I am having to work with ONLY uses HTML, no CSS or anything else in there. Every line of code starts with < and ends with >
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 8 2019, 11:42 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,461
Joined: 9-August 06
Member No.: 6



To start with you could remove all those SPANs and style the link directly.

Please also answer my question above. It's pretty hard to help when you don't specify what it is you want.

QUOTE(pandy @ Aug 8 2019, 04:03 AM) *

QUOTE(essex23 @ Aug 7 2019, 10:46 PM) *

I've seen websites that should how to do them, but I can NOT seem to make them work.


Well, could you link to one of those sites? It would make it easier for us to understand exactly what you mean.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2019, 12:54 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(essex23 @ Aug 8 2019, 03:51 PM) *

How can I take what you are mentioning above and use the HTML code so that when a user hovers over the link, it does the left to right underline? Or maybe even a middle outwards underline?

Just add a CLASS attribute:

CODE
<a href="https://help.myresman.com/knowledge-base/change-current-period-advance-the-period/" class="left">How do I change the period (change the current period)?</a>

You also need the LINK element (in the page's HEAD section) to load the CSS file, as explained above.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2019, 12:59 PM
Post #10


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(essex23 @ Aug 8 2019, 06:02 PM) *

I also just found out that the Salesforce environment I am having to work with ONLY uses HTML, no CSS or anything else in there. Every line of code starts with < and ends with >

How does Salesforce let you edit the theme/template/design?

Can you edit a page's HEAD section, or only BODY? As an alternative to external CSS files, you can also to embed CSS in a STYLE element in HEAD, but then you must add the CSS code on every page (instead of using a single CSS file for the entire site), which is less practical. You might also put a LINK or STYLE element in BODY, even though it's invalid HTML it may still work in practice.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Aug 8 2019, 01:01 PM
Post #11


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Aug 8 2019, 06:42 PM) *

Please also answer my question above. It's pretty hard to help when you don't specify what it is you want.

The OP mentioned the "Beats by Dr. Dre's support page", I think it's this one: https://www.beatsbydre.com/support cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
essex23
post Aug 8 2019, 01:55 PM
Post #12





Group: Members
Posts: 7
Joined: 7-August 19
Member No.: 26,950



Well...after some more searching and digging, a colleague and myself found some threads on the Salesforce forums where people have been BEGGING for CSS functionality to be added to their platform. But those pleas have apparently been ignored for the most part.

It seems that there is a way to add the kind of visual and cosmetic functionality to their Knowledge Base articles, but it requires an entirely new code to be developed outside of Salesforce itself, but is, of course, another Salesforce platform called Visualforce.


So since this falls well out of the scope of this project...I think that this may be a dead issue for the foreseeable future. But I do appreciate all the attempts to help from everyone.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2019 - 10:57 AM