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 August 19th 2013, 11:43 pm

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!

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 August 19th 2013, 11:56 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Shelby™ on August 20th 2013, 8:38 am

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.

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 August 20th 2013, 11:08 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Shelby™ on August 20th 2013, 11:52 am

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?

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 August 20th 2013, 12:01 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Shelby™ on August 20th 2013, 12:11 pm

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?

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 August 20th 2013, 12:15 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by Shelby™ on August 20th 2013, 12:17 pm

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!

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 August 20th 2013, 12:25 pm

You're welcome, I'm glad I was able to help. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

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

Post by SLGray on August 20th 2013, 8:26 pm

Topic Solved & Locked


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


SLGray
Administrator
Administrator

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

http://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