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

View user profile 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

View user profile 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 : 6786
Reputation : 786
Language : Greek, English

View user profile 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...

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

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

View user profile 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 : 6786
Reputation : 786
Language : Greek, English

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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



c0c0c0 - New Posts roll over Nav button code? Navlin10



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


c0c0c0 - New Posts roll over Nav button code? Nav210



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


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

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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

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

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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. 


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


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

View user profile 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 : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile 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

View user profile 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