Mouse over links

Go down

Solved Mouse over links

Post by Shelby™ on Fri Feb 15, 2013 1:04 pm

Hi,
I found a forum where if I mouse over the last posts(And some other links), I'll get this instead the old, ugly yellow bar. Um sorry, I don't know how it's called. >.>


Can someone know the code to do same with my forum? My forum address is: http://primordiality.forumtwilight.com/


Last edited by opp on Mon Feb 18, 2013 11:05 am; edited 1 time in total
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by SLGray on Fri Feb 15, 2013 3:34 pm

Are you talking about the pop-up message with the thread title? This should already occur on your forum. Or are you talking about the background changing colors?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43145
Reputation : 3059
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Sat Feb 16, 2013 1:21 am

@SLGray wrote:Are you talking about the pop-up message with the thread title? This should already occur on your forum. Or are you talking about the background changing colors?

Yea, the little pop-up message. It's light-yellow at me, but there is gray and looks better. Razz I want that gray, what you see in the picture.

Here's my currently:

And I want to change it look like this:
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Sun Feb 17, 2013 2:17 am

bump
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by Kaizer Lee on Sun Feb 17, 2013 3:11 am

Not sure if I got the ID correct, but give this a try:

Code:
#textmenu {
background-color: #000;
width: 100%;
height: auto;
}
avatar
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Sun Feb 17, 2013 3:51 am

@Kaizer Lee wrote:Not sure if I got the ID correct, but give this a try:

Code:
#textmenu {
background-color: #000;
width: 100%;
height: auto;
}

No, nothing happened. :/
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by Kaizer Lee on Sun Feb 17, 2013 5:04 am

It would be really helpful if you can get the ID ._.

For some odd reason, my right click won't work. Though, do try pming Black Scorpion here since he's a gfx'designer here about it.
avatar
Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Sun Feb 17, 2013 6:25 am

@Kaizer Lee wrote:It would be really helpful if you can get the ID ._.

For some odd reason, my right click won't work. Though, do try pming Black Scorpion here since he's a gfx'designer here about it.

It seems a CSS code which change the pop-up button when someone mouse over the last posts and other links.. I don't think it's related to gfx in any way. lol
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Mon Feb 18, 2013 5:02 am


Oh yea that's it. Um.. nooby question, but where I can put this?lol I added to my CSS, but nothing happened. :/
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on Mon Feb 18, 2013 11:08 am

Rideem3 wrote:Put this in your CSS:
Code:
.tipsy{font-size:10px;position:absolute;padding:5px;z-index:100000}.tipsy-inner{background-color:#000;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center}.tipsy-inner{border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.tipsy-arrow{position:absolute;width:0;height:0;line-height:0;border:5px dashed #000}.tipsy-arrow-n{border-bottom-color:#000}.tipsy-arrow-s{border-top-color:#000}.tipsy-arrow-e{border-left-color:#000}.tipsy-arrow-w{border-right-color:#000}.tipsy-n .tipsy-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}.tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}.tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:0;border-left-color:transparent;border-right-color:transparent}.tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:0;border-left-color:transparent;border-right-color:transparent}.tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:0;border-left-color:transparent;border-right-color:transparent}.tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:0;border-left-color:transparent;border-right-color:transparent}.tipsy-e .tipsy-arrow{right:0;top:50%;margin-top:-5px;border-left-style:solid;border-right:0;border-top-color:transparent;border-bottom-color:transparent}.tipsy-w .tipsy-arrow{left:0;top:50%;margin-top:-5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent}

Then go to Admin Panel -> Modules -> Javascript codes management -> make sure it's activated -> Create new -> select in all pages -> paste:
Code:
(function(c){function b(f,e){return(typeof f=="function")?(f.call(e)):f}function d(e){while(e=e.parentNode){if(e==document){return true}}return false}function a(f,e){this.$element=c(f);this.options=e;this.enabled=true;this.fixTitle()}a.prototype={show:function(){var h=this.getTitle();if(h&&this.enabled){var g=this.tip();g.find(".tipsy-inner")[this.options.html?"html":"text"](h);g[0].className="tipsy";g.remove().css({top:0,left:0,visibility:"hidden",display:"block"}).prependTo(document.body);var k=c.extend({},this.$element.offset(),{width:this.$element[0].offsetWidth,height:this.$element[0].offsetHeight});var e=g[0].offsetWidth,j=g[0].offsetHeight,i=b(this.options.gravity,this.$element[0]);var f;switch(i.charAt(0)){case"n":f={top:k.top+k.height+this.options.offset,left:k.left+k.width/2-e/2};break;case"s":f={top:k.top-j-this.options.offset,left:k.left+k.width/2-e/2};break;case"e":f={top:k.top+k.height/2-j/2,left:k.left-e-this.options.offset};break;case"w":f={top:k.top+k.height/2-j/2,left:k.left+k.width+this.options.offset};break}if(i.length==2){if(i.charAt(1)=="w"){f.left=k.left+k.width/2-15}else{f.left=k.left+k.width/2-e+15}}g.css(f).addClass("tipsy-"+i);g.find(".tipsy-arrow")[0].className="tipsy-arrow tipsy-arrow-"+i.charAt(0);if(this.options.className){g.addClass(b(this.options.className,this.$element[0]))}if(this.options.fade){g.stop().css({opacity:0,display:"block",visibility:"visible"}).animate({opacity:this.options.opacity})}else{g.css({visibility:"visible",opacity:this.options.opacity})}}},hide:function(){if(this.options.fade){this.tip().stop().fadeOut(function(){c(this).remove()})}else{this.tip().remove()}},fixTitle:function(){var e=this.$element;if(e.attr("title")||typeof(e.attr("original-title"))!="string"){e.attr("original-title",e.attr("title")||"").removeAttr("title")}},getTitle:function(){var g,e=this.$element,f=this.options;this.fixTitle();var g,f=this.options;if(typeof f.title=="string"){g=e.attr(f.title=="title"?"original-title":f.title)}else{if(typeof f.title=="function"){g=f.title.call(e[0])}}g=(""+g).replace(/(^\s*|\s*$)/,"");return g||f.fallback},tip:function(){if(!this.$tip){this.$tip=c('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');this.$tip.data("tipsy-pointee",this.$element[0])}return this.$tip},validate:function(){if(!this.$element[0].parentNode){this.hide();this.$element=null;this.options=null}},enable:function(){this.enabled=true},disable:function(){this.enabled=false},toggleEnabled:function(){this.enabled=!this.enabled}};c.fn.tipsy=function(i){if(i===true){return this.data("tipsy")}else{if(typeof i=="string"){var k=this.data("tipsy");if(k){k[i]()}return this}}i=c.extend({},c.fn.tipsy.defaults,i);function h(m){var n=c.data(m,"tipsy");if(!n){n=new a(m,c.fn.tipsy.elementOptions(m,i));c.data(m,"tipsy",n)}return n}function l(){var m=h(this);m.hoverState="in";if(i.delayIn==0){m.show()}else{m.fixTitle();setTimeout(function(){if(m.hoverState=="in"){m.show()}},i.delayIn)}}function g(){var m=h(this);m.hoverState="out";if(i.delayOut==0){m.hide()}else{setTimeout(function(){if(m.hoverState=="out"){m.hide()}},i.delayOut)}}if(!i.live){this.each(function(){h(this)})}if(i.trigger!="manual"){var e=i.live?"live":"bind",j=i.trigger=="hover"?"mouseenter":"focus",f=i.trigger=="hover"?"mouseleave":"blur";this[e](j,l)[e](f,g)}return this};c.fn.tipsy.defaults={className:null,delayIn:0,delayOut:0,fade:false,fallback:"",gravity:"n",html:false,live:false,offset:0,opacity:0.8,title:"title",trigger:"hover"};c.fn.tipsy.revalidate=function(){c(".tipsy").each(function(){var e=c.data(this,"tipsy-pointee");if(!e||!d(e)){c(this).remove()}})};c.fn.tipsy.elementOptions=function(f,e){return c.metadata?c.extend({},e,c(f).metadata()):e};c.fn.tipsy.autoNS=function(){return c(this).offset().top>(c(document).scrollTop()+c(window).height()/2)?"s":"n"};c.fn.tipsy.autoWE=function(){return c(this).offset().left>(c(document).scrollLeft()+c(window).width()/2)?"e":"w"};c.fn.tipsy.autoBounds=function(f,e){return function(){var g={ns:e[0],ew:(e.length>1?e[1]:false)},j=c(document).scrollTop()+f,h=c(document).scrollLeft()+f,i=c(this);if(i.offset().top<j){g.ns="n"}if(i.offset().left<h){g.ew="w"}if(c(window).width()+c(document).scrollLeft()-i.offset().left<f){g.ew="e"}if(c(window).height()+c(document).scrollTop()-i.offset().top<f){g.ns="s"}return g.ns+(g.ew?g.ew:"")}}})(jQuery);
$(function() {
$('[title]').tipsy();
});

Ty again! It works perfectly. Wink
avatar
Shelby™
Forumember

Male Posts : 185
Reputation : 6
Language : Hungarian(native), English
Location : Hungary

http://evasion.forumo.org/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum