Resource icon

"Quckreply" for guests

Overview Updates (2) Reviews (2) Discussion
It wouldn't be so hard, though you need to experiment with the widths a bit, which is what takes time. Most of the rules are already defined, you just need to tweak them. I also think she added in a few more buttons, so it looks a bit more like a editor (e.g. Preview). My style is 1000px wide, and the editor area is about 700ish px, which leaves 250px each for the guest message and login form. I think what stopped me from moving forward was the height. I was left with either rewriting the guest message or remove it, and removing it was less work :)
 
Sorry for the delayed reply guys - I've been busy busy busy.
I'll share my edits and respond to the posts when I get back online later this afternoon ;)

J.
 
Well damn. Completely forgot about this thread... Anyway - here are the edits I used to get the result you see at my forum http://jpicforum.info/threads/xen-bbcode-test.8026/ --- It's probably a little dirty code edit - but it works LOL

For qr_guest.css:

Code: 
.details{
margin: 0px 10px 15px 20px;
}
 
.mosaic-overlay p {
text-shadow: 0px 1px 1px #000000;
font:12px verdana, 'Lucida Grande', Tahoma, Verdana, sans-serif;
color:#ddd;
}
 
.mosaic-overlay h2 {
text-shadow: 0px 1px 1px #000000;
font:14px arial black, 'Lucida Grande', Tahoma, Verdana, sans-serif;
color:#ddd;
}
 
.mosaic-block {
position:relative;
overflow:hidden;
width:840px;
margin:0px 0px 0px 20px;
padding-bottom: 15px;
}
 
{xen:helper clearfix, '.mosaic-block'}
 
.mosaic-overlay {
display:none;
z-index:5;
position:absolute;
width:840px;
margin-left: 0px;
height:100%;
opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
filter:alpha(opacity=00);
background: #000;
padding: 10px 5px;
}
 
.quickReply { padding: 10px 0px 30px 0px; border-top: 1px dashed @primaryLighterStill; }
.submitUnit.qrGuest { width: 840px; text-align: right; margin: 10px 10px 10px 0px; }
.qrLogin, .qrLogin dt, .qrLogin dd { float: left; padding: 0px 3px; color: #fff;}
.qrLogin { margin-left: 5px; }
.qrLogin .textCtrl { width: 150px; }
.qrLogin.qrsubmitUnit { clear:right; }
.qrLogin .button { min-width: 85px; margin-right: 5px; }
.mosaic-block form { }
.mosaic-block .guestMessage { float: left; width: 310px; }
.mosaic-block #SignupButton { width: 170px; float: left; margin:0px !important; }
.qrLogin #ctrl_pageLogin_remember { margin: 5px 0; }
.quickLogin p, .quickLogin a { font-weight:bold; text-shadow: 0px 1px 1px #000000; float:right; margin-top: 25px; margin-right:5px; color: @mutedTextColor; }

For qr_guest:

Code: 
<xen:require css="qr_guest.css" />
<script type="text/javascript">
jQuery(function($){
$('.cover').mosaic({
animation:'fade',
opacity:'0.7',
speed:'slow'
});
});
</script>
<div class="quickReply message">
<xen:include template="message_user_info">
<xen:map from="$visitor" to="$user" />
<xen:set var="$isQuickReply">1</xen:set>
</xen:include>
 
<div class="mosaic-block cover">
<div class="mosaic-overlay">
<div class="details">
<div class="guestMessage">
<h2>We hope you're enjoying our forum!</h2>
<p>Only registered Members have access to posting priviledges. Registration here is <span class="text-decoration:underline !important; font-weight:bold !important;">100% FREE</span>. Use the button below to begin registration or the form on the right to login to your account.<br /><br />
<label for="LoginControl" id="SignupButton"><a href="{xen:link login}" class="inner">{xen:if $xenOptions.registrationSetup.enabled, {xen:phrase sign_up_now}, {xen:phrase log_in}}</a></label></p>
</div>
 
<form action="{xen:link 'login/login'}" method="post" id="quickLogin">
<dl class="qrLogin">
<dt><label for="ctrl_pageLogin_login">Name or Email Address:</label></dt>
<dd><input type="text" name="login" value="{$defaultLogin}" id="ctrl_pageLogin_login" class="textCtrl" /></dd>
</dl>
<dl class="qrLogin">
<dt><label for="ctrl_pageLogin_password">{xen:phrase password}:</label></dt>
<dd>
<input type="password" name="password" class="textCtrl" id="ctrl_pageLogin_password" />
</dd>
</dl>
<dl class="qrLogin qrsubmitUnit">
<dt>
<input type="submit" class="button primary" value="{xen:phrase log_in}" data-loginPhrase="{xen:phrase log_in}" data-signupPhrase="{xen:phrase sign_up}" />
</dt>
<dd><label for="ctrl_pageLogin_remember" class="rememberPassword"><input type="checkbox" checked="checked" name="remember" value="1" id="ctrl_pageLogin_remember" /> {xen:phrase stay_logged_in}</label></dd>
</dl>
</form>
 
<dl class="qrLogin qrsubmitUnit">
<dt>
<p class="quickLogin"><a href="{xen:link lost-password}" class="OverlayTrigger OverlayCloser">{xen:phrase forgot_your_password}</a></p>
</dt>
<dd></dd>
</dl>
</div>
</div>
<textarea class="textCtrl Elastic mosaic-block cover" rows="5" name="message" style="overflow: hidden; "></textarea>
<div class="submitUnit qrGuest">
<a href="login/"  class="button primary">Post Reply</a>
<a href="login/"  class="button primary">Preview...</a>
<a href="register/" class="button DisableOnSubmit">Register To Post</a>
</div>
</div>
</div>
 
<div style="float:right;"><label for="LoginControl"><a href="{xen:link login}" class="concealed">({xen:phrase log_in_or_sign_up_to_reply})</a></label></div>

HTH

I'm using a very similar code on a new clients fixed width style and it works wonderfully as the code above. Thanks again for the share Magnus ;)

J.
 
I see you wrap the signup button inside the p and use br twice to add spacing. You can close the paragraph after the text, and use css .details p { margin-bottom: 15px; } or larger. I know a few cringes with excessive use of br :rolleyes:

I also see a empty css rule you can delete. Really nice, will link to this in the description so people can see an example of fixed width implementation.
 
MagnusB said:
I see you wrap the signup button inside the p and use br twice to add spacing. You can close the paragraph after the text, and use css .details p { margin-bottom: 15px; } or larger. I know a few cringes with excessive use of br :rolleyes:

I also see a empty css rule you can delete. Really nice, will link to this in the description so people can see an example of fixed width implementation.
Click to expand...

I know I know I know. Sloppy code LOL - I must have been excessively lazy when I called it quits with the code I posted. It works for me though. And happy to share. So thanks again. I'll be looking forward to more releases from you! Cheers

J.
 
I understand why you called it quits, it was fairly difficult to get sorted and positioned to begin with. And on a fixed width, getting it just right was even worse :(
 
Any updates on this addon? How is it working out for people? Seems like it would entice many more people to join a site. I am just curious what happens to the guests comment that they enter and are prompted to sign up, then join the site. Does the original comment get submitted and posted? Or do they have to write it all over again.
 
It's not an addon, its a pretty big template edit. It should work on any style, considering you do some customizations.

As for the comments, it wont save anything. All this is, is a text field with a few buttons underneath, and when guests try to focus on the text field an overlay appears telling them they have to register or sign up. The buttons link to registration page, so it is a completely non functional edit field, just there to remind lurkers that it is possible to reply. If you check the description, MsJaquii has a pretty cool demo of it.

If anyone wants to make an addon out of this, go ahead, I don't mind, as long as you credit me somewhere in your addon (e.g. description or whatever).
 
Looks like a greta thing to add to Xenforo. Can anyone comment on how effective it's been in converting guests into members?
 
Code: 
<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .quickReply {
        display: none;
        }
    }
</xen:if>

Untested, but some sort of variation of that I guess..
 
MagnusB said:
Code: 
<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .quickReply {
        display: none;
        }
    }
</xen:if>

Untested, but some sort of variation of that I guess..
Click to expand...
Oops, this code remove quick reply for guest and member. My member can't post comment on responsive design.
 
Do not use extra.css, but add it in the same css template you created for this modification (qr_guest.css)
 
Thanks for this!

One issue - if the forum does not allow replies then logged in users will get qr_guest loaded
 
MagnusB said:
Code: 
<xen:if is="@enableResponsive">
    @media (max-width:800px) {
        .quickReply {
        display: none;
        }
    }
</xen:if>

Untested, but some sort of variation of that I guess..
Click to expand...
Hello Guys I want only quick reply for guest and need not any signup (without captcha and singup) so how to do this
 
You must log in or register to reply here.

Similar threads

CedricV
  • Question Question
RM 2.2 Guest Permission allowing to see all content
Replies
2
Views
275
CedricV
CedricV
securedme
  • Question Question
XF 2.2 If I choose an SVG file for logo, then all avatars and images will be made invisible in posts.
Replies
3
Views
394
securedme
securedme
Foxtrek_64
  • Question Question
XF 2.2 Assign User to Thread
Replies
0
Views
103
Foxtrek_64
Foxtrek_64
K
Duplicate Password input field when adding user in admin panel is not type password
Replies
2
Views
516
btmgreg
btmgreg
Wildcat Media
  • Question Question
XF 2.2 Upgraded to 2.2.15; Google indexing error this morning
Replies
9
Views
589
Wildcat Media
Wildcat Media
Top Bottom