Text Links with image v1

[Ezenity]

Thank you Shelley found the issue!
One thing... bad with tag me addon...

View attachment 40230

Any chance to disable link on tag me username links?

(like this: @Shelley)

This conflicts with tagging... it appears @[linkimage]username.

I noticed this too before even noticing anyone reporting it. So I came up with a solution that I am willing to share.

Made the image position to the right, added transition on hover to the image move to the left.

Here is my css.

/* Text Link Image */
.message .messageText a, .bbCodeQuote a, .Notice a {
    padding-right: 20px;
    margin-right: 0px;
    background: url("styles/default/xenforo/gradients/link-icon.png") no-repeat scroll left transparent;
    background-position: right;
    -moz-transition: all 0.7s ease-out 0s;
    -o-transition: all 0.7s ease-out 0s;
    -webkit-transition: all 0.7s ease-out 0s;
    transition-duration: 0.7s;
    transition-timing-function: ease-out;
    transition-delay: 0;
}
.message .messageText a:hover, .bbCodeQuote a:hover, .Notice a:hover {
    padding-left: 23px;
    padding-right: 5px;
    margin-left: 0;
    color: red;
    background: url("@imagePath/xenforo/gradients/link-icon.png") no-repeat scroll left transparent;
    box-shadow: none !important;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
    transition-duration: 0.7s;
    transition-timing-function: ease-in-out;
    transition-delay: 0;
    opacity: 0.5;
}

EDIT: Fixed another bug with quotes not displaying properly.

 

[giorgino]

Great improving dwdmadmac, but the mod act in images linked in user's signatures...

 

[Shelley]

Great improving dwdmadmac, but the mod act in images linked in user's signatures...

Try the following

edit: thought I had it but the code i posted had some adverse affects on other elements.

removed sorry didn't work

 

[Shelley]

Great improving dwdmadmac, but the mod act in images linked in user's signatures...

Think I have it this time. Try the following.

.messageContent .messageText a {
  background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  color: #7BA455;
  padding-left: 18px; }

.messageContent .messageText a:hover {
  color: #bd3131;
  background: url("@imagePath/xenforo/gradients/link-icon.png") no-repeat scroll left transparent;
  box-shadow: none !important;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  opacity: 0.3; }

.bbCodeQuote a, .bbCodeQuote a:hover {
  @property "baseHtml signature ugc";
  padding-left: 5px !important;
  background: none transparent !important;
  @property "/baseHtml signature ugc"; }

 

[MajesticMonkey]

This is absolutely fantastic @Shelley however it now adds it to the name tagging and also to the #hastags addon.
Is there a way, or some sort of code we can use only for external sites or not including the tagging and hashtags or something?

Sorry to be a pain just attempting to fix my site up.

 

[Shelley]

This is absolutely fantastic @Shelley however it now adds it to the name tagging and also to the #hastags addon.
Is there a way, or some sort of code we can use only for external sites or not including the tagging and hashtags or something?

Sorry to be a pain just attempting to fix my site up.

Hashtagging add-on I'm not familiar with nor have installed so can't help you with that, sorry. With regards to the username tagging why not apply the tag image to it so that it overides the link icon?

The css I'm using.

.messageContent .messageText a {
  background: url("@imagePath/xenforo/icons/link-icon.png") no-repeat scroll left center transparent;
  color: #7BA455;
  padding-left: 18px; }

.messageContent .messageText a:hover {
  color: #bd3131;
  background: url("@imagePath/xenforo/gradients/link-icon.png") no-repeat scroll left transparent;
  box-shadow: none !important;
  -moz-transition: all 0.3s ease-in-out 0s;
  -o-transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;
  opacity: 0.3; }

 .bbCodeQuote a, .bbCodeQuote a:hover {
  @property "baseHtml signature ugc";
  padding-left: 5px !important;
  background: none transparent !important;
  @property "/baseHtml signature ugc"; }
   
.message .messageText .username  {
  background: url("@imagePath/xenforo/icons/tag.png") no-repeat left center transparent;
  height: 13px;
  width: 13px;
  margin-left: 3px;
  padding-left: 15px;
}

 

[xIsabel38]

Hi @Shelley! Is there anyway to make it so the icon does not display when a user puts an image in their signature?

 

[oO5 Dynasty]

can you help me with the banner. i see you have a custom one plus you have a smiley next to the name. i cant get this to work