Coding-Spot

You are not connected. Please login or register

 
 

I need to make the reply and new topic button popup(no page load)

Message (Page 1 of 1)


 
Advance Member

Posted on Mon May 27, 2013 8:13 am

 
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



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Mon May 27, 2013 9:09 am

 
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;
     }
}



Last edited by Mark on Mon May 27, 2013 10:59 am; edited 1 time in total



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Mon May 27, 2013 9:50 am

 
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.



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Mon May 27, 2013 10:00 am

 
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>



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Mon May 27, 2013 11:56 am

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



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Mon May 27, 2013 11:44 pm

 
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. Happy



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Tue May 28, 2013 2:36 pm

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



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Tue May 28, 2013 11:59 pm

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



View user profile http://coding-spot.darkbb.com


#9

Sponsored content


 

Posted Today at 11:49 am

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None