New Posts roll over Nav button code?
3 posters
Page 1 of 1
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
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
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
Re: New Posts roll over Nav button code?
Not sure if this helps, but my custom navigation item as follows...
Menu : newpost
Text: New Post
I have tried
Menu : newpost
Text: New Post
I have tried
- newpost
- new_post
- newposts
- new_posts
Re: New Posts roll over Nav button code?
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
Could you show us some screenshots to show us exactly what you want because i didn't understand what you want.
Thanks,
Luffy
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: New Posts roll over Nav button code?
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
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
If can be done by CSS coding.
Does that explain it any better? I'm not really good at explaining things
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
Re: New Posts roll over Nav button code?
Hello @Tattastic,
So to make it clear you want the same hover effect to your New topic and Reply buttons?
So to make it clear you want the same hover effect to your New topic and Reply buttons?
Forum of the Forums Forumotion Rules | Tips & Tricks | FAQ | Did you forget your password? |
*** The Support Forum will never ask you for your email or password, so please do not post them anywhere! ***
No support via PM!
Re: New Posts roll over Nav button code?
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 ;
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"]
Re: New Posts roll over Nav button code?
Thanks @Ange Tuteur
Do I just replace the #i_icon_mini_ with that code and leave the rest the same. So it would be
Am I correct in thinking that?
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?
Re: New Posts roll over Nav button code?
Yes, that is correct. You'll just want to make sure you add the :hover pseudo class for your hover rule.
Re: New Posts roll over Nav button code?
Thank for replying again @Ange Tuteur
I have tried the following code
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.
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.
Re: New Posts roll over Nav button code?
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 }
Re: New Posts roll over Nav button code?
@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?
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?
Re: New Posts roll over Nav button code?
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
Re: New Posts roll over Nav button code?
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
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
Re: New Posts roll over Nav button code?
like this :
We're adding img to the selector, to select the image element inside this nav link.
- 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.
Re: New Posts roll over Nav button code?
@ 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
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
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
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
Re: New Posts roll over Nav button code?
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 ?
Re: New Posts roll over Nav button code?
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?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 ?
I have checked Chrome,Opera and Firefox and it shows the same in all.
Thanks Tatt
Similar topics
» Creating code for the dice roll?
» help in this code . the effect on code > add button to Put under the colored writing
» HTML code won't show in posts
» Html code in normal posts
» Code for a widget containing all posts made over last 24 hours
» help in this code . the effect on code > add button to Put under the colored writing
» HTML code won't show in posts
» Html code in normal posts
» Code for a widget containing all posts made over last 24 hours
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum