Styling Checkout Button

  • Posts: 109
  • Thank you received: 5
10 years 6 months ago #177434

-- HikaShop version -- : 2.3.4
-- Joomla version -- : 3.3.6

Hello, there.

Good afternoon!

Please could you let me know how to style the Checkout button only (and not other Hikashop nor Joomla buttons)? I.e. what is the class name(s) that should be used? The Checkout button that I am referring to is in the product/cart.php view file.

Also, for future references, what is the naming convention for the class names for other buttons should I, say, want to style other buttons? Or if you could teach me how to investigate the class name (by looking at the relevant files for the Checkout in the product/cart.php view above as an example), then I will not need to trouble you for small queries like this.

Thanks.

Take care!

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

  • Posts: 2143
  • Thank you received: 747
10 years 6 months ago #177438

Ed_Hika wrote: ... teach me how to investigate the class name ... then I will not need to trouble you for small queries like this.


Good point! So, let's skip the rest and get you going with finding out ID's and classes, because that and CSS is all you need for styling the buttons.

The best tool, as also mentioned in the documentation here, is Firebug, a free extension for Firefox. After installation, simply right-click on an element (i.e. a button), then select "Inspect Element with Firebug". The rest you'll find out quickly, or read about elsewhere.
Other browsers offer similar tools, sometimes already on-board, but hardly anything works as well as Firebug.

In addition to this, the search function here on the forum works wonder, too. You'd find the answer to your main question many times all over the place already... ;)

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: 109
  • Thank you received: 5
10 years 6 months ago #177446

Thank you.

However, I have searched but could not find any entry that specifically referred to what I am looking for.

I have also been using Firebug and the IE equivalent.

By using these tools, the class name of the Checkout button is "hikashop_cart_input_button". However, this seems to be a (semi-)generic name for Hikashop buttons. Apologies for not clarifying my query, but there needs to be some other class before this class (hikashop_cart_input_button). For example, ".hikashop_product_stock .hikashop_cart_input_button" in the post hikashop.com/forum/product-category-disp...uct-descirption.html .

Thanks.

Take care!

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

  • Posts: 2143
  • Thank you received: 747
10 years 6 months ago #177449

Ed_Hika wrote: ... there needs to be some other class before this class ...


Exactly. If you want to target the "Proceed to checkout" button in the cart (= any cart), you could eventually use this CSS:
.hikashop_cart .hikashop_cart_input_button {
    background: #ff0000;
}

Analog with other elements.

Firebug (and others) allow you to enter and 'test-drive' CSS code, and you see what's happening in real-time. However, please understand if one can't explain the complete 101 and all details of CSS, or respond to each and every particular request. There is a lot available on the web for learning. Sorry, but without basic knowledge of HTML and CSS it is almost impossible to customise a website, so if presently your limits are reached, you might need to decide if you want to take the steep learning route, or maybe hire a (frontend) designer... :unsure:

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: 109
  • Thank you received: 5
10 years 6 months ago #177452

Thanks for your help.

I've solved the problem. Turns out that I had 2 conflicting (and related) styles in the same CSS stylesheet and hence, the new colour was not showing. I thought that to solve the problem, I needed to know the exact name of the correct class to target; which I had already correctly targeted previously!

Thanks again.

Take care!

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

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

Time to create page: 0.090 seconds
Powered by Kunena Forum