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.

Navigation Bar Effect?

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 6:39 pm

Is there a way I can add an effect on the navigation bar when a mouse is hovering over one of the tabs?

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 6:44 pm

Hi,

What kind of efect? Are you searching for something like this?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 6:46 pm

Yes, Like that, but im only going to make the text within the image change color. But that seemed hard to do, it says I have to remove the navigation bar then re add it in css? I didnt know I can do that.

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 6:55 pm

If I understand you correctly than you have to have two images for exp. Home, one with exp. black text, one with red. Black goes to static rule red to hover rule. You need to remove from them get the hover cause they will overllap your CSS images. All you have to do is make two rules, with your width and height for images set in them. One rule for static image one for hover and add the links in it and add it all to CSS.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 6:58 pm

2 Problems,

Where do I add CSS Razz

I didnt really understand Sad
(Not used to website developing)

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:00 pm

In your CSS stylsheet. It is OK to ask (:
Admin panel >> Display >> Colors >> CSS stysheet. Don't forget to set the height and width also. (replace XY with your settings)

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:06 pm

Ohh ok, so as far as I know this is what I add in the big blank CSS thing lol.

Code:
#i_icon_mini_index {
background-image: url('My Image Url');
width: XYpx;
height: XYpx;
}
#i_icon_mini_indexl:hover {
background-image: url('My Image Url');
width: XYpx;
height: XYpx;
}
and then..
Code:
#i_icon_mini_portal {
background-image: url('My Image Url');
width: XYpx;
height: XYpx;
}
#i_icon_mini_portal:hover {
background-image: url('My Image Url');
width: XYpx;
height: XYpx;
}
and so on for all the ones I want?

Ok, but what if I want to add a custom one? And what do you mean with the X and Y

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:12 pm

Yes for all.

By replacing XY I meant replacing this what I made bold and italic here

#i_icon_mini_portal {
background-image: url('My Image Url'); - This is where your static image goes.
width: XYpx;
height: XYpx;
}
#i_icon_mini_portal:hover {
background-image: url('My Image Url'); - This is where your hover image goes.
width: XYpx;
height: XYpx;
}

If you don't define the widht and height for it the image wont display.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:16 pm

Is the width and height were the image gets placed?

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:23 pm

No Demonic. You place the image in this property background-image: url('My Image Url'); - This is where your static image goes. and same for hover. But all images have their sizes and you must add them in CSS.

Example:
If you were to put this 2 buttons for your navigation for index
This is a static image , this one to appeare when you hover over index navigation

You would do it like this

Code:
#i_icon_mini_index {
background-image: url('http://illiweb.com/fa/punbb/status_unread.png');
width: 17px;
height: 17px;
}
#i_icon_mini_indexl:hover {
background-image: url('http://illiweb.com/fa/punbb/status.png');
width: 17px;
height: 17px;
}

See how I inserted width and height (but ofcourse you will put yours width and heigth) and diferent pictures, blue for static and white for hover.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:25 pm

Alright, but I still don't see how it knows thats a navigation button

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:26 pm

It knows Wink
Give it a try and than will continue, OK?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:33 pm

ok I added this:
Code:
#i_icon_mini_index {
background-image: url('http://i21.servimg.com/u/f21/16/21/70/86/forums10.png');
width: 95px;
height: 50px;
}
#i_icon_mini_indexl:hover {
background-image: url('http://i21.servimg.com/u/f21/16/21/70/86/forums11.png');
width: 95px;
height: 50px;
}
but when I hit submit, and go back to the site, nothing changes Sad

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:36 pm

You've got an extra letter in hover.

Add this and refresh your page
Code:
#i_icon_mini_index {
background-image: url('http://i21.servimg.com/u/f21/16/21/70/86/forums10.png');
width: 95px;
height: 50px;
}
#i_icon_mini_index:hover {
background-image: url('http://i21.servimg.com/u/f21/16/21/70/86/forums11.png');
width: 95px;
height: 50px;
}

See the resault


+ When you hover it it changes to lighter color.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:39 pm

ohhh, i see, now how do i remove the previous image? From pics management or headers and navigation tab

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:42 pm

Yes, picture managment. See, it knows ; )

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:44 pm

oh, so that means this way I can remove stupid tabs like, usergroups?

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:46 pm

Yes. Though were ways even before Smile

Edit: I have to go ofline now Demonic. Wish you luck with finishing it.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 7:52 pm

Crap Sad ok, but I wanted to know if it nows to change the image if you have a new pm

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 7:55 pm

It knows, you have all the necessary codes there in the topic, 1 code + hover for
when you have no messages, also there is the code for new messages, they are all listed there. Finish it and come
back to tell if you made it.

Have to go really now.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 8:01 pm

K, Now i have to find out how to get it to send you to a custom made tab :/

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 8:03 pm

How do you mean lol? Navigations will work like those that you had in your Admin panel.

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 8:08 pm

like were you edit the word to make it goto a different page. well what would be the word for a custom one?

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 23rd 2011, 8:14 pm

I still dont understand the question. You want to have an extra navigation that takes you to some other place?
AP >> Display >> Headres and navigation >> http://i.imm.io/6KKB.png

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 8:16 pm

no lol, see in the "Headers & Navigation" tab, theres a button that say "Add" to make a new button for the navigation bar.
And the code directs you to the page through this word:
#i_icon_mini_index {
background-image: url('https://i21.servimg.com/u/f21/16/21/70/86/forums10.png');
width: 95px;
height: 50px;
}

So im asking, how do I get that word for a custom navigation button? thats not default like index, portal, search, ect..

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 23rd 2011, 11:38 pm

still need to know ^^^ read post above this (bump)

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Sanket on June 24th 2011, 3:39 am

May I remind you that double/triple posting isn't tolerated unless separated by 24 hours (Use the edit button) Wink

Sanket
ForumGuru

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

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 24th 2011, 2:15 pm

Im sorry Sad

but i still need this figured out..

in the "Headers & Navigation" tab, theres a button that say "Add" to make a new button for the navigation bar.
And the code directs you to the page through this word:
#i_icon_mini_index {
background-image: url('https://i21.servimg.com/u/f21/16/21/70/86/forums10.png');
width: 95px;
height: 50px;
}

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Nera. on June 24th 2011, 2:18 pm

What is your forum version Demonic?

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: Navigation Bar Effect?

Post by Demonic on June 24th 2011, 2:31 pm

Idk about the forums version, but my theme version is phpBB2

Demonic
New Member

Posts : 18
Reputation : 0
Language : United States

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum