Would you like to react to this message? Create an account in a few clicks or log in to continue.

Display results as :

Rechercher Advanced Search

Log in

I forgot my password

Latest topics
» Patch Notes
by atoyr Sun Oct 04, 2020 8:46 am

» Texture Ranks
by atoyr Wed Sep 23, 2020 7:00 pm

» General Rules and Guidelines
by atoyr Tue Sep 22, 2020 8:22 pm

» Simple CSS3 Login Form
by atoyr Tue Sep 22, 2020 2:25 pm

» How we made the second menu
by atoyr Tue Aug 25, 2020 2:48 am

How we made the second menu

Go down

How we made the second menu Empty How we made the second menu

Post by atoyr on Tue Aug 25, 2020 2:48 am

Lately I started learning js and I really like it. When I started fmSoftware ( link ) in 2013 I knew almost what I know now about js, but now I can understand what's doing, that's why I am back in a way, to making a forum, or in special, forumotion. But I want to show you, how we did our menu.  I will hide the codes that we made to be only for members who reply to this topic. We'd like to give the menu, for something back as well. Most of this Topic will be hidden so visitor, come join us Smile

First thing firstYou might want to read what's here
Most of this is other's people js, like the Notifications and Private Messages. The first one import from forumotion's toolbar so if you want to have notifications as well, just activate the Toolbar from Modules > Toolbar > Configuration > Activate toolbar > Yes.
Now there is one more thing, that when you activate the toolbar, it will activate a lot of javascript codes on your forum and it might slow it down. If you don't want, you don't have to activate notifications. We will show you how to remove it as well.

What you should change?The search part and documentation about what you have to do
The good thing about the overall code, is that's practical, with a simple drop drown, and some elements that are then sent to javascript and they do something. Except the private messages and notifications, everything was done by me, but I am still a rookie to js. Now we have to go the overall header, since that's where we tested it. It might be a big chance that it might work on index_box, Generalities, Announcements but we never tried. You can do that for yourself, but the final destination of the code is the overall_header.
I'd like to specially note that, the other menu is not included, only the box, with the avatar and the right side.

Reply for in-depth guide on what we did.

How to change how it looksWe are working with some CSS to make it look how we like and put it on work
Now on this section, we will talk about the CSS behind it. We'd love if you have installed the FontAwesome from our previous Code Doc(!) but being honest isn't that much to talk about it. We changed it a bit to look cleaner for the OUR forum.
The entire CSS is done around our forum's width, paddings, margins. It might not work for your forum, but you have the source to edit it yourself.

Now let's move it around with some eventsjavascript will help us now put it on move with some codes.
There are three main javascripts except the one that we already talked about. Those are just to make Private Messages, add the avatar for each person and different Toggles. You just have to install them, there is no need for extra guidance through this step.

Extra informations and small talkThere are some things that we'd like to point out.
We didn't talk about codes in general, as a more guide like because we will give the in-depth guide to our Star Members on how we actually did, and more documentation in general on how it works.
We love the menubar a lot, since we are shaping the website and we'd love to change the course by bit but more than that, we love to share how we did them with our members and guests, no matter who is.
Hope you will enjoy the bar, and if you have questions, feel free to open a topic in one of our Troubleshooting Section!

Until next time,
Messages : 18
Points : 30
Reputation : 1

View user profile https://atoyr.forumotion.com

Back to top Go down

Back to top

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