The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Mouse over links

View previous topic View next topic Go down

Solved Mouse over links

Post by Shelby™ on February 15th 2013, 8: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 February 18th 2013, 6:05 pm; edited 1 time in total

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 February 15th 2013, 10: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.


SLGray
Administrator
Administrator

Male Posts : 35629
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Mouse over links

Post by Shelby™ on February 16th 2013, 8: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:

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 February 17th 2013, 9:17 am

bump

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 February 17th 2013, 10:11 am

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

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

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 February 17th 2013, 10: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. :/

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 February 17th 2013, 12:04 pm

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.

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 February 17th 2013, 1:25 pm

@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

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 February 18th 2013, 12:02 pm


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

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 February 18th 2013, 6:08 pm

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

Shelby™
Forumember

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

http://evasion.forumo.org/

Back to top Go down

View previous topic View next topic Back to top


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