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

Hi,

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

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.

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.

2 Problems,

Where do I add CSS

I didnt really understand
(Not used to website developing)

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)

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

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.

Is the width and height were the image gets placed?

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://2img.net/i/fa/punbb/status_unread.png');
width: 17px;
height: 17px;
}
#i_icon_mini_indexl:hover {
background-image: url('http://2img.net/i/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.

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

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

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

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.

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

Yes, picture managment. See, it knows ; )

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

Yes. Though were ways even before

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

Crap ok, but I wanted to know if it nows to change the image if you have a new 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.

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

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

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

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

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://i.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..

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

Im sorry

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://i.servimg.com/u/f21/16/21/70/86/forums10.png');
width: 95px;
height: 50px;
}

What is your forum version Demonic?

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