[CSS] Google Material floating button

Go down

[CSS] Google Material floating button Empty [CSS] Google Material floating button

Post by SarkZKalie on February 27th 2019, 9:45 pm

Hello, it's me again

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

[CSS] Google Material floating button Captur20

First of all, put this Google Font before {JQUERY_PATH} in overall_header template
Code:
   <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
   <script src="{JQUERY_PATH}" type="text/javascript"></script>

Step 2: Search and completely remove the content inside these tags you see in viewforum_body and viewtopic_body (optional)
Code:
<!-- BEGIN switch_user_authreply -->
...
<!-- END switch_user_authreply -->

<!-- BEGIN switch_user_authpost -->
...
<!-- END switch_user_authpost -->

Step 3: Put this HTML code anywhere in viewforum_body and viewtopic_body
Code:
<div id="cfr">
   <!-- BEGIN switch_user_authreply -->
   <div class="nd2 nds">
      <a href="{U_POST_REPLY_TOPIC}" class="qb blue" title="{L_POST_REPLY_TOPIC}" rel="nofollow"><i class="material-icons">reply</i></a>
   </div>
   <!-- END switch_user_authreply -->
   <!-- BEGIN switch_user_authpost -->
   <div class="nd1 nds">
      <a href="{U_POST_NEW_TOPIC}" class="qb red" title="{L_POST_NEW_TOPIC}" rel="nofollow"><i class="material-icons">add</i></a>
   </div>
   <!-- END switch_user_authpost -->
   <div id="floating-button" class="qb white">
      <span class="plus">+</span>
      <span class="letter edit"><i class="material-icons">close</i></span>
   </div>
</div>

Step 4: Add this to CSS
Code:
.red{background:#dd4b39!important}
.blue{background:#4285f4!important}
.red, .blue{color:#FFF!important}
.white{background:#FFF!important;color:#3689d1!important}
.qb{display:block;position:fixed;right:15px;bottom:15px;width:50px;height:50px;border-radius:100%;text-align:center;line-height:50px;font-size:25px;z-index:100;cursor:pointer}
.qb i{margin-top:12px}
.plus{animation:plus-out .3s;transition:all .3s}
.edit{opacity:0;transform:rotateZ(-70deg);transition:all .3s;animation:edit-out .3s}
#floating-button{box-shadow: 0px 2px 5px #666}
#cfr{position:fixed;bottom:0;right:0;z-index:95}
#cfr:hover{height:50%;width:100px}
#cfr:hover .plus{animation:plus-in .15s linear;animation-fill-mode:forwards}
#cfr:hover .edit{animation:edit-in .2s;animation-delay:.1s;animation-fill-mode:forwards}
#cfr:hover .nds{animation:bounce-nds .1s linear;animation-fill-mode:forwards}
#cfr:hover .nd2{animation-delay:.08s}
#cfr:hover .nd3{animation-delay:.15s}
#cfr:hover .nd4{animation-delay:.2s}
.nds{display:block;transform:scale(0);position:fixed;right:0;animation-fill-mode:forwards}
.nd1{bottom:60px;animation-delay:.2s;animation:bounce-out-nds .3s linear}
.nd2{bottom:120px;animation-delay:.15s;animation:bounce-out-nds .15s linear}
.nd3{bottom:180px;animation-delay:.1s;animation:bounce-out-nds .1s linear}
.nd4{bottom:240px;animation-delay:.08s;animation:bounce-out-nds .1s linear}
.letter{position:absolute;left:0;right:0;top:0;bottom:0}
@keyframes edit-in {
from{opacity:0;transform:rotateZ(-70deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes edit-out {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(-70deg)}
}
@keyframes plus-in {
from{opacity:1;transform:rotateZ(0deg)}
to{opacity:0;transform:rotateZ(180deg)}
}
@keyframes plus-out {
from{opacity:0;transform:rotateZ(180deg)}
to{opacity:1;transform:rotateZ(0deg)}
}
@keyframes bounce-nds {
from{opacity:0}
to{opacity:1;transform:scale(1)}
}
@keyframes bounce-out-nds {
from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(0)}
}
- Optimize your CSS : choose No

Step 5: Save and Publish

DEMO : Live | Test

Note : In case your site using a blog feature, repeat step 3, then put the HTML code in viewcomment_body template

Source : Material floating button CSS


Last edited by SarkZKalie on March 1st 2019, 8:34 am; edited 2 times in total


[CSS] Google Material floating button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by skouliki on February 28th 2019, 8:36 am

Very nice my friend ! I will test it and let u know
I suppose you can manage the section that the new topic and reply button directs?
skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by SarkZKalie on February 28th 2019, 11:16 am

I look forward to hearing good news from you soon, my dear [CSS] Google Material floating button 1f60d

Don't forget to delete the content insde these tags. Unless new floating buttons won't work properly
Code:
<!-- BEGIN switch_user_authreply -->
<!-- END switch_user_authreply -->
 
<!-- BEGIN switch_user_authpost -->
<!-- END switch_user_authpost -->


[CSS] Google Material floating button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by skouliki on February 28th 2019, 11:33 am

ok i add and remove the elements
i cannot see any reply and new topic button and your plus button appeared but its not clickable
skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by SarkZKalie on February 28th 2019, 2:55 pm

Could you please send me a link so I can see it more clear? And your template in a tag code also

Thank you


[CSS] Google Material floating button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by skouliki on February 28th 2019, 3:22 pm

its not in my main forum
i have a test forum with basic templates and no java here
http://test4test.forumgreek.com/
i will send you the test account

Spoiler:

overrall
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
  <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
  <script src="{JQUERY_PATH}" type="text/javascript"></script>

   
   
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

   <!-- BEGIN switch_fb_login -->
   <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />   
   <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0)
         {
            $('#fa_ticker_content').css('display','block');

            $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            if (slid_vert)
            {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                     height_max = $(this).height();
                  }
               } );

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
               $('ul#fa_ticker_content li').height(height_max);
            }

            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">
   //<![CDATA[
   jQuery().ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { pm.focus(); }
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(window).load(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {switch_ticker.STOP_TIME}
            });
         });
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = false, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
        //<![CDATA[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        ga('send', 'pageview');
        ga('set', 'anonymizeIp', true);

        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        ga('bis.send', 'pageview');
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
        //]]>
   </script>
   <!-- END google_analytics_code -->
</head>

<body>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup" class="module main" style="z-index: 10000 !important;">
      <div id="login_popup_title" class="main-head">
         <div class="h3">{SITENAME}</div>
      </div>
      <div class="main-content">
         {LOGIN_POPUP_MSG}
         <div id="login_popup_buttons">
            <form action="{S_LOGIN_ACTION}" method="get">
               <input type="submit" class="button2" value="{L_LOGIN}" />
               <input type="button" class="button2" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
               <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
            </form>
         </div>
      </div>
   </div>
   <!-- END switch_login_popup -->

   <a id="top" name="top" accesskey="t"></a>

   <div class="minwidth_IE">
      <div class="layout_IE">
         <div class="container_IE">
            <div class="pun">
               <div id="pun-intro" class="clearfix">
                  <a href="{U_INDEX}" id="pun-logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>

                  <!-- BEGIN switch_h1 -->
                  <div id="pun-title">{switch_h1.MAIN_SITENAME}</div>
                  <!-- END switch_h1 -->

                  <!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DESCRIPTION}</p>
                  <!-- END switch_desc -->
               </div>
               <div id="pun-head">
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
               </div>

               <!-- BEGIN switch_ticker_new -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display: none;width: 100%;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker_new -->

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="padding-top:4px;">
                  <div class="module main">
                     <div class="main-content clearfix">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                     <div id="outer-wrapper">
                        <div id="wrapper">
                           <div id="container">
                              <div id="content">
                                 <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                 </div>
                                 <div id="main">
                                    <div id="main-content">

<!-- BEGIN html_validation -->
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>
<!-- END html_validation -->

viewforum
Code:

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
        <!-- BEGIN show_plus_menu -->
      <li>
            <script type="text/javascript">//<![CDATA[
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
      </li>
        <!-- END show_plus_menu -->
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
         <li><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></li>
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

{BOARD_INDEX}

<div id="cfr">
  <!-- BEGIN switch_user_authreply -->
  <div class="nd2 nds">
      <a href="{U_POST_REPLY_TOPIC}" class="qb blue" title="{L_POST_REPLY_TOPIC}" rel="nofollow"><i class="material-icons">reply</i></a>
  </div>
  <!-- END switch_user_authreply -->
  <!-- BEGIN switch_user_authpost -->
  <div class="nd1 nds">
      <a href="{U_POST_NEW_TOPIC}" class="qb red" title="{L_POST_NEW_TOPIC}" rel="nofollow"><i class="material-icons">add</i></a>
  </div>
  <!-- END switch_user_authpost -->
  <div id="floating-button" class="qb white">
      <span class="plus">+</span>
      <span class="letter edit"><i class="material-icons">close</i></span>
  </div>
</div>

<div class="main paged">
   <div class="paged-head clearfix">
      <p class="paging">{PAGINATION}</p>
      
   </div>

   {TOPICS_LIST_BOX}

   <div class="paged-foot clearfix">
      <p class="paging">{PAGINATION}</p>
      
   </div>

</div>
<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>

<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p class="right">{L_MODERATOR} : {MODERATORS}</p>
         {LOGGED_IN_USER_LIST}
      </div>
      <div id="onlinelist">
         <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
   </div>
</div>

<!-- BEGIN switch_legend -->
<ul class="pun-legend">
   <li><img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" />&nbsp;{L_FOLDER_NEW_IMG}</li>
   <li><img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" />&nbsp;{L_FOLDER_HOT_NEW_IMG}</li>
   <li><img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" />&nbsp;{L_FOLDER_LOCKED_NEW_IMG}</li>
</ul>
<ul class="pun-legend">
   <li><img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" />&nbsp;{L_FOLDER_IMG}</li>
   <li><img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" />&nbsp;{L_FOLDER_HOT_IMG}</li>
   <li><img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" />&nbsp;{L_FOLDER_LOCKED_IMG}</li>
</ul>
<ul class="pun-legend">
   <li><img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_ANNOUNCE_IMG}</li>
   <li><img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" />&nbsp;{L_FOLDER_STICKY_IMG}</li>
   <li><img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</li>
</ul>
<!-- END switch_legend -->

viewtopic
Code:

<script type="text/javascript">//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
    $(function(){
        if(typeof(_atc) == "undefined") {
            _atc = {  };
        }
    });

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<!-- BEGIN switch_user_logged_in -->
<div id="pun-visit" class="clearfix">
   <ul>
      <!-- BEGIN switch_plus_menu -->
      <li>
         <script type="text/javascript">//<![CDATA[
            var url_favourite = '{switch_user_logged_in.U_FAVOURITE_JS_PLUS_MENU}';
            var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
            var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
            var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
            var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
            insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
      </li>
      <!-- END switch_plus_menu -->
      <li><a class="addthis_button" href="#">{L_SHARE}</a></li>
      <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
      <!-- BEGIN watchtopic -->
      <li>{S_WATCH_TOPIC}</li>
      <!-- END watchtopic -->
   </ul>
   <p>{LOGGED_AS}. {LAST_VISIT_DATE}</p>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="pun-visit">
   <p>{L_NOT_CONNECTED} {L_LOGIN_REGISTER}</p>
</div>
<!-- END switch_user_logged_out -->

<div class="pun-crumbs noprint clearfix">
   <span class="crumbs">
      <a href="{U_INDEX}"><span>{L_INDEX}</span></a>{NAV_CAT_DESC}&nbsp;»&nbsp;
      <strong><a href="{TOPIC_URL}"><span>{TOPIC_TITLE}</span></a></strong>
    </span>
    <div class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>   
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->
    </div>
</div>

<div class="main paged">
   <div class="paged-head clearfix">
            <h1>{TOPIC_TITLE}</h1>
      <!-- BEGIN topicpagination -->
      <p class="paging">{PAGINATION}</p>
      <!-- END topicpagination -->
      <p class="posting">      

         
      </p>
         
  <div id="cfr">
  <!-- BEGIN switch_user_authreply -->
  <div class="nd2 nds">
      <a href="{U_POST_REPLY_TOPIC}" class="qb blue" title="{L_POST_REPLY_TOPIC}" rel="nofollow"><i class="material-icons">reply</i></a>
  </div>
  <!-- END switch_user_authreply -->
  <!-- BEGIN switch_user_authpost -->
  <div class="nd1 nds">
      <a href="{U_POST_NEW_TOPIC}" class="qb red" title="{L_POST_NEW_TOPIC}" rel="nofollow"><i class="material-icons">add</i></a>
  </div>
  <!-- END switch_user_authpost -->
  <div id="floating-button" class="qb white">
      <span class="plus">+</span>
      <span class="letter edit"><i class="material-icons">close</i></span>
  </div>
</div>     
         
         
         
         
   </div>
   {POLL_DISPLAY}
   <div class="main-head clearfix">
      <p class="h2">
            <!-- BEGIN switch_isconnect -->
         <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
            <!-- END switch_isconnect -->
            <a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;&nbsp;
         {L_MESSAGE} [{PAGE_NUMBER}]
      </p>
   </div>

   <div class="main-content topic">
      <!-- BEGIN postrow -->
         <!-- BEGIN hidden -->
            <p class="p-hidden">{postrow.hidden.MESSAGE}</p>
         <!-- END hidden -->
         
         <!-- BEGIN displayed -->
         
         <div class="post post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -20px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
            <div class="postmain"{postrow.displayed.THANK_BGCOLOR}>
               <div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>
                  <h2>
                     <strong>{postrow.displayed.COUNT_POSTS}</strong>
                     {postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> {postrow.displayed.POST_DATE_NEW}
                  </h2>
               </div>

               <div class="postbody"{postrow.displayed.THANK_BGCOLOR}>
                  <div class="user">
                     <div class="user-ident">
                        <h4 class="username">{postrow.displayed.POSTER_NAME}</h4>
                        <div class="user-basic-info">
                           {postrow.displayed.POSTER_AVATAR}<br />
                           {postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
                        </div>
                     </div>
                     <div class="user-info">
                        {postrow.displayed.ONLINE_IMG}
                        <!-- BEGIN profile_field -->
                        {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}
                     </div>
                  </div>

                  <div class="post-entry">
                     <div class="entry-content">
                        <!-- BEGIN switch_vote_active -->
                        <div class="vote gensmall">
                           <!-- BEGIN switch_vote -->
                           <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                           <!-- END switch_vote -->

                           <!-- BEGIN switch_bar -->
                           <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                              <!-- BEGIN switch_vote_plus -->
                              <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                              <!-- END switch_vote_plus -->

                              <!-- BEGIN switch_vote_minus -->
                              <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                              <!-- END switch_vote_minus -->
                           </div>
                           <!-- END switch_bar -->

                           <!-- BEGIN switch_no_bar -->
                           <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                           <!-- END switch_no_bar -->

                           <!-- BEGIN switch_vote -->
                           <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                           <!-- END switch_vote -->
                        </div>
                        <!-- END switch_vote_active -->
                        <div>
                           <div>{postrow.displayed.MESSAGE}</div>
                           <!-- BEGIN switch_attachments -->
                           <dl class="attachbox">
                              <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                              <dd>
                                 <!-- BEGIN switch_post_attachments -->
                                 <dl class="file">
                                    <dt>
                                       <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                       <!-- BEGIN switch_dl_att -->
                                       <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                       <!-- END switch_dl_att -->

                                       <!-- BEGIN switch_no_dl_att -->
                                       {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                       <!-- END switch_no_dl_att -->
                                    </dt>

                                    <!-- BEGIN switch_no_comment -->
                                    <dd>
                                       <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                                    </dd>
                                    <!-- END switch_no_comment -->

                                    <!-- BEGIN switch_no_dl_att -->
                                    <dd>
                                       <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                                    </dd>
                                    <!-- END switch_no_dl_att -->

                                    <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                                 </dl>
                                 <!-- END switch_post_attachments -->
                              </dd>
                           </dl>
                           <!-- END switch_attachments -->
                           <div class="clear"></div>
                        </div>
                        <p>
                           {postrow.displayed.EDITED_MESSAGE}
                        </p>
                     </div>
                  </div>
               </div>

               <!-- BEGIN switch_signature -->
               <div class="sig-content">
                  {postrow.displayed.SIGNATURE_NEW}
               </div>
               <!-- END switch_signature -->

               <div class="postfoot">
                  <div class="user-contact profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
                  </div>
                  <div class="post-options profile_{postrow.displayed.PROFILE_POSITION}">
                     {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                  </div>
                  <div style="clear:both;"></div>
               </div>
            </div>
         </div>
         <!-- BEGIN first_post_br -->
         </div>
         <hr id="first-post-br" />
         <div class="main-content topic">
         <!-- END first_post_br -->
         <!-- END displayed -->
      <!-- END postrow -->
   </div>

   <div class="main-foot clearfix">
      <p class="h2">
            <!-- BEGIN switch_isconnect -->
         <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
            <!-- END switch_isconnect -->
            <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;&nbsp;
         {L_MESSAGE} [{PAGE_NUMBER}]
      </p>
      <p class="options">
         <input type="hidden" name="t" value="{TOPIC_ID}" />

         <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
         <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

         <!-- BEGIN viewtopic_bottom -->
         {S_TOPIC_ADMIN}
         <!-- END viewtopic_bottom -->
      </p>
   </div>

   <a name="bottomtitle"></a>

   <div class="paged-foot clearfix">
      <!-- BEGIN topicpagination -->
      <p class="paging">{PAGINATION}</p>
      <!-- END topicpagination -->
      <p class="posting">
         
      </p>
   </div>

</div>

<div class="pun-crumbs">
   <p class="crumbs">
      <a href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}&nbsp;»&nbsp;
      <strong><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></strong>
   </p>
</div>

<!-- BEGIN promot_trafic -->
<div class="main" id="ptrafic_close" style="display:none">
   <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></p>
   </div>
</div>
<div class="main" id="ptrafic_open" style="display:''">
   <div class="main-head clearfix">
      <p class="h2">{PROMOT_TRAFIC_TITLE}</p>
      <p class="options"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></p>
   </div>
   <div class="main-content clearfix">
      <!-- BEGIN link -->
      »&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
   </div>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="main" id="forum_rules">
   <div class="main-head clearfix">
      <p class="h2">{L_FORUM_RULES}</p>
   </div>
   <table class="main-content frm">
      <tr>
         <!-- BEGIN switch_forum_rule_image -->
         <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
         </td>
         <!-- END switch_forum_rule_image -->
         <td class="rules entry-content">
            {RULE_MSG}
         </td>
      </tr>
   </table>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<div id="pun-info" class="main">
   <div class="main-content">
      <div id="stats">
         <p>{L_TABS_PERMISSIONS} <br />{S_AUTH_LIST}</p>
      </div>
   </div>
</div>

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.post-entry .entry-content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>



skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by SarkZKalie on February 28th 2019, 3:52 pm

Try to deactivate Optimize your CSS, it should work


[CSS] Google Material floating button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by skouliki on February 28th 2019, 6:26 pm

[CSS] Google Material floating button Scree912  :party: thanks
skouliki
skouliki
Manager
Manager

Female Posts : 9092
Reputation : 1188
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by TheCrow on February 28th 2019, 10:19 pm

Hello @SarkZKalie,

This is a great project.
I do have two questions / suggestions:

  1. Why not have both the reply and new topic buttons and this new effect at the same time? Does any of the codes interfere with this situation or it's simply how you did this? Because me personally, I would like to add this but not if it will remove the old New Topic and Post Reply.
  2. These buttons, (not the plus one, the others) can't they be placed outside the screen width at first? Because upon loading a topic you can see them at first and then they hide immediately. Those seconds that they show up can they be gone somehow?


Note: I haven't had time to check on the codes, just asking my thoughts and suggestions here!

Regards.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6410
Reputation : 746
Language : Greek, English

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

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by SarkZKalie on March 1st 2019, 8:41 am

Hello @TheCrow

  • 1. You can have both of them, it doesn't matter. Personally, I only remove some unnecessary element that can cause slow page loading. For example : image buttons

  • 2. Simply search and remove animation:bounce-out-nds x linear in CSS
    Code:
    .nd1{bottom:60px;animation-delay:.2s;animation:bounce-out-nds .3s linear}
    .nd2{bottom:120px;animation-delay:.15s;animation:bounce-out-nds .15s linear}
    .nd3{bottom:180px;animation-delay:.1s;animation:bounce-out-nds .1s linear}
    .nd4{bottom:240px;animation-delay:.08s;animation:bounce-out-nds .1s linear}


[CSS] Google Material floating button Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1173
Reputation : 192
Language : English

View user profile https://www.rotavn.xyz/

Back to top Go down

[CSS] Google Material floating button Empty Re: [CSS] Google Material floating button

Post by TheCrow on March 1st 2019, 11:35 am

@SarkZKalie,

For number one, this only concerns image buttons that may cause loading issues?
And just so I am 100% sure, these are not images (the new ones) right? They are simply fonts of Google like FontAwesome, right?

Regards!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6410
Reputation : 746
Language : Greek, English

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

Back to top Go down

Back to top


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