Login or create a new account is messed up

  • Posts: 80
  • Thank you received: 0
7 years 3 months ago #276714

-- url of the page with the problem -- : www.mangialarossa.com/index.php/en/compo.../show/cid-2?Itemid=0
-- HikaShop version -- : HikaShop Business: 3.1.1
-- Joomla version -- : 3.7.5
-- PHP version -- : 7.0.17
-- Browser(s) name and version -- : Firefox

Hi,
in check out process, the fields in registration form are one next other without a bit of space. Also , the text "password" and "verify password" are not aligned to their corresponding fields (see attachment 1). This corresponds to "selector" in Display method for registration

even if I changed "all in one page" in Display method for registration, the despay is very confusing. (see attachment 2).

Could you please help fix it? Thanks a lot.
Imma

Attachments:

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 3 months ago #276724

Hi,

That's an issue arrising from changes made by the latest versions of Joomla. Download the install package of the 3.1.1 on our website and install it on yours and that will add a patch for that which will also be in the next version of HikaShop.

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #276767

Nicolas,
I installed Hikashop 3.1.1 again but the problem was still there. However, I was able to edit css and now the current dispay is the one in the attachment. It is better than before but I would like to move right the text "Registration" to align with the fields.

My actual configuration in style_custom.css is the follwoing:

.hikashop_checkout_login{
clear:both;
color:#964b00;
margin:auto;
}
.hikashop_checkout_login_left_part{
width:500px;
float:left;
}
.hikashop_checkout_login_right_part{
width:440px;
float:left;
}

@media only screen and (max-width: 480px) {
#hikashop_checkout_login_right_part td{ display:block !important; }
}

I understand that the above configuration should be changed a bit to get the text "Registration" aligned with the corresponding fields . Could you please provide me with your help?

Thanks

Attachments:

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

  • Posts: 12953
  • Thank you received: 1778
7 years 2 months ago #276788

Hello,

Using this kind of CSS code will probably do the job :

#hikashop_checkout_registration h2 {
    margin-left: 150px;
}

The following user(s) said Thank You: idimarco

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #277546

Hi,

Thanks for your help. The login page during the checkout process looks fine now. However, the registration module when the user click on "register" button looks bad and text color is orange..

Page with the problem: www.mangialarossa.com/index.php/en/hikas...ds-listing/user/form

How can I adjust the registration model layout and change for text color?

Thanks

Attachments:

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #277553

Hi,

You'll need to add custom CSS code on your website.
The orange color comes from your template : monosnap.com/file/JGNx6J9svb6j1Yi7wUdN7IEDC3EVYO
in the file /templates/shaper_helix3/css/bootstrap.min.css
Here is a tutorial which explains how to find the CSS classes and ids in order to use them in your own custom CSS and how to edit the CSS of HikaShop:
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #277622

Hi Nicolas,
I still have 2 issues:
1) In the registration form module which is accessible via "register" button is to move "*" symbol next to the corresponding text. I was not able to find the file location of that symbol. Could you please advice and suggest the CSS code to adjust the position?

2) Using mobile, the login/registration page during the checkout is mixed up and looks bad. On desktop the same page looks nice. Why is not responsive? How to improve that page on mobile? Below is the link to that page:

www.mangialarossa.com/index.php/en/shop/...kout/task-show/cid-2


Thanks
Imma

Last edit: 7 years 2 months ago by idimarco.

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
7 years 2 months ago #277630

Hi,

In the file /templates/shaper_helix3/css/template.css you have that code:

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: block;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
There, remove the code:
display: block;
and the stars will be aligned with the inputs.
However, there is no simple way to move the stars next to the labels on that view.

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

  • Posts: 80
  • Thank you received: 0
7 years 2 months ago #277740

Hi

If I delete it, the stars move at the right of the text fields while they should move next right to the corresponding text.

Also, I have an addition issue after upgrading to HikaShop 3.2: the login form during the checkout does not look good. The label "username" and " password" are merged with their corresponding text field.

Any advice?

Please let me say that I am a bit disappointed with HikaShop 3.2. I upgraded to this version but there are still some problems in the layout like this while they should have been solved in advance.

Thanks

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

  • Posts: 26158
  • Thank you received: 4028
  • MODERATOR
7 years 2 months ago #277751

Hello,

The label "username" and " password" are merged with their corresponding text field.

Nothing has changed between HikaShop 3.1 and HikaShop 3.2 for the "login" during the checkout.
But, you have activated a legacy setting named "bootstrap design" which change that specific part.

If I delete it, the stars move at the right of the text fields while they should move next right to the corresponding text.

Nicolas told you :

However, there is no simple way to move the stars next to the labels on that view.

And it was for a good reason because it require a view override and it cannot be done using just CSS.
But if you want to perform a view override to change how the page is generating the stars ; that's possible.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: idimarco

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

Time to create page: 0.083 seconds
Powered by Kunena Forum