Joomla Templates Club 406,261 posts

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#198476

Hi,

I have mijoshop all in one login module to display in sidebar-1

I would like to style it the same as joomla login module

See screen shot

How can I do this with css?

Thanks

Matt

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#537848

@matthewgillard,

Please open file: /components/com_mijoshop/opencart/catalog/view/theme/bookshop/template/account/login.tpl then find and replace this code:

<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_email; ?></label>
<div class="col-sm-8">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_password; ?></label>
<div class="col-sm-8">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control">
</div>
</div>

With:

<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_email; ?></label>
<div class="col-sm-8">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_password; ?></label>
<div class="col-sm-8">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control" placeholder="Password">
</div>
</div>

Here is result: http://prntscr.com/3pt8zr

Hope this helps

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#537879

I will give it a try. Is there a way I can also get the icons????

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#537963

@ matthewgillard,

You can try my suggestion below:
– Open the file: /components/com_mijoshop/opencart/catalog/view/theme/bookshop/template/account/login.tpl then find and replace this code:

<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_email; ?></label>
<div class="col-sm-8">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="col-sm-3 control-label"><?php echo $entry_password; ?></label>
<div class="col-sm-8">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control" placeholder="Password">
</div>
</div>

With:


<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-user tip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-lock tip" title="<?php echo JText::_('JGLOBAL_PASSWORD') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control" placeholder="Password">
</div>
</div>

– Create a new file called “custom.css” in the /templates/your_template_name/css/ path, then add this rule:

.login-content .control-group .input-group-addon {
float: left;
width: 35px;
height: 34px;
font-size: 14px;
}
.login-content .control-group .login-custom{
padding: 0;
}
.form-horizontal .control-group .control-label {
width: 50px;
}


Here is result: http://prntscr.com/3q3t6x

Hope this is helpful to you.

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#538403

OK.

I now have the styling completed on the mijoshop account page. But styling is not showing on the sidebar module login (mijoshop all in one)

So how can I now add the same to the sidebar module?

See screenshots

---

Attachments:

1. 
2. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#538440

@matthewgillard,

Please PM me URL, Admin and FTP credentials of your site, I will investigate further and help you out.

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#538469

OK thanks just sent it

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#538723

@matthewgillard,

Please try with this tweak:

– Copy the file “login.tpl”
From : componentscom_mijoshopopencartcatalogviewthemedefaulttemplatemodule folder
To: componentscom_mijoshopopencartcatalogviewthemebookshoptemplatemodule folder. Then open this file.

– Find and replace this code:

<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="module_login">
<b><?php echo $entry_email_address; ?></b>
<br />
<span style="text-align: left;"><input type="text" name="email" /></span>
<br /><br />
<b><?php echo $entry_password; ?></b>
<br />
<input type="password" name="password" />
<br /><br />
<div style="float:left; text-align: right;"><a onclick="jQuery('#module_login').submit();" class="<?php echo MijoShop::getButton(); ?>"><span><?php echo $button_login; ?></span></a> </div>
<div style="float:left; text-align: right;"><a href="<?php echo $this->url->link('account/register', '', 'SSL');?>" class="<?php echo MijoShop::getButton(); ?>"><span><?php echo $button_create; ?></span></a></div>
<br style="clear:both;"/>
</form>

With:

<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-user tip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-lock tip" title="<?php echo JText::_('JGLOBAL_PASSWORD') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control" placeholder="Password">
</div>
</div>

– Then, open the file: /templates/your_template_name/css/custom.css and replace this rule:

.login-content .control-group .input-group-addon {
float: left;
width: 35px;
height: 34px;
font-size: 14px;
}
.login-content .control-group .login-custom{
padding: 0;
}
.form-horizontal .control-group .control-label {
width: 50px;
}

With:

.control-group {
margin-bottom: 35px;
}
.control-group .input-group-addon {
float: left;
width: 35px;
height: 34px;
font-size: 14px;
}
.control-group .login-custom{
padding: 0;
}
.form-horizontal .control-group .control-label {
width: 50px;
}

Once done, you should see: http://prntscr.com/3s1tom

Hope it helps.

1 user says Thank You to Nazario A for this useful post

1. matthewgillard

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#538806

Thats perfect thank you so much for your help!

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#538974

Hi @nazario A

Back again. I thought I was OK with this one but I am missing the “Login” and “Create” button on the login module. I want it to look like this attached.

Also it does not display nice when on iPad (form field goes too long) and in mobile mode where the icons go above the field.

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#539193

@matthewgillard,

<blockquote>I thought I was OK with this one but I am missing the “Login” and “Create” button on the login module. I want it to look like this attached.</blockquote>

I just got it fixed for you. You can see in this file: componentscom_mijoshopopencartcatalogviewthe mebookshoptemplatemodulelogin.tpl
Now, it is working fine. http://prntscr.com/3tnc0c

<blockquote>Also it does not display nice when on iPad (form field goes too long) and in mobile mode where the icons go above the field.</blockquote>

Was fixed also. You can see in the file: /templates/your_template_name/tpls/blocks/mainbody/one-sidebar-left.php, I replace this code:

<div id="t3-content" class="t3-content col-xs-12 col-sm-12 col-md-9 col-md-push-3">

With:

<div id="t3-content" class="t3-content col-xs-12 col-sm-8 col-sm-push-4 col-md-9 col-md-push-3">

On mobile, please open the file: /templates/your_template_name/css/custom.css then add this rule:

/* For Mobile */ @media (min-width: 320px) and (max-width: 640px) {
.control-group .col-sm-8.login-custom {
float: left;
}
}

Hope this helps.

1 user says Thank You to Nazario A for this useful post

1. matthewgillard

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#539578

Hi @nazario A

Mobile is working perfectly now thank you very much.

iPads are still having the form fields overlap the sidebar module (see screen shot)

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#539633

@matthergillard,

I just added this rule in the file: /components/com_mijoshop/opencart/catalog/view/theme/bookshop/stylesheet/stylesheet.css

/* Custom for iPad */ @media (min-width: 768px) and (max-width: 1024px) {
.box_oc input, .box_oc input, .box_oc input, .box_oc textarea {
min-width: 180px !important;
}
}

It’s working fine now, please check again.

1 user says Thank You to Nazario A for this useful post

1. matthewgillard

[matthewgillard Friend matthewgillardJoin date: May 2014Posts: 26Downloads:0Uploads:11 Thanks: 8 Thanked: 2 times in 1 posts]

#539750

Hi @nazario A

Thank you so much for your help on this one. iPad version looks good now as well.

I think I have one more question on this issue. I found that on the Checkout page when not logged in (ie. Returning Customer fields) that our new styling also needs to be added like you have done for us in the register and login module. (see attached screen shot)

How can I do this one as well?

Thanks

Matt

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#539801

Hi Matt,

You can try with this tweak:

– Copy the file “login.tpl”
From : componentscom_mijoshopopencartcatalogviewthemedefaulttemplatecheckout folder
To: componentscom_mijoshopopencartcatalogviewthemebookshoptemplatecheckout folder. Then open this file.

– Find and replace this code:

<b><?php echo $entry_email; ?></b><br />
<input type="text" name="email" value="" />
<br />
<br />
<b><?php echo $entry_password; ?></b><br />
<input type="password" name="password" value="" />
<br />
With:

<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-user tip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="text" name="email" value="<?php echo $email; ?>" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<span class="input-group-addon">
<i class="fa fa-lock tip" title="<?php echo JText::_('JGLOBAL_PASSWORD') ?>"></i>
</span>
<div class="col-sm-8 login-custom">
<input type="password" name="password" value="<?php echo $password; ?>" class="form-control" placeholder="Password">
</div>
</div>

– Open the file: /templates/your_template_name/css/custom.css then replace this rule:

/* For Mobile */
@media (min-width: 320px) and (max-width: 640px) {
.control-group .col-sm-8.login-custom {
float: left;
}
}
With:

/* For Mobile */
@media (min-width: 320px) and (max-width: 640px) {
.control-group .col-sm-8.login-custom {
float: left;
}
.checkout .checkout-content .left {
width: 100%;
}
.checkout .checkout-content .right {
float: right;
width: 100%;
}
.checkout .checkout-content .right .control-group {
margin-left: 20px;
}
.box_oc input, .box_oc input, .box_oc input, .box_oc textarea {
min-width: 200px;
}
}

Here is result:

Let me know if this helps.

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. matthewgillard

[Author]

Posts