FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Template Editing Forumotion » Templates Editing Tutorials » Google Material floating button

Google Material floating button

5 posters
Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3614
      Points : 129487
    Google Material floating button


    Overview

    Description

    Today I glady share with you how to have a floating button for New topic and Reply topic

    Demonstration

    Google Material floating button Captur20

    Live preview: https://codepen.io/sarkzkalie/pen/eXNbMX

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › Requires to be the Founder of the #Forumotion Forum
    › It works with all Forumotion forums' versions

    Installation

    Introduction

    It can also be adapted to be used on other forum and community softwares.

    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:

    You need to reply to the topic in order to see the code resources



    HTML Content & Templates Modification

    For the last step you need to go towards Administration Control Panel (ACP) Display Templates General - overall_header and modify its content:

    Find this snippet
    Code:
    {JQUERY_PATH}

    Before it, add this:

    Then change template, going towards Administration Control Panel (ACP) Display Templates General - viewforum_body and modify its content:

    Append this code in the template:

    Optional: You can do the same with
    Code:
    viewtopic_body
    template; the same can also be done for blogs by repeating the modifications in the template
    Code:
     viewcomment_body

    Other optional modifications

    To remove the original buttons, find this snippets and remove all their content:
    Code:
    <!-- BEGIN switch_user_authreply -->
    ...
    <!-- END switch_user_authreply -->
     
    [code]<!-- BEGIN switch_user_authpost -->[/code]
    ...
    <!-- END switch_user_authpost -->

    Final considerations

    If any, state them here

    Notes

    Approved byNiko
    Approved on January 29th, 2022
    Tested on Most recent browsers
    Difficulty level  / 
    Source [CSS] Google Material floating button

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.



    Valid
    Cryptic


    • 10th Anniversary (Grand Re-open)
      Thanks for being part of our grand re-opening
      Merry Christmas 2022
      Thanks for having been with us during Christmas season!
      Members true love
      You have received more than 15 likes on your posts. Seems our members really like you!
      Community newbie
      Belongs to the community for at least two years
      Active Contributor
      The user has wrote more than 100 posts and comments
      Passioned user
      You have participated in 50+ different topics, a true fan!
        Posts : 107
        Points : 30108
      Awesome! Thank you!

      Valid
      YoshiGM
      • Forum Administrator

        Community veteran
        You belong to this community since its ancient time
        Active Contributor
        The user has wrote more than 100 posts and comments
        Passioned user
        You have participated in 50+ different topics, a true fan!
        Team contributor
        You have been part of the community team
        Forumotion expert
        This user is an expert with Forumotion free forum hosting
        10th Anniversary (Grand Re-open)
        Thanks for being part of our grand re-opening
        Friendly user
        You have added many community members as friends!
        Beta Tester
        You have been part of the Beta-Testing team
        Merry Christmas 2022
        Thanks for having been with us during Christmas season!
        Forum Writer
        You have opened more than 20 topics on the forum
        Members Guru
        You have received more than 50 likes on your posts. Our members really what you have to say!
        Post lover
        You have liked more than 50 posts!
        Forum Partner
        This member is founder of a community affiliated with FMCodes!
          Posts : 595
          Points : 99312
        Nice tutorial Niko.
        Thanks for sharing it with us




        Google Material floating button Yoshig10

        Hey Guest, Welcome to FMCodes.  Hello
        Don't forget to read the General Rules
        • Want to improve your forum? Take a look of the Coding Community section.
        • Need any new design, promote your forum or any related? You can use our Forum Services

        Helping those who need it is not only part of duty, but of happiness.

        No Support via PM!
        Valid
        Beyonder


        • 10th Anniversary (Grand Re-open)
          Thanks for being part of our grand re-opening
          Passioned user
          You have participated in 50+ different topics, a true fan!
          Active Contributor
          The user has wrote more than 100 posts and comments
          Members true love
          You have received more than 15 likes on your posts. Seems our members really like you!
          Community veteran
          You belong to this community since its ancient time
            Posts : 149
            Points : 74551
          Oh nice!

          Valid
          hoanglongnhatbao


          • Community veteran
            You belong to this community since its ancient time
            Passioned user
            You have participated in 50+ different topics, a true fan!
            Active Contributor
            The user has wrote more than 100 posts and comments
            Post lover
            You have liked more than 50 posts!
            Members Guru
            You have received more than 50 likes on your posts. Our members really what you have to say!
              Posts : 145
              Points : 93767
            Awsome ©

            Topic Actions

            Sponsored




            FMCodes • All-in-one Webmasters community  » Coding Community » Template Editing Forumotion » Templates Editing Tutorials » Google Material floating button

            ©phpBB | Contact | Report an abuse | Cookies