Change checkout layout

  • Posts: 32
  • Thank you received: 0
  • Hikashop Business
10 years 4 months ago #186069

-- HikaShop version -- : 2.3.5
-- Joomla version -- : 3.3.6

Hi - Where do i need to go to change the layout of my address fields during checkout. I've been at this for hours and hours and just can't find the right css code to do it with.

The attached file shows what it looks like on the left and I want it to look like the one on the right.

Also the asterisk. I managed to find the css for that for the contact informaiton fields and gave it a value of "hidden" but I would just rather get rid of it altogether. I could not find anything for the asterisks for the email fields above. How do I get rid of these?

Attachments:

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

  • Posts: 2143
  • Thank you received: 747
10 years 4 months ago #186076

Hi,

Did you try inspecting the page with Firebug or a comparable browser console? It's fairly simple to find the classes and simulate changes.

To be able to help you and give you the correct CSS, it'd be good to see the site because the present CSS might well come from your template.
If you posted a link to your site in the hidden section of this post, then us regular humans can't see it and the official support team might take it from here.
Otherwise just post a link?

Need help with customisations of layouts, style or other site development? PM me!
(Don't forget to turn on "E-mail notification of new messages" )

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

  • Posts: 32
  • Thank you received: 0
  • Hikashop Business
10 years 4 months ago #186159

yes, I did try using Firebug.

you can see the site here: vpp.cloudaccess.net/nyc-swag.html

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

  • Posts: 83928
  • Thank you received: 13584
  • MODERATOR
10 years 4 months ago #186173

Hi,

It can be done with some simple CSS code that you can add in your template's main CSS file:
.hikashop_field_required {
display: none;
}
#hikashop_checkout_login_right_part .control-group{
margin-bottom : 0 !important;
}

The following user(s) said Thank You: cr2

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

  • Posts: 32
  • Thank you received: 0
  • Hikashop Business
10 years 4 months ago #186201

That worked perfectly well! thank you. One more thing. What about the email section? both the asterisk and the spacing.

Thank you.

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

  • Posts: 13201
  • Thank you received: 2322
10 years 4 months ago #186212

Hi,

You can edit the emails via the menu System > Emails, regarding the css you can add/edit properties at the top of the html part.

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

  • Posts: 32
  • Thank you received: 0
  • Hikashop Business
10 years 4 months ago #186330

hi, thanks for the response. I'm actually not talking about the system emails that are being sent. I'm talking about the form that the user uses to create an account as a guest. like on the top part of the previous attachment.

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

  • Posts: 83928
  • Thank you received: 13584
  • MODERATOR
10 years 4 months ago #186344

Hi,

You can try to use such CSS:
.hikashop_registration_email_line .controls, .hikashop_registration_email_confirm_line .controls{
color: transparent !important;
height: 30px;
}
.hikashop_registration_email_line .controls input, .hikashop_registration_email_confirm_line .controls input{
color: black !important;
}

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

  • Posts: 32
  • Thank you received: 0
  • Hikashop Business
10 years 4 months ago #186373

should that be put in the template css or the hikashop frontview css? in the display tab?

and when do i know which i should be using?

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

  • Posts: 13201
  • Thank you received: 2322
10 years 4 months ago #186376

Hi,

You can use this css in the frontend view css or in the template css file.
Both files are loaded on the HikaShop checkout.

To knows which template file is loaded, you can use your browser console and in the source code of the page see in the head part the loaded template files.

The following user(s) said Thank You: cr2

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

Time to create page: 0.123 seconds
Powered by Kunena Forum