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.

Widget Code Problems!

View previous topic View next topic Go down

Solved Widget Code Problems!

Post by Kamui on February 17th 2016, 7:31 pm

Hey,


I'm wondering what kind of code this is, because I'd like to have them. When you scroll over the text, the letters highlight themselves. Her's an image, and the link to the forum I found it on so you can see for yourself.
Example:
Link to forum: http://www.narutonexus.com/


Last edited by Kamui on February 18th 2016, 3:12 am; edited 2 times in total

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by SLGray on February 17th 2016, 8:40 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by Kamui on February 17th 2016, 8:43 pm

ok

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by Sir Chivas™ on February 17th 2016, 11:45 pm

Hi,

You will have to follow this steps to achieve this:
1. You will need to create a new module: [Widget]
here's how: http://help.forumotion.com/t22589-forum-widgets

2. Once the new widget is completed: Insert this whole code in:
Here's the code:
Code:
<div align="center">
   <style type="text/css">#wrapper-200a{width:250px;float:right;} img{opacity:0.8;} img:hover{opacity:1;}</style>
   <div align="center">
            <img src="IMG HERE">
   </div>
    <style type="text/css">
#menu{ width: 200px; }
#menu a{ font-family: verdana; font-size: 11px; text-align: justify; padding: 2px; display: block; width: 70%; color: #000000; background: #transp; border-left: #4E4F4D 5px solid; border-right: #4E4F4D 5px solid; margin: 2px; text-decoration: none; transition-duration: 0.20s; -moz-transition-duration: 0.20s; -webkit-transition-duration: 0.20s; -o-transition-duration: 0.20s; }
html>body #menu a{ /*non IE rule*/ width: 200px; }
#menu a:hover{ color #000000; text-transform: uppercase; border-left: #FF0000 10px solid; border-right: #FF0000 10px solid; }
</style>
   <div id="menu"><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a>
   </div>
   
   <div align="center">
              <img src="YOUR IMAGE HERE">
   </div>
    <style type="text/css">
#menu{
width: 200px;
}

#menu a{
font-family: verdana;
font-size: 11px;
text-align: center;
padding: 2px;
display: block;
width: 85%;
color: #000000;
background: #transp;
border-left: #4E4F4D 5px solid;
border-right: #4E4F4D 5px solid;
margin: 2px;
text-decoration: none;
transition-duration: 0.20s;
-moz-transition-duration: 0.20s;
-webkit-transition-duration: 0.20s;
-o-transition-duration: 0.20s;
}

html>body #menu a{
/*non IE rule*/ width: auto;
}

#menu a:hover{
color #000000;
text-transform: uppercase;
border-left: #FF0000 10px solid;
border-right: #FF0000 10px solid;
}

</style>
   <div id="menu">
            <a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a><a href="URL HERE"><strong>Title Here</strong></a>
   </div>
</div>

Please note that you will have to add your own images, URL's, and titles.

Replace: URL HERE with yours, Title Here with yours, and IMG HERE with your image URL.


Any further questions or concerns, please do not hesitate.
Regards,
Sir Chivas.



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 : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Widget Code Problems!

Post by Kamui on February 18th 2016, 2:20 am

Thanks, I got it up but i'm having trouble seeing the text. How do I change the color? I'm pretty sure I placed some text in one of the fields.



Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by SLGray on February 18th 2016, 2:54 am

Code:
#menu a{ font-family: verdana; font-size: 11px; text-align: justify; padding: 2px; display: block; width: 70%; color: #000000;
Change this part color: #000000.


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by Kamui on February 18th 2016, 3:12 am

Looks fine now, thanks for the help guys.

Kamui
Forumember

Male Posts : 280
Reputation : 3
Language : English
Location : Greed Island

http://narutogaiden.forumotion.com/

Back to top Go down

Solved Re: Widget Code Problems!

Post by SLGray on February 18th 2016, 3:19 am

You're welcome.

Topic solved and archived


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


SLGray
Administrator
Administrator

Male Posts : 36636
Reputation : 2440
Language : English
Location : United States

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