I need to make the reply and new topic button popup(no page load). I already have the quote reply for it. Now I need it for reply and new topic button.

Forum Url: http://www.bdtipsntricks.com/
Version: PunBB

1. Go to ACP > General > Messages and e-mails > Configuration > Allow Quick Reply (Set to Yes)

2. Now find this on your viewtopic_body:

Code:

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


- Replace it with this one:

Code:

<div style="display: none;"><!-- BEGIN switch_user_logged_in -->
            <a name="quickreply"></a>
            {QUICK_REPLY_FORM}<br />
      <!-- END switch_user_logged_in --></div>

<script src="http://static.tumblr.com/hhedat8/OUkmkh864/script.js"></script>
<script src="http://static.tumblr.com/hhedat8/cfemkh9df/script.js"></script>
<div id="modal"><div id="content1">
<h3 style="background:#2c5687 url(http://community.invisionpower.com/filestore/public/style_images/master/maintitle.png) repeat-x top; font-size: 16px; padding: 8px 10px 9px; color: white; fon-family: Arial;">Quick Reply</h3>
<div style="width: 100%; height: 100%; position: absolute; top: 15%;">{QUICK_REPLY_FORM}</div>
</div>
</div>

3. Find this 2 inside the viewtopic_body:

Code:

<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

- Replace them with this:

Code:

<a href="#" title="Sign In" id="button"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

4. Now add this to your CSS:

Code:

#modal {
   visibility:hidden;
   width: 550px !important;
   height: 360px !important;
   padding:8px;
   background:rgba(0,0,0,.3);
   -webkit-border-radius:8px;
   -moz-border-radius:8px;
   border-radius:8px;
   position:fixed !important;
   top:30% !important;
   left: 42% !important;
   margin-top:-94px !important;
   margin-left:-180px !important;
   z-index:101;
}

#heading1 {
   width:360px;
   height:44px;
   background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
   background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
   background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
   background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
   background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
   filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e9e9e9');
   border-bottom:1px solid #bababa;
   -webkit-box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
   -moz-box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
   box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
   -webkit-border-radius:4px 4px 0px 0px;
   -moz-border-radius:4px 4px 0px 0px;
   border-radius:4px 4px 0px 0px;
   font-size:14px;
   font-weight:bold;
   text-align:center;
   line-height:44px;
   color:#444444;
   text-shadow:0px 1px 0px #fff;
}

#content1 {
   height: 320px !important;
   width: 550px !important;
   background:#fcfcfc;
   -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
   -moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
   box-shadow:0px 1px 3px rgba(0,0,0,.25);
   -webkit-border-radius:0px 0px 4px 4px;
   -moz-border-radius:0px 0px 4px 4px;
   border-radius:0px 0px 4px 4px;
}

#content1 p {
   font-size:13px;
   font-weight:normal;
   text-align:center;
   line-height:22px;
   color:#555555;

   width:100%;
   float: left;

   margin:19px 0;
}
.reveal-modal-bg {
   position: fixed;
   height: 100%;
   width: 100%;
   background: #000;
   background: rgba(0,0,0,.4);
   z-index: 100;
   display: none;
   top: 0;
   left: 0;
}


@media only screen and (max-width: 767px) {
   #modal {
      width:284px;
      height:156px;
      padding:8px;

      margin-left:-150px !important;
      margin-top:-78px;
   }
   #heading1 {
      width:284px;
      height:28px;

      line-height:28px;
      font-size:0.688em;
   }
   #content1 {
      width:284px;
      height:128px;
     }
     #content1 p {
        width:284px;
        font-size:0.688em;
     }
}

Problem no 1: New Topic button showing in little bit higher





Problem no 2: Add reply button working button not showing all functions



EDIT: Sorry, Reply button showing in bellow than usual position.

Use this as the CSS instead:

Code:

span#text_edit {
display: initial !important;
}
#modal {
  visibility:hidden;
  width: 550px !important;
  height: 360px !important;
  padding:8px;
  background:rgba(0,0,0,.3);
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  border-radius:8px;
  position:fixed !important;
  top:30% !important;
  left: 42% !important;
  margin-top:-94px !important;
  margin-left:-180px !important;
  z-index:101;
}

#heading1 {
  width:360px;
  height:44px;
  background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
  background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
  background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
  background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
  background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e9e9e9');
  border-bottom:1px solid #bababa;
  -webkit-box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
  -moz-box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
  box-shadow:
      inset 0px -1px 0px #fff,
      0px 1px 3px rgba(0,0,0,.08);
  -webkit-border-radius:4px 4px 0px 0px;
  -moz-border-radius:4px 4px 0px 0px;
  border-radius:4px 4px 0px 0px;
  font-size:14px;
  font-weight:bold;
  text-align:center;
  line-height:44px;
  color:#444444;
  text-shadow:0px 1px 0px #fff;
}

#content1 {
  height: 320px !important;
  width: 550px !important;
  background:#fcfcfc;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
  box-shadow:0px 1px 3px rgba(0,0,0,.25);
  -webkit-border-radius:0px 0px 4px 4px;
  -moz-border-radius:0px 0px 4px 4px;
  border-radius:0px 0px 4px 4px;
}

#content1 p {
  font-size:13px;
  font-weight:normal;
  text-align:center;
  line-height:22px;
  color:#555555;
}
.reveal-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #000;
  background: rgba(0,0,0,.4);
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
}


@media only screen and (max-width: 767px) {
  #modal {
      width:284px;
      height:156px;
      padding:8px;

      margin-left:-150px !important;
      margin-top:-78px;
  }
  #heading1 {
      width:284px;
      height:28px;

      line-height:28px;
      font-size:0.688em;
  }
  #content1 {
      width:284px;
      height:128px;
    }
    #content1 p {
        width:284px;
        font-size:0.688em;
    }
}

Then this as the HTML:

Code:

div style="display: none;"><!-- BEGIN switch_user_logged_in -->
            <a name="quickreply"></a>
            {QUICK_REPLY_FORM}<br />
      <!-- END switch_user_logged_in --></div>

<script src="http://static.tumblr.com/hhedat8/OUkmkh864/script.js"></script>
<script src="http://static.tumblr.com/hhedat8/cfemkh9df/script.js"></script>
<div id="modal"><div id="content1">
<h3 style="background:#2c5687 url(http://community.invisionpower.com/filestore/public/style_images/master/maintitle.png) repeat-x top; font-size: 16px; padding: 8px 10px 9px; color: white; fon-family: Arial;">Quick Reply</h3>
<div style="width: 97.1%; height: 100%; position: absolute; top: 5%;">{QUICK_REPLY_FORM}</div>
</div>
</div>

Then inside your viewtopic_body, put this one:

Code:

<style>#pun-qpost .main-head {
display: none;
}
#pun-qpost #text_editor_controls {
margin: auto;
}
p.right-box {
display: none;
}</style>


BBcodes are not entered in the post body. I need the old reply box also. Since it may be removed.

Well, there's no other option but the remove the bbcodes, since i've just use the variable of the quick reply.
And there's no difference between Quick Reply and a floating one. Just telling.

Lock this topic. I don't need this. I have removed all the codes.

Since the problem is now solved and no solutions were used, move to garbage section. ~Locked and Moved