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.

Sliding Hovering forum title

View previous topic View next topic Go down

Solved Sliding Hovering forum title

Post by Quinn on March 27th 2013, 2:25 pm

Hello Smile
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.


Last edited by Quinn on March 28th 2013, 1:38 pm; edited 2 times in total

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 2:36 pm

So that is not a Forumotion Forum?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 3:03 pm

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.

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 3:37 pm

Your Forumotion URL?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 3:38 pm

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

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 3:52 pm

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 4:05 pm

Done.

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 4:11 pm

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;
}

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 4:13 pm

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

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 4:16 pm

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 4:26 pm

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

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 4:32 pm

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 7:01 pm

I did.

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 7:04 pm

You have not added it. Please add it.
Code:
    a.forumlink:hover {
        transition: all 1s ease 0s !important;
    }

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 7:14 pm

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

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 7:21 pm

Add it with the !important

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 7:25 pm

Isn't working either.

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 7:59 pm


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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 8:10 pm

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?

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sanket on March 27th 2013, 8:13 pm

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.

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sir Chivas™ on March 27th 2013, 8:28 pm

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;



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 27th 2013, 9:03 pm

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

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Sir Chivas™ on March 28th 2013, 4:56 am

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%;
}



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Quinn on March 28th 2013, 1:36 pm

Thank you!

Quinn
Forumember

Posts : 34
Reputation : 1
Language : Slovene

Back to top Go down

Solved Re: Sliding Hovering forum title

Post by Jophy on March 28th 2013, 2:58 pm

Topic Solved & Locked

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

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