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.

How to put this ! and how to remove

View previous topic View next topic Go down

Solved How to put this ! and how to remove

Post by G-Zone on April 8th 2013, 8:19 am

how to put this THIS CLICK!

and someone can help me on this how to remove



This!




and someone help me how be like this



THIS!

then this
THIS!


Last edited by G-Zone on April 10th 2013, 1:52 am; edited 1 time in total

G-Zone
Forumember

Posts : 64
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by E-Mark on April 8th 2013, 1:41 pm

- To remove the toolbar, go to ACP > Toolbar > Configuration > Activate the toolbar: (Set to no)
- To add a gliter effect when hovering a link, add this to your CSS:
Code:
a:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}

Or if you want to show gliter effect on a particular links ONLY, just add this inside the a href tag:
Code:
class="gliter"

then put this in your CSS:
Code:
.gliter:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}

- For the floating image's on the right side, use this: (Put this in Homepage Message)
Code:
<ul class="socialicons">
  <li><a href="#"><img src="IMAGE1" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE2" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE3" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE4" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE5" border="0"/></a></li>
</ul>

Then put this in your CSS:
Code:
ul.socialicons{
    list-style: none;
    margin:0px;
    padding:0px;
    position:fixed;
    left:0px;
    top:250px;
}
ul.socialicons li{
    padding-bottom:4px;
    padding-left:15px;
}
ul.socialicons li img{
    opacity:0.5;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
ul.socialicons li img:hover{
    opacity:1.9;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

- And for the navigation bar that is floating on the left side, use this code: (Put this in Homepage Message)
Code:
<ul class="navbar">
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
</ul>

And for the CSS:
Code:
.navbar {
position: fixed;
top: 200px;
list-style: none;
}
ul.navbar li img:hover{
-moz-transition:1.2s;
-ms-transition:1.2s;
-o-transition:1.2s;
-webkit-transition:1.2s;
padding-left:36px;
transition:1.2s;
}

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Cristianlee on April 8th 2013, 2:08 pm

E-Mark Are you Busy ?

Cristianlee
Forumember

Male Posts : 66
Reputation : 1
Language : English
Location : Villasis,Pangasinan

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Sanket on April 8th 2013, 2:12 pm

@Cristianlee wrote:E-Mark Are you Busy ?
Please do not post in threads, unless you want to help the author with his problem. If you want to speak to someone, please PM them.

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Cristianlee on April 8th 2013, 4:07 pm

@E-Mark wrote:- To remove the toolbar, go to ACP > Toolbar > Configuration > Activate the toolbar: (Set to no)
- To add a gliter effect when hovering a link, add this to your CSS:
Code:
a:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}

Or if you want to show gliter effect on a particular links ONLY, just add this inside the a href tag:
Code:
class="gliter"

then put this in your CSS:
Code:
.gliter:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}

- For the floating image's on the right side, use this: (Put this in Homepage Message)
Code:
<ul class="socialicons">
  <li><a href="#"><img src="IMAGE1" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE2" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE3" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE4" border="0"/></a></li>
  <li><a href="#"><img src="IMAGE5" border="0"/></a></li>
</ul>

Then put this in your CSS:
Code:
ul.socialicons{
    list-style: none;
    margin:0px;
    padding:0px;
    position:fixed;
    left:0px;
    top:250px;
}
ul.socialicons li{
    padding-bottom:4px;
    padding-left:15px;
}
ul.socialicons li img{
    opacity:0.5;
    transition-duration:0.5s;
    -moz-transition-duration:0.5s;
    -webkit-transition-duration:0.5s;
    -o-transition-duration:0.5s;
}
ul.socialicons li img:hover{
    opacity:1.9;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

- And for the navigation bar that is floating on the left side, use this code: (Put this in Homepage Message)
Code:
<ul class="navbar">
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
<li><a href="/"><img src="LINKOFTHEIMAGE" /></a></li>
</ul>

And for the CSS:
Code:
.navbar {
position: fixed;
top: 200px;
list-style: none;
}
ul.navbar li img:hover{
-moz-transition:1.2s;
-ms-transition:1.2s;
-o-transition:1.2s;
-webkit-transition:1.2s;
padding-left:36px;
transition:1.2s;
}
About that Social Icons Bro I think You Got it Wrong
its a click-able image that redirect you to your Topics...


Cristianlee
Forumember

Male Posts : 66
Reputation : 1
Language : English
Location : Villasis,Pangasinan

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Sir Chivas™ on April 8th 2013, 4:10 pm

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

Do you want to add your facebook like they have it as well?



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: How to put this ! and how to remove

Post by JAN2XONLINE on April 8th 2013, 7:50 pm

That looks familiar. Confused

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by New-Soul on April 8th 2013, 7:51 pm

@JAN2XONLINE wrote:That looks familiar. Confused
Of Course Buddy Its yours Razz

New-Soul
New Member

Male Posts : 17
Reputation : 2
Language : English,Tagalog

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by JAN2XONLINE on April 8th 2013, 9:45 pm

I'm not happy about this.

JAN2XONLINE
Forumember

Male Posts : 943
Reputation : 32
Language : Tagalog, English
Location : Alberta, Canada

http://animeph.4umer.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by New-Soul on April 8th 2013, 10:10 pm

@JAN2XONLINE wrote:I'm not happy about this.

Dont Be Sad They Cant get it if you dont help him

but thanks for help to me

i appreciate it

and you said to me in pm i would promise ... to ^_^

New-Soul
New Member

Male Posts : 17
Reputation : 2
Language : English,Tagalog

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by G-Zone on April 9th 2013, 3:05 am

naaah all the code you give emark it didn't work someone ?? ?


okay i will request only this

This Click This!

G-Zone
Forumember

Posts : 64
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by E-Mark on April 9th 2013, 4:41 am

LOL Shocked . Those codes i gave you are all working, all you need to do is to edit the images.

And for the gliter.
Go to (ACP > Display > Pictures and Colors > Colors > CSS > Add this)
Code:
.gliter:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}

Now go to Categories and forums > Edit a forum. Now paste the code in the 'Forum name' field:
Code:
<span class="gliter">N1</span>

Now change the N1 to your forum name (Example: Announcement, etc)

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by SLGray on April 9th 2013, 4:47 am

Please change the title of your topic, 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 : 36659
Reputation : 2444
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by G-Zone on April 9th 2013, 7:50 am

Not working anyone please help me this can you help me about this

how to upload this

Click Me!

G-Zone
Forumember

Posts : 64
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by E-Mark on April 9th 2013, 11:37 pm

Try putting it at the very beginning of the CSS. Working fine to me. Shocked

(Since you are using Phpbb3, give this a try)
Code:
a.forumtitle:hover {
background: url(http://i22.servimg.com/u/f22/15/42/72/40/bling110.gif);
}


Last edited by E-Mark on April 10th 2013, 12:05 am; edited 3 times in total

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Kirbs on April 9th 2013, 11:58 pm

G-Zone ... Every codes that E-Mark gave you are working ... you must be entering them in a wrong way please post how are you entering them ...

Kirbs
Forumember

Posts : 628
Reputation : 18
Language : English

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by G-Zone on April 10th 2013, 1:51 am

E-Mark thanks now it's working fine Very Happy




,, Yeah Chivas This Is Solved


Last edited by G-Zone on April 10th 2013, 2:11 am; edited 1 time in total

G-Zone
Forumember

Posts : 64
Reputation : 1
Language : English

Back to top Go down

Solved Re: How to put this ! and how to remove

Post by Sir Chivas™ on April 10th 2013, 2:09 am

This has been marked as solved, is it solved?



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: How to put this ! and how to remove

Post by SLGray on April 10th 2013, 5:08 am

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 : 36659
Reputation : 2444
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