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 forum's logo bring out a picture

View previous topic View next topic Go down

Solved Mouse over forum's logo bring out a picture

Post by Shelby™ on Mon 19 Aug 2013 - 17:43

Hello,

Is there any way to make an interactive logo? I mean, if someone mouse over the logo, another picture appear under or next to the logo? Here's an quick example.



Thanks in advance!
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 forum's logo bring out a picture

Post by Ange Tuteur on Mon 19 Aug 2013 - 17:56

Hello Shelby™,

From what you said I put together a little example for the sitetitle.

Code:
#site-title:hover :after{
content:url(http://illiweb.com/fa/prosilver/forum_read.gif);
}
On hover a topic icon will appear after the site title name. Its a rough example to give you an Idea of what you can do.

Edit: I setup an example on my forum here, hover over the title to see the effect.
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mouse over forum's logo bring out a picture

Post by Shelby™ on Tue 20 Aug 2013 - 2:38

SethC1995 wrote:Hello Shelby™,

From what you said I put together a little example for the sitetitle.

Code:
#site-title:hover :after{
content:url(http://illiweb.com/fa/prosilver/forum_read.gif);
}
On hover a topic icon will appear after the site title name. Its a rough example to give you an Idea of what you can do.

Edit: I setup an example on my forum here, hover over the title to see the effect.
Yes, it look like what I wanted, but I guess I forget to tell that I got phpbb3 forum. Razz And correct me if I am wrong, but I need to put this to CSS? I did that, but didn't worked.
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 forum's logo bring out a picture

Post by Ange Tuteur on Tue 20 Aug 2013 - 5:08

Try this code, its the one I have on my new forum:
Code:
#site-title:hover:after{
background: rgba(0, 0, 0, 0.2);
border-radius:10px;
padding:3px;
content: "Runeshan";
position:absolute;
left:420px;
top:32px;
}
Change Runeshan to whatever you want after your title. If the title is moved the positioning will need to be tweaked.

Edit: Modified the code some for positioning issues
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mouse over forum's logo bring out a picture

Post by Shelby™ on Tue 20 Aug 2013 - 5:52

SethC1995 wrote:Try this code, its the one I have on my new forum:
Code:
#site-title:hover:after{
background: rgba(0, 0, 0, 0.2);
border-radius:10px;
padding:3px;
content: "Runeshan";
position:absolute;
left:420px;
top:32px;
}
Change Runeshan to whatever you want after your title. If the title is moved the positioning will need to be tweaked.

Edit: Modified the code some for positioning issues
Erm, I don't use that forum just forget to change the url. Here's my current: http://banbringer.forumotion.com/
Is there any way to add picture instead simple text?

EDIT: Nevermind, I changed the content to a picture, but still won't work. :/ Is that code is for phpbb3?
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 forum's logo bring out a picture

Post by Ange Tuteur on Tue 20 Aug 2013 - 6:01

Sorry should've asked for a link to your forum first, but yes its for phpbb3.

However that's for the sitetitle text, not the logo. For the logo you will use this:
Code:
#logo:hover:after{
background: rgba(0, 0, 0, 0.2);
border-radius:10px;
padding:3px;
content: url(http://kepfeltoltes.hu/130819/banbringer_logo_copy_www.kepfeltoltes.hu_.png);
position:absolute;
margin-left:10px;
top:22px;
}
Hover over your logo and it will display your logo to the right again, change the image to what you want.
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mouse over forum's logo bring out a picture

Post by Shelby™ on Tue 20 Aug 2013 - 6:11

SethC1995 wrote:Sorry should've asked for a link to your forum first, but yes its for phpbb3.

However that's for the sitetitle text, not the logo. For the logo you will use this:
Code:
#logo:hover:after{
background: rgba(0, 0, 0, 0.2);
border-radius:10px;
padding:3px;
content: url(http://kepfeltoltes.hu/130819/banbringer_logo_copy_www.kepfeltoltes.hu_.png);
position:absolute;
margin-left:10px;
top:22px;
}
Hover over your logo and it will display your logo to the right again, change the image to what you want.
Finally it works!Razz But I have another problem. When the picture appear it has black shade around it, it can be removed somehow?
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 forum's logo bring out a picture

Post by Ange Tuteur on Tue 20 Aug 2013 - 6:15

Oops yes, my mistake I left the background from the text attachment.

This should be correct:
Code:
#logo:hover:after{
content: url(http://kepfeltoltes.hu/130819/banbringer_logo_copy_www.kepfeltoltes.hu_.png);
position:absolute;
margin-left:10px;
top:22px;
}
Just remove background, border-radius, and padding if you don't feel like repasting. Wink
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mouse over forum's logo bring out a picture

Post by Shelby™ on Tue 20 Aug 2013 - 6:17

SethC1995 wrote:Oops yes, my mistake I left the background from the text attachment.

This should be correct:
Code:
#logo:hover:after{
content: url(http://kepfeltoltes.hu/130819/banbringer_logo_copy_www.kepfeltoltes.hu_.png);
position:absolute;
margin-left:10px;
top:22px;
}
Just remove background, border-radius, and padding if you don't feel like repasting. Wink
Oh thank you very much! ^^ Problem solved!
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 forum's logo bring out a picture

Post by Ange Tuteur on Tue 20 Aug 2013 - 6:25

You're welcome, I'm glad I was able to help. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Mouse over forum's logo bring out a picture

Post by SLGray on Tue 20 Aug 2013 - 14:26

Topic Solved & Locked


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40209
Reputation : 2716
Language : English
Location : United States

https://fmthemes.forumotion.com/

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