News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

FARM - Font Awesome Responsive Menu (Hook Version!)

Started by Hj Ahmad Rasyid Hj Ismail, December 23, 2014, 08:52:44 PM

Previous topic - Next topic

Hj Ahmad Rasyid Hj Ismail

Link to Mod

FARM - Font Awesome Responsive Menu (Hook Version!)

- For SMF 2.0.x only
- Hook, No File Modification

1. Please do your own backup though every installation is backed up automatically.
2. This mod will help you make your default menu more responsive to browser size.
3. Upon its successful installation, you will need to enable it it mod settings page.
4. Then you will see that if your browser is smaller than 600px, the menu will be change to Font Awesome icons.
5. You can test it in lower SMF 2.0 version too as IMO it should work just fine. ;)


Thank you for using/testing it.


Yours friendly,
Abu Fahim Ismail.

BSD License. Feel free to modify accordingly but keep author's link if it is in there somewhere. ;)

Font Awesome by Dave Gandy - http://fontawesome.io. No attribution is actually required.

 

#Change Logs

@Version 1.0.4
- Overriding Responsive Curve Mod menu.
- Changing highlight color to default.

@Version 1.0.3
- Trying to fix the css.

@Version 1.0.2
- Fix font awesome icon turn to white when sub menu is moused over.
- Light version number also upgraded to avoid confusion though the fix already applied to it.

@Version 1.0.1 light
- This is a light version. However, it won't work on all hosting.
- If that is the case, use normal version instead.

@Version 1.0.1
- Add Font Awesome calendar icon.

@Version 1.0.0
- Initial release.

Sagar_king

http://mobiletek.in Smf 2.1
<hr>
Really Thankful to SMF community members for helping
All people are on this forum have their own website that's cool :D

Hj Ahmad Rasyid Hj Ismail


Hj Ahmad Rasyid Hj Ismail

Updated.

#Change Logs

@Version 1.0.1
- Add Font Awesome calendar icon.

Jade Elizabeth

That's really awesome! Is it using font symbols or images? What does the "font" part of the name mean? :D
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Hj Ahmad Rasyid Hj Ismail

It means it is a font and you can use its font code to get whatever icon(s) you want. You can see all of them here: http://fortawesome.github.io/Font-Awesome/icons/

Jade Elizabeth

Omg that is SO AWESOME!!! What a fantastic idea!! :D
Once proud Documentation Writer and Help Squad Leader | Check out my new adult coloring career: Color With Jade/Patreon.

Hj Ahmad Rasyid Hj Ismail


Hj Ahmad Rasyid Hj Ismail

Quote from: Antes on January 14, 2015, 08:25:18 PM
I don't want to disrespect the mod author but I find loading whole FA into SMF just for main_menu overkill.

In response to the following, a light version is introduced.

#Change Logs

@Version 1.0.1 light
- This is a light version. However, it won't work on all hosting.
- If that is the case, use normal version instead.


Hj Ahmad Rasyid Hj Ismail

Updated.

#Change Logs

@Version 1.0.2
- Fix font awesome icon turn to white when sub menu is moused over.
- Light version number also upgraded to avoid confusion though the fix already applied to it.

Jeff B

How would one go about adding more menu items for things like a members map link, contact page, etc? 

Jeff B

Also a note, members of my forum using macs, report that they are getting the Font awesome menu no matter what the page width.

Hj Ahmad Rasyid Hj Ismail

1. Which version do you use (light or full)? Try changing to the full verson if you are currently using the light version.
2. I am not using macs, so I dont really know. But Ipad may use font awesome instead.
3. I think you only need to add the related font awesome icon codes for the additional menu items in FARM.styles.css and you are good to go.

Jeff B

I have the full version installed. I just wonder if Mac uses some sort of special viewport tag? I dunno much about them either, other than the users are the first to complain when a change is made that effects them negatively. ;)

Its not that they cant use them, it seems they are forced to use them even on a high resolution screen.

paq

I can't seem to get this to work at all on a 2.1 install.
I do see some sort of a selection option in the mod settings, but there is no contents in the select-menu. Regardless what option I choose here, nothing changes on a mobile phone or narrow screens on a desktop  (both Apple)

Hj Ahmad Rasyid Hj Ismail

Sorry. Before Beta 1 was released it was working with 2.1 but not therefrom. I will see to 2.1 version later (not sooner).

As for the css problems in mac users, as well as other device, if any, please use version 1.0.3. I hope that will fix it.

@Version 1.0.3
- Trying to fix the css.

Please also reports if the html and css is not valid for any reason whatsoever.

Thank you.

roshaoar

Hello,

I tried this on 2.1.10 with the responsive curve mod and it didn't work, in fact the icons were all over the place. I removed it but some of the icons now seem to be missing. Is there a file I can edit to make them ok again?

Thank you,

-Johan


Hj Ahmad Rasyid Hj Ismail

It doesn't work with SMF 2.1 for now. There is no file edit for this mod, so just uninstall it and you will be fine.

Hj Ahmad Rasyid Hj Ismail

I was re-reading this back and realized that you actually mean SMF 2.0.10 with responsive curve mod. So I tested it with this mod and this mod removal is just fine.

So now I think you have some custom menus which their icons need to be added to responsive curve modifications which I am not sure where and how for now. You need to consult SMF Customization Team in that mod support topic.

roshaoar

Thanks ahrasis - Yes you're quite right. I'm new at SMF and it has taken me a little while to identify what does what. In this case it was a mod 'most recent topics' on the front index - I'm guessing that it doesn't have icon alternatives when used with responsive curve so it looks like it misses icons. Many thanks for taking the time ro reply though.

-Johan

Advertisement: