Need help customizing Checkout Page

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191635

hey guys on my attachment I have my checkout page I want to change the color of I numbered them to make it easier.
1 problem: the color is right for my shipping option but when I hover over it changes to white
2. selected or not its white. I want to change it to black
3. need to change the color to black since we cant see anything

Thanks in advance guys

Attachments:

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

  • Posts: 83832
  • Thank you received: 13572
  • MODERATOR
10 years 3 months ago #191651

Hi,

We would need to look at the page on your website in order to tell you what CSS to use as your template CSS is involved in the styling here.
Otherwise, if you have CSS knowledge, you can find the CSS to modify yourself with your browser inspector. We have a tutorial on that here:
www.hikashop.com/support/support/documen...ize-the-display.html

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

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191672

Thank You Nicolas, I will pm you login information.

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

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191700

someone please help im a noob to this

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

  • Posts: 83832
  • Thank you received: 13572
  • MODERATOR
10 years 3 months ago #191702

Hi,

You can remove these different pieces of CSS code:

#hikashop_shipping_methods .row0:hover, #hikashop_shipping_methods .row1:hover {
background-color: #f8f8f8;
}

.hikashop_checkout_address_left_part .row0:hover, .hikashop_checkout_address_left_part .row1:hover, .hikashop_checkout_address_right_part .row0:hover, .hikashop_checkout_address_right_part .row1:hover {
background-color: #f8f8f8;
}

#hikashop_payment_methods .row0:hover, #hikashop_payment_methods .row1:hover {
background-color: #f8f8f8;
}

#hikashop_payment_methods td {
padding: 5px;
background-color: #fff;
}

.hikashop_checkout_cart table .row0:hover, .hikashop_checkout_cart table .row1:hover {
background-color: #f8f8f8;
}
from the frontend CSS file of HikaShop that you can edit via the Display tab of the HikaShop configuration:
www.hikashop.com/support/support/documen...ize-the-display.html

And you can also remove that CSS code:
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
background-color: #f9f9f9;
}
from the CSS file /media/jui/css/bootstrap.min.css of your website.

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

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191706

sorry Nicolas after going through my code I was unable to find any of those

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

  • Posts: 13201
  • Thank you received: 2322
10 years 3 months ago #191728

Hi,

Via the menu HikaShop > Configuration > Display > CSS, you can edit the frontend default css file, and I confirm that the css properties indicated by Nicolas are present in that file. The first property is line 2422 for example.

The following user(s) said Thank You: meleciovaldez

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

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191877

Thank You Xavier,

I was able to do everything except this part. any chance you may know which line it might be on?

Attachments:

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

  • Posts: 37
  • Thank you received: 1
10 years 3 months ago #191883

please help me make the text white for my billing address too please

Attachments:

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

  • Posts: 83832
  • Thank you received: 13572
  • MODERATOR
10 years 3 months ago #191885

It's not in the CSS of HikaShop. As I said in my message, you also have to edit the file /media/jui/css/bootstrap.min.css of your website and remove the code:
.table-striped tbody>tr:nth-child(odd)>td, .table-striped tbody>tr:nth-child(odd)>th {
background-color: #f9f9f9;
}

That's what will make the cart background black.

Fort he shipping/billing text color to be white, you can add such CSS on your website:
.hikashop_checkout_billing_address_info, .hikashop_checkout_shipping_address_info{ color: white ! important; }

Please note that we cannot do all your CSS customizations for you. I highly encourage you to learn about CSS if you want to customize further the look of your website elements. It will be necessary for you to get familiar with this. The link I gave has some links to some CSS tutorials in order to get started:
www.hikashop.com/support/support/documen...ize-the-display.html

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

Time to create page: 0.106 seconds
Powered by Kunena Forum