Sliding Hovering forum title

[Quinn]

Hello
So um http://foreveryoungss.forumcommunity.net/ ...
This is also my forum. But as you can see it is hosted by another website. Obviously when you hover the title a star goes across it and the title's color changes. Also the description is in a little rounded box.. I was wondering if I can do that with a forumotion forum too? My forumotion one is a bit easier to play around with, also it's in my language, which the other host can't give me so it's really frustrating. Is it possible that I can do the same thing with Javascript/CSS? Thank you in advance.

[Sanket]

So that is not a Forumotion Forum?

[Quinn]

No, but if you check it out you'll see an effect I just described.. It's sadly in HTML. I was wondering how to do that in CSS so I can use it on my forumotion forum? I'm more active on my forumotion one and this one is probably going to be deleted next week.

[Sanket]

Your Forumotion URL?

[Quinn]

http://demetriaslovato.forumsl.net/ (currently finishing it)

[Sanket]

Can you change O NAS on your forum to a very long title please?

[Quinn]

Done.

[Sanket]

You can add this to your css.

Code:


a.forumlink:hover {
    background-image: url("http://skin.forumfree.net/2084/wmlgs.png");
    background-repeat: no-repeat;
    background-position: right center;
    color: #ff0000;
    padding-left: 0;
    padding-right: 25px;
    transition: all 1s ease 0s;
}


[Quinn]

Thank you But is it possible for it to like go across it (it moves) as you can see on my other forum?

[Sanket]

I don't understand, its should go across the whole forum link.

[Quinn]

It doesn't. It just shows up at the end when I hover the title?

[Sanket]

transition: all 1s ease 0s;
You did not add this part of the code.

[Quinn]

I did.

[Sanket]

You have not added it. Please add it.

Code:

    a.forumlink:hover {
        transition: all 1s ease 0s !important;
    }


[Quinn]

No, I did. I checked it like 10 times. I swear!
http://shrani.si/f/2X/Rf/yCSuOgr/ajs.png

[Sanket]

Add it with the !important

[Quinn]

Isn't working either.

[Sanket]

-moz-transition:all 1s linear;
Add that instead & check.

[Quinn]

No.. is it possible that you can change it to go across it when you like hover the table/forum? Maybe it'll be easier?

[Sanket]

We first need to get the right transition property, then we can modify it if possible for the whole span. But, right now the transition property itself isn't working.

[Sir Chivas™]

Try adding this, see if it works. (CSS): ACP >> Display >> Colors >> CSS

Code:

a.forumlink:hover {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
color: rgb(250, 109, 14);
background-image: url(http://shrani.si/f/3z/Yt/4pWNnzj8/starr2.png);
background-position: right center;
background-repeat: no-repeat;
padding-left: 0;
padding-right: 25px;
text-decoration: none !important;
}

@Sanket, you were missing this part of the code:

Code:

-webkit-transition: all 1s;
-o-transition: all 1s;

[Quinn]

THANK YOU SO MUCH! Both of you! It's working now How about the description in the box?

[Sir Chivas™]

Try inserting this HTML as the description:

Code:

<h4 class="desc">Description goes here!</h4>

Add this inside your CSS:

Code:

.desc {
font: 7.5pt arial;
color: #6D6D6D;
background-color: #F7F7F7;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 26px;
border-bottom-right-radius: 43px;
padding: 3px;
box-shadow: 0 0 2px #E5E4E4;
-moz-box-shadow: 0 0 2px #E5E4E4;
-webkit-box-shadow: 0 0 2px #E5E4E4;
border: 1px solid #E2E2E2;
line-height: 95%;
}

[Quinn]

Thank you!

[Jophy]

Topic Solved & Locked