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.

New Posts roll over Nav button code?

View previous topic View next topic Go down

In progress New Posts roll over Nav button code?

Post by Tattastic on April 12th 2015, 9:28 am

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

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 12th 2015, 7:26 pm

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

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Luffy on April 12th 2015, 7:38 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 12th 2015, 8:03 pm

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 Confused

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Luffy on April 12th 2015, 11:46 pm

Hello @Tattastic,

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







Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 13th 2015, 1:44 am

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"]

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 13th 2015, 10:17 am

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?


Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 13th 2015, 12:55 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 13th 2015, 7:27 pm

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.

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 14th 2015, 3:01 am

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
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 14th 2015, 8:54 am

@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?

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 14th 2015, 10:52 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 14th 2015, 4:20 pm

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 -http://i19.servimg.com/u/f19/14/16/71/66/butt-n12.jpg
Hover -http://i19.servimg.com/u/f19/14/16/71/66/butt-n13.jpg

Thanks Tatt

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 15th 2015, 3:08 am

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 15th 2015, 8:59 am

@ Ange Tuteur


We are starting to get there now, this is all aligned as pic below, but now it has the white border around it.






This is not from the inline block because this code is no longer needed for it to show Cool


I have tried these bits of coding to get it removed, but none have been successful.






As you will see i have also added border:none to my a.mainmenu code, I have tried these also as 0 and 0px


Thanks
Tatt

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Ange Tuteur on April 15th 2015, 10:04 am

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: New Posts roll over Nav button code?

Post by Tattastic on April 15th 2015, 6:43 pm

@Ange Tuteur wrote:The color is #C0C0C0, but I don't see anything like that in your stylesheet. blackeye 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

Tattastic
Forumember

Male Posts : 104
Reputation : 1
Language : English
Location : Middlesbrough, UK

http://www.clan-aom.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