MyBB Community Forums

http://tobiasahlin.com/blog/css-trick-an...nderlines/

How can I add this effect on my links like:

• Users Username
  
• Thread Title
  
• Board Title
  

I know it can't be that hard but I really can't think right now and its bothering me lol

Add this to theme global.css for the animation of forum title on index.php and thread title on forumdisplay.php

span.big_title > a,
.forumdisplay_regular span[id^="tid_"] > a {
  position: relative;
  color: #cecece;
  text-decoration: none;
}

span.big_title > a:hover,
.forumdisplay_regular span[id^="tid_"] > a:hover {
  color: #cecece;
}

span.big_title > a:before,
.forumdisplay_regular span[id^="tid_"] > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #cecece;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

span.big_title > a:hover:before,
.forumdisplay_regular span[id^="tid_"] > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

(2017-01-28, 12:11 PM)SvePu Wrote: [ -> ]Add this to theme global.css for the animation of forum title on index.php and thread title on forumdisplay.php

span.big_title > a,
.forumdisplay_regular span[id^="tid_"] > a {
  position: relative;
  color: #cecece;
  text-decoration: none;
}

span.big_title > a:hover,
.forumdisplay_regular span[id^="tid_"] > a:hover {
  color: #cecece;
}

span.big_title > a:before,
.forumdisplay_regular span[id^="tid_"] > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #cecece;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

span.big_title > a:hover:before,
.forumdisplay_regular span[id^="tid_"] > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Thanks, this worked. Would you happen to know how I can get this to work on locked thread titles as well on forum display?

Do you could post a link to such kind of thread on your forum?!

(2017-01-28, 06:35 PM)SvePu Wrote: [ -> ]Do you could post a link to such kind of thread on your forum?!

Edit: Nevermind, I managed to do it myself. Thanks

(2017-01-28, 06:29 PM)Kioshi Wrote: [ -> ]Thanks, this worked. Would you happen to know how I can get this to work on locked thread titles as well on forum display?

Replace the previous adding by:

span.big_title > a,
.forumdisplay_sticky span[id^="tid_"] > a,
.forumdisplay_regular span[id^="tid_"] > a {
  position: relative;
  color: #cecece;
  text-decoration: none;
}

span.big_title > a:hover,
.forumdisplay_sticky span[id^="tid_"] > a:hover,
.forumdisplay_regular span[id^="tid_"] > a:hover {
  color: #cecece;
}

span.big_title > a:before,
.forumdisplay_sticky span[id^="tid_"] > a:before,
.forumdisplay_regular span[id^="tid_"] > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #cecece;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

span.big_title > a:hover:before,
.forumdisplay_sticky span[id^="tid_"] > a:hover:before,
.forumdisplay_regular span[id^="tid_"] > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

(2017-01-28, 08:50 PM)SvePu Wrote: [ -> ]

(2017-01-28, 06:29 PM)Kioshi Wrote: [ -> ]Thanks, this worked. Would you happen to know how I can get this to work on locked thread titles as well on forum display?

Replace the previous adding by:

span.big_title > a,
.forumdisplay_sticky span[id^="tid_"] > a,
.forumdisplay_regular span[id^="tid_"] > a {
  position: relative;
  color: #cecece;
  text-decoration: none;
}

span.big_title > a:hover,
.forumdisplay_sticky span[id^="tid_"] > a:hover,
.forumdisplay_regular span[id^="tid_"] > a:hover {
  color: #cecece;
}

span.big_title > a:before,
.forumdisplay_sticky span[id^="tid_"] > a:before,
.forumdisplay_regular span[id^="tid_"] > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #cecece;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

span.big_title > a:hover:before,
.forumdisplay_sticky span[id^="tid_"] > a:hover:before,
.forumdisplay_regular span[id^="tid_"] > a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

I managed to get it to work, any idea how to get it to work on thread titles in prostats?

http://demigra.com/index.php it's the stripped down prostats above boardstats that reads "Recent Posts" I can't figure that out, it's the last place I want it added to.

Thanks

Could you post the templates for - prostats_newestposts_row and prostats_newestposts_latest_posts, please?

(2017-01-28, 09:04 PM)SvePu Wrote: [ -> ]Could you post the templates for - prostats_newestposts_row and prostats_newestposts_latest_posts, please?

prostats_newestposts_row:

<tr class="{$trow} smalltext{$highlight}">
		{$newestposts_cols}
		</tr>

prostats_newestposts_latest_posts:

<td>{$readstate_icon}<a href="{$threadlink}" title="{$subject_long}"><span style="font-size: 20px;">{$subject}</span></a></td>

Ok, please replace the content of prostats_newestposts_latest_posts with:

<td>{$readstate_icon}<span class="big_title"><a href="{$threadlink}" title="{$subject_long}">{$subject}</a></span></td>