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.

how to make description like this

View previous topic View next topic Go down

how to make description like this

Post by tommycoo on March 5th 2012, 12:40 pm

how can i make an pop-up descripton forum like this forum http://xtreamvpn.creatingforum.com/

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by Guest on March 5th 2012, 12:51 pm

Hi!

I do not see any pop up there? Smile

Guest
Guest


Back to top Go down

Re: how to make description like this

Post by tommycoo on March 5th 2012, 1:21 pm

i mean something like if we close to the forum/sub forum link there is a descripton show on the top of the link

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by 99nour on March 5th 2012, 1:28 pm

Uhm... I beg your pardon? :/

99nour
Forumember

Female Posts : 368
Reputation : 17
Language : English
Location : Egypt

http://duelinguniversity.forumotion.com/

Back to top Go down

Re: how to make description like this

Post by Arrow on March 5th 2012, 5:16 pm

@tommycoo wrote:i mean something like if we close to the forum/sub forum link there is a descripton show on the top of the link

Hi do you mean the mini flash video that plays "Fast" etc?

Arrow
Forumember

Male Posts : 121
Reputation : 4
Language : English

http://www.lastworldrpg.com

Back to top Go down

Re: how to make description like this

Post by tommycoo on March 5th 2012, 10:46 pm

nope i mean something like this pict

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by BryanR on March 6th 2012, 12:21 am

I know others may not get what that is, but it is a simple Span Tag, and their is many things you can do with it in HTML. Furthermore, you can create the effect on that forum by following the following code I provided below, just place it where you would like.

Code:
<span title="This is a span html code, by highlighting over the word span the text you are currently reading is shown, we hope you get to enjoy your new span code, thank you. ~BryanR">Span</span title>

Hope this helps, sorry I don't think the Support Forum@Forumotion allows it's members to use HTML in their posts, try testing it out at your forum, and if it fails to work, please get back to me through this post. Very Happy

BryanR
Forumember

Male Posts : 185
Reputation : 10
Language : English | Spanish | Spanglish | HTML | Graphics
Location : Support Forum@Forumotion.com

Back to top Go down

Re: how to make description like this

Post by tommycoo on March 6th 2012, 8:23 am

sorry but where i must be place this if i want like thats pict ?

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by BryanR on March 6th 2012, 3:13 pm

In the forum name's field, then test it out, if that doesn't work please let me know.

BryanR
Forumember

Male Posts : 185
Reputation : 10
Language : English | Spanish | Spanglish | HTML | Graphics
Location : Support Forum@Forumotion.com

Back to top Go down

Re: how to make description like this

Post by tommycoo on March 6th 2012, 10:41 pm

yess i tested that yesterday but .. can i edit the pop up box ?

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by Guest on March 7th 2012, 8:08 am

Hi!

For first, the code gaved you BryanR is very strange. Try this:
No need </span title> because an attribute doesn't need a closing tag.

And, that's just a simple hover text, not he want. Try this:
Code:
<a href="LINK" class="hover-txt">Text<span>This is the TOOLTIP that will be visible only on mouse over to the Text</span></a>
Then add this to CSS Stylesheet:
Code:
a.hover-txt{
    border-bottom: 1px dashed;
    text-decoration: none !important;
}

a.hover-txt:hover{
    cursor: help;
    position: relative !important;
}

a.hover-txt span{
    display: none;
}

a.hover-txt:hover span{
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block !important;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: relative !important;
    top: 10px;
    text-decoration: none !important;
}

From here I have get the code:
http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag
but there are some mistakes, errors, so I just modified the code a little. Wink

Guest
Guest


Back to top Go down

Re: how to make description like this

Post by tommycoo on March 7th 2012, 9:26 am

woww thats cool mann but heemm can i make inline with the sub forum ? u can see my forum www.indoforum.coolbb.net

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make description like this

Post by Guest on March 7th 2012, 3:04 pm

Replace this part:
Code:
a.hover-txt:hover span {
border: silver 1px solid;
padding: 5px 20px 5px 5px;
display: block !important;
z-index: 100;
background: url(../images/status-info.png) #F0F0F0 no-repeat 100% 5%;
margin: 10px;
max-width: 200px;
position: relative !important;
top: 10px;
text-decoration: none !important;
margin-bottom: 5px;
border-radius: 25px 0px 25px 0px;
}
to this:
Code:
a.hover-txt:hover span{
border: silver 1px solid;
padding: 5px 20px 5px 5px;
display: block !important;
z-index: 100;
background: url(../images/status-info.png) #F0F0F0 no-repeat 100% 5%;
max-width: 200px;
position: relative !important;
bottom: 10px;
left: 10px;
text-decoration: none !important;
margin-bottom: 5px;
border-radius: 25px 0px 25px 0px;
}
So, I replaced top: 10px; to bottom: 10px; and added left: 10px;.
top: 10px; => This code move from top to bottom to 10px;
bottom: 10px; => This code move from bottom to top to 10px;
left: 10px; => This code move from left to right to 10px.

So, you can edit the code how do you want.

Guest
Guest


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