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.

Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

View previous topic View next topic Go down

Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 23rd 2014, 7:48 pm

Creation Type: Animated Navigation Bar Buttons
Size (In Pixels): Best fit, not too big in height though.
Primary Colors: Like the original Mario Coin Boxes.
Secondary Colors: None.
Images to include: See Detailed Description below.
Text to Insert: See Detailed Description below.
Font (Provide Download Link): Same as the current toolbar.
Font Color: Either #FFFFFF (preferred) or #5B3818. Please compare what's best to the forum.
Link to My Forumotion Forum: http://fcnl.actieforum.com
Username on Your Forum: Admin
Link to your Last Graphics Request: http://help.forumotion.com/t136894-banner-creation-request
Detailed Description: I'd like to request a set of new navbar icons in Dutch. I've provided the translation for them below. If any other button IS required, please let me know. I'm not using the "messages" buttons because those links are already being provided in the FM toolbar.

Objective:
Create animated Mario Coin Box style navigation bar buttons with the Dutch translation inside. When hovering or selecting a button, a coin should jump out just like in the Mario game and fall behind the back of the button out of view and the text should glow a bit. The coin should be able to jump in front of the banner if possible (if not, I've use padding to move the navigation bar down).

Also, I'd like to request a separate brick block as a spacer in the same px. height as the navigation buttons to fill the gaps.

An example of a Mario Coin Box can be found in Fédra's banner she created for me (the block with the ?-mark):


Translation:
Index or Forum => Index
Gallery => Galerij
Portal => Portaal
FAQ => FAQ
Calendar => Kalender
Search => Zoeken
Memberlist or Members => Leden
Usergroups or Groups => Groepen
Edit Profile or Profile => Profiel
Register or Join Us or Join => Registreren
Log Out or Exit => Uitloggen
Log In => Inloggen

And I'd like an extra button for chat: Chatbox
And on for the ACP, marked with a Red Star in front of "ACP" (because I'm used to that on http://www.game-xtreme.com): ACP
I just feel this is gonna be a tough one again  :wouhou: , so good luck and many thanks in advance! Hello


Last edited by SamanthaS on November 24th 2014, 11:21 pm; edited 3 times in total

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 24th 2014, 12:18 am

im about to head to bed but wanted to make sure this is what ur looking 4 before i go any further

[You must be registered and logged in to see this image.]

[You must be registered and logged in to see this image.]


anyone else fill free to use this image to help make the buttons if this is what sam is looking for

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 24th 2014, 5:19 am

Well, almost. The left and write brick boxes of that top animated picture I could use as spacers, but the middle one which holds the coin should be like the one with the question mark in Fédra's banner, except the question mark should be replaced by text ofc. And if that box has rounded corners, so should the spacers have. I hope you understand what I mean :/ 

I'm sorry. It's those darn time zones, yk. I live in Europe, Amsterdam / Paris time zone...

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 24th 2014, 6:53 am

somthing like this?

 [You must be registered and logged in to see this image.][You must be registered and logged in to see this image.][You must be registered and logged in to see this image.]

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 24th 2014, 8:03 am

No, not scrolling. The middle block holding the text should be longer in length to be able to hold the non-scrolling text. And the blocks must be of the same height. I've been thinking just now. I think it's 3 parts. 1. is the blocks, which probably can reasonably easily created, 2. is JS for the on hover / on click part to trigger 3. a little CSS the jumping coin and a small JS delay for the coin to disappear. Right?

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 24th 2014, 8:52 am

yea i could just create the yellow box and you could use the font already on the forum so you can style it to your choice.... theni could render the coin and you could do the rest with css and script but u will need ange help on the coin

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 24th 2014, 2:29 pm

That's why I requested it here, because I'm not good at it! Wink OK, fair enough, since this involves multiple disciplines, I'll ask Ange to have a look at the scripting part.

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 24th 2014, 7:13 pm

i already pretty much wrote everything up ange will just have to help a lil with the script i already sent it in a pm with all of the info images and everything

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 24th 2014, 7:14 pm

Thanks!!!!!! Hey, I'm stuck here at home and I'm really tired. Do you mind? I'll be back later on kays?

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 24th 2014, 7:19 pm

its a forum its not going anywhere lol ..have goodnight im abt to crash myself i been up all night and day trying to learn some jquery

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 25th 2014, 8:41 am

ok ange is probably been busy so hasnt wrote me back yet but i got it pretty much figured out

[You must be registered and logged in to see this image.][You must be registered and logged in to see this image.][You must be registered and logged in to see this image.][You must be registered and logged in to see this image.]


ok add this to your css stylesheet

Code:

 ï¿½ �.navlinks li a {margin: 0px!important;background-size:100% 100%!important; background-repeat: no-repeat !important; text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;}
.navlinks li a { color:white!important;
padding: 0px !important;
width: 131px !important;
height: 34px !important;
background: url('https://www.filepicker.io/api/file/kjWhiv7iRKWqMIiO7tNK+mrbnormal.png') no-repeat scroll 0px 0px transparent;
display: inline-block;
}
.navlinks li{width: 190px!important;line-height: 34px!important;
display:inline-flex!important;}


ul.linklist li:before {
display: inline-block;
width: 33px;
height:34px;
margin-left: -5px;
content: "";
background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
background-size: 100%;
}
ul.linklist li:after {
display: inline-block;
width: 33px;
height: 34px;
margin-left: -5px;
content: "";
background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
background-size: 100%;
}
#overlay {
position:initial;
margin-left: 40px;
margin-top:-95px;

width: 44px;
height: 61px;
max-height:62px;
z-index: 999999;
background-image: url(https://www.filepicker.io/api/file/m9JiWuuHRgKRsvIRFElg+mrcoin.gif)!important;
}
ul.navlinks{border:none!important;}
.navbar{background: none !important;}


then create a javascript and place it on all pages

use this

Code:
$(".navlinks li a").mouseover(function(){ $(this).append('<div id="overlay"> </div>');});
$(".navlinks li a").mouseout(function(){ $('#overlay').remove();});



results

[You must be registered and logged in to see this image.]

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 25th 2014, 9:39 am

Smile Almost there!



I've marked with red crosses what I don't need. I thought this could be modular and scalable but it's fixed. So, could you please remove them as they're already being offered in the fa-bar?

And the following text should be changed:
Gebruikersgroepen => Groepen
Gebruikerslijst => Leden

I prefer to have the navbar on 1 line, not 2, so maybe some of that spacers (boulders) should go? If you could make this scalable, like I can add buttons myself when needed, that 'd be great! Smile

If you need an account on my website, please let me know!

EDIT: I've used the color picker to determine the color of the ?-block Fédra used in the banner and it's gold: #FCDE33 for the block and goldenrod for the edge of the block: #D3A839. Maybe you could use that in the nav bar boxes (not the brick boulders).

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 25th 2014, 11:12 am

css

Code:

  ul.navlinks li a { top:0px !important;margin: 0px!important;background-size:100% 100%!important; background-repeat: no-repeat !important; text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;}
    ul.navlinks li a { color:white!important;
    padding: 0px !important;
    width: 80px !important;
    height: 20px !important;
    background: url('https://www.filepicker.io/api/file/kjWhiv7iRKWqMIiO7tNK+mrbnormal.png') no-repeat scroll 0px 0px transparent;
    display: inline-block;
     
    }
    ul.navlinks li{width: 95px!important;line-height: 20px!important;
    display:inline-flex!important; display: -webkit-inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  vertical-align: top;}

ul.navlinks .indexbut:before {
  display: inline-block;
    width: 20px;
    height: 21px;
    margin-left: -20px;
    content: "";
    background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
    background-size: 100%;
    }
 
    ul.navlinks li:after {
  display: inline-block;
    width: 20px;
    height: 21px;
    margin-left: -5px;
    content: "";
    background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
    background-size: 100%;
    }
    #overlay {
    position:initial;
    margin-left: 40px;
    margin-top:-95px;

    width: 44px;
    height: 61px;
    max-height:62px;
    z-index: 999999;
    background-image: url(https://www.filepicker.io/api/file/m9JiWuuHRgKRsvIRFElg+mrcoin.gif)!important;
    }
    ul.navlinks{border:none!important;}
    .navbar{background: none !important;margin-left: -15px !important;}


javascript

Code:

$('a[href="/groups"]').text("Groepen");
$('a[href="/memberlist"]').text("Leden");
$('a[href="/"]').parent().addClass('indexbut')
$(".navlinks li a").mouseover(function(){ $(this).append('<div id="overlay"> </div>');});
$(".navlinks li a").mouseout(function(){ $('#overlay').remove();});

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on November 25th 2014, 11:26 am

Neeeeaarly there... Shall I make you an account? You can edit the lot on my board if you wish...

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on November 25th 2014, 11:29 am

i dont know what u mean by the lot but yea send me a pm with info

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on December 2nd 2014, 5:11 pm

Was this completed?

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on December 3rd 2014, 6:50 pm

@Leah7 wrote:Was this completed?

I'm not sure Leah. I think the complexity of it all really got Twisted this time. It's a real challenge! I'm still waiting for his answer on this. Thank you! Smile

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on December 3rd 2014, 7:26 pm

You could try asking in the support section, if it is coding help that you need.  =)  You can just link this thread and see if anyone else can add their own two cents.

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by _Twisted_Mods_ on December 3rd 2014, 7:41 pm

everything was finished i thought. because you removed my admin access... and this can be closed because its the gfx section and the images are complete the rest is scripting and can be solved there if theirs any more issues

_Twisted_Mods_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on December 9th 2014, 8:23 am

@_Twisted_Mods: Your admin access had been removed because of changes I was making for one-and-a-half days (29th Nov. - 1st Dec.). I asked you in the ACP notepad if you still needed admin access, but you didn't answer that one, so I thought I could just temporarily deny admin access for a while so our changes wouldn't be conflicting in time. I haven't been able to work on my board for almost 2 weeks now and when I checked on it just now, the navigation bar pictures seem to have gone. Did something change while I was away? I couldn't find any changes on my board in the log lately ...

EDIT: I just checked and it's got nothing to do with the settings in the ACP, CSS nor JS. It's the original source pictures (hosted PNG files) that have gone missing.... Sad  So, please _Twisted_Mods_ if you still have them on your HD somewhere upload them for me, k?

Guest
Guest


Back to top Go down

Re: Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Post by Guest on December 14th 2014, 5:40 pm

Since the images for this request have been completed and only coding help is now needed, I shall lock this thread and mark it complete. In the future, if coding help is still needed, do not hesitate to make a support thread and link this thread for assistance--I know we have some amazing support moderators and managers that can help you with this issue.

Request complete.
Topic moved to Completed Graphic Requests

Guest
Guest


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