The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

New Posts roll over Nav button code?

3 posters

Go down

In progress New Posts roll over Nav button code?

Post by Tattastic 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
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 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
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 TheCrow 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
TheCrow
TheCrow
Manager
Manager

Male Posts : 6882
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Tattastic 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...

New Posts roll over Nav button code? Nav110

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...

New Posts roll over Nav button code? Navlin10

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

TheCrow
TheCrow
Manager
Manager

Male Posts : 6882
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

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

Post by Ange Tuteur 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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
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 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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



New Posts roll over Nav button code? Navlin10



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


New Posts roll over Nav button code? Nav210



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


New Posts roll over Nav button code? Menu10

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
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 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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

New Posts roll over Nav button code? Nav13

Is there any code to help align this?
Tattastic
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 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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 - 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
Tattastic
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 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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. 


New Posts roll over Nav button code? Nav14



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.


New Posts roll over Nav button code? Code10



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
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 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
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

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

Post by Tattastic 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
Tattastic
Forumember

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

http://www.clan-aom.com

Back to top Go down

Back to top

- Similar topics

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