Portofolio

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

Patch 0.0.3 alpha


    How we made the second menu

    xowjs
    xowjs
    housemaster

    Messages : 24
    Earned Points : 8
    Reputation : 1

    Character Sheet
    Character Name:
    Level Level: 1
    Strength Strength: 1
    Agility Agility: 1
    Magic Magic: 1
    Gold Gold: 0
    Moo
    Given free to the early ones. Thank you!
    Tech
    Building up the community for the community

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

    Post by xowjs 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,
    ravenjs

      Current date/time is Sun May 19, 2024 10:12 am