New Posts roll over Nav button code?

Hello,

I currently have roll over buttons for my Nav bar that can be seen on my forum... http://www.clan-arc.com

I used to have New Posts that was done through a different part than the normal buttons. Can I do the new posts icon with a roll over button. The coding example is below for what I am using to get the portal working

Code:

#i_icon_mini_portal{width:93px;height:57px;background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-h10.jpg) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-h11.jpg) no-repeat 0 0;}

What I am wondering is this possible with the New Post button, with this not being under the general pics management option, if it is what do I put after the #icon_mini_ for the new post option in nav?

Thanks

Tatt

Not sure if this helps, but my custom navigation item as follows...

Menu : newpost
Text: New Post

I have tried 

1. newpost
   
2. new_post
   
3. newposts
   
4. new_posts 
   

Hello @Tattastic,

Could you show us some screenshots to show us exactly what you want because i didn't understand what you want.

Thanks,
Luffy

Thanks for replying @Luffy

Hope my images help, my current navigation with the set navigation links all work like below...



Using the code in CSS Stylesheet

Code:

#i_icon_mini_index{width:93px;height:57px;background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-f13.jpg) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-f14.jpg) no-repeat 0 0;}


But I wanted to add a New Post's button that uses the exact same roll over image, unfortunately this is not a preset Nav Link option, so I had to use the 'add customized menu' option and make the link myself like below...



The text shows as blank at the moment because I removed it, so it did not show the link as text on my Navigation bar while I see if this is possible.

But it is not as simple as using the Menu or Text, I have tried these, and the Memberlist uses _members and Usergroups uses _groups in the coding I have working.

So what I am looking to do is get a New Post roll over button between Forum & Members, but I can not figure out what is needed after 

Code:

#i_icon_mini_

If can be done by CSS coding.

Does that explain it any better? I'm not really good at explaining things 

Hello @Tattastic,

So to make it clear you want the same hover effect to your New topic and Reply buttons?

Hey,

Customized menus don't have unique IDs, so the best method would be to use the CSS attribute selector. We can select the main navlinks, but only those that have a specific HREF value. For example ;

Code:

a.mainmenu[href="/search?search_id=newposts"]

Thanks @Ange Tuteur


Do I just replace the #i_icon_mini_ with that code and leave the rest the same. So it would be

Code:

a.mainmenu[href="/search?search_id=newposts"]{width:93px;height:57px;background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-f13.jpg) no-repeat 0 0;}
a.mainmenu[href="/search?search_id=newposts"]{background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-f14.jpg) no-repeat 0 0;}

Am I correct in thinking that?

Yes, that is correct. You'll just want to make sure you add the :hover pseudo class for your hover rule.

Thank for replying again @Ange Tuteur

I have tried the following code

Code:

a.mainmenu[href="/search?search_id=newposts"]{width:93px;height:57px;background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-n12.jpg) no-repeat 0 0;}
a.mainmenu[href="/search?search_id=newposts"]:hover{background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-n13.jpg) no-repeat 0 0;}


And still no luck



1) with no text in Text option (shown below), it shows nothing on the navigation bar







With the Text option filled in it shows the following...






Not sure if this will help, but this is what my Menu Edition box looks like




The results of what happens with the Text are what I mentioned above.


If i add a URL for the image it shows on the navigation bar, but not as the roll over. 


Hope this can help in anyway.

You might need to display the nav link as an inline block, since anchors are only inline. ( setting height / width of an inline element doesn't work well ) Add this to your stylesheet :

Code:

#page-header a.mainmenu { display:inline-block }

@Ange Tuteur

Sorry if this is becoming a pain...I have entered that coding and it knocks the rest of the navigation links out of position/alignment like below



Is there any code to help align this?

Hmm.. try changing your selectors to this instead :

Code:

a.mainmenu[href="/search?search_id=newposts"] img

a.mainmenu[href="/search?search_id=newposts"] img:hover

Sorry @Ange Tuteur


I am not 100% sure what to do with the coding provided, can you give me an example of what it would look like full?


If my image URL is... 
Normal - https://i.servimg.com/u/f19/14/16/71/66/butt-n12.jpg
Hover - https://i.servimg.com/u/f19/14/16/71/66/butt-n13.jpg

Thanks Tatt

like this :

Code:

a.mainmenu[href="/search?search_id=newposts"] img{width:93px;height:57px;background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-n12.jpg) no-repeat 0 0;}
a.mainmenu[href="/search?search_id=newposts"] img:hover{background:url(http://i19.servimg.com/u/f19/14/16/71/66/butt-n13.jpg) no-repeat 0 0;}

We're adding img to the selector, to select the image element inside this nav link.

The color is #C0C0C0, but I don't see anything like that in your stylesheet. I can't see the link directly either, but does it happen on any other browsers as well ?

Ange Tuteur wrote:The color is #C0C0C0, but I don't see anything like that in your stylesheet. I can't see the link directly either, but does it happen on any other browsers as well ?

Sorry about that I had removed it so it did not show while we try to sort it, but I have added it back in now and will leave in... do you mind having a look now to see if can see anything that could be causing it?

I have checked Chrome,Opera and Firefox and it shows the same in all.

Thanks Tatt