Layout issue with Poplogin

  • Posted by TemplatePlazza (5261) Offline
Hi, I'm not really sure what you want to achieve but you can try to make the input width wider with this code
.tppoplogin input.inputbox {
    width: 145px!important;}
6 years 7 months ago #7 by TemplatePlazza

Please Log in or Create an account to join the conversation.

Thank you for this additional information. The module is exactly what we need! You cab close this ticket now.


Kind regards, Paul Vos
6 years 7 months ago #8 by Paul Vos

Please Log in or Create an account to join the conversation.

Hi
I followed this thread and tried the CCS changes, which are to go into template.css, I assume.

Anyway, it's had no effect. The actual text entry is halfway down the actual text box. You have no idea how users cannot get their head around that :D:D:D

File Attachment:


The image shows the effect - you can make out the faint outline of where the password field actually sits. The user name field is similar in behaviour.

Any suggestion?
2 years 10 months ago #9 by CCANSW

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (5261) Offline
hi ccansw, please try this code :
.tpdiv2 {
  width:280px!important;
}
.tppoplogin input.inputbox {
  margin: -15px 0 0 75px!important;
}
2 years 10 months ago #10 by TemplatePlazza

Please Log in or Create an account to join the conversation.

Not sure if this is relevant, but the installation is in /modules/mod_poplogin

The sub directory structure is slightly different. the css file s are in /modules/mod_poplogin /assets

I see
.tpdiv2 {
    width: 240px;
    float: right;
    padding: 20px;
    background: #d1f7fe;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-right-radius: 5px;
}
 
.tppoplogin input.inputbox {
    width: 135px!important;
    display: block!important;
    height: 27px!important;
    line-height: 27px!important;
    float: left;
    border: none!important;
    font-size: 12px!important;
    background: transparent!important;
    outline: none;
	margin: 3px 0 0 3px!important;
	padding: 3px 0 0 3px!important;
 
}

Changed

margin: -15px 0 0 75px!important;[/quote]

That's a better result.

As an observation I think our users are seeing Username and Password as placeholders, which has probably added to their confusion.


Thanks
2 years 10 months ago #11 by CCANSW

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (5261) Offline
if you want to change it to placeholder then it would be easier. Open the file modules/mod_poplogin/tmpl/default.php
at line 83 change this code
<div class="tppoplogin">
	<span><?php echo JText::_('Username') ?></span>
	<input id="username" type="text" name="username" class="inputbox" alt="username" size="12" autocomplete="off" />
</div>
<div class="tppoplogin">
	<span><?php echo JText::_('Password') ?></span>
	<input id="passwd" type="password" name="password" class="inputbox" size="18" alt="password" />
</div>

into
<div class="tppoplogin">
	<input id="username" type="text" name="username" class="inputbox" alt="username" size="12" placeholder="username" autocomplete="off" />
</div>
<div class="tppoplogin">
	<input id="passwd" type="password" name="password" class="inputbox" size="18" alt="password"  placeholder="password"/>
</div>
2 years 10 months ago #12 by TemplatePlazza

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum