Customize buttons on login form

  • Posts: 17
  • Thank you received: 0
7 years 10 months ago #243206

-- url of the page with the problem -- : www.hiphey.be
-- HikaShop version -- : 3.6.2
-- Joomla version -- : 3.5

Hey guys,

I would like to customize the radio buttons that let you select if you want to login as guest, register or just login.
i have added a screenshot. I would like to replace the look of the radio buttons with the look of a green square button ( the login button on the right side) that i made.




Can you teach me how to do that? what files i need to modify?

Kind regards

Bram

Attachments:
Last edit: 7 years 10 months ago by Bram.

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
7 years 10 months ago #243214

Hi,

You can do that by adding some simple CSS on your website:

#hikashop_checkout_login_left_part label {
    background-color: #1abc9c;
    text-align: center;
    padding: 15px;
    font-size: 1.5em;
    color: black;
}
#hikashop_checkout_login_left_part label input{
display: none;
}
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 17
  • Thank you received: 0
7 years 10 months ago #243295

Nicolas,

I would kiss you if i could!
Thank you so much!

Kind regards

Bram

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

  • Posts: 234
  • Thank you received: 4
6 years 3 months ago #285272

Hello

I have been trying to change the background colour for the left login form but have failed. Can you please help me with this, I have edited the CSS where

.hikashop_checkout_login_left_part{
width:250px;
float:left;
background-color: #000;

but no joy.

Cheers
Iain

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

  • Posts: 81509
  • Thank you received: 13064
  • MODERATOR
6 years 3 months ago #285274

Hi,

Please provide a link to the page you're talking about so that we can look at the situation.

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

  • Posts: 234
  • Thank you received: 4
6 years 3 months ago #285298

HI

It is craven-equipment.co.uk/index.php/kits-racks/checkout and I am looking to have only the Login form background a different colour.

Cheers
Iain

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
6 years 3 months ago #285302

Hello,

Don't forget that you can use your navigator inspector tool in order to analyze your Html and get easily Html class or better id.
For this point your needed element, and right click and select "inspect" or "inspector tool" (depends from which navigator you use).

With this you will find in this specific case a useful Html id to create your css command :



Hope this will help you.

Regards

Last edit: 6 years 3 months ago by Philip.

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

  • Posts: 234
  • Thank you received: 4
6 years 3 months ago #285313

HI Philip,

Thanks for that. I use that all the time and that is how I came to

.hikashop_checkout_login_left_part{
width:250px;
float:left;
background-color: #000;

however it doesn't appear to effect the form.

Cheers
Iain

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

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
6 years 3 months ago #285316

Hello,

And why don't you use the id I bordered in my image ?
I'm quite sure that will fit your needs.

Regards

Last edit: 6 years 3 months ago by Philip.

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

  • Posts: 234
  • Thank you received: 4
6 years 3 months ago #285351

Hi

Thanks for pointing me in the right direction. The final code needed was

div.hkc-lg-4 {
background-color: #2c8296;
}

Cheers

The following user(s) said Thank You: Mohamed Thelji

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

  • Posts: 12953
  • Thank you received: 1778
6 years 3 months ago #285357

Hi,

Thank you for your feedback !

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

Time to create page: 0.102 seconds
Powered by Kunena Forum