Display CSS queries

  • Posts: 7
  • Thank you received: 1
8 months 3 weeks ago #360010

-- HikaShop version -- : 5.0.3
-- Joomla version -- : 4.4.3
-- PHP version -- : 8.2

I need to create CSS overrides for 2 things in HikaShop but not sure where to find the original CSS to copy to my custom.css

The first is the Variant Name and dropdown options on a product page (between DIMENSIONS and PRICE). I don’t need help actually writing the CSS to style the fonts and dropdown, just need to know where to find it.

The second is that I want to restyle the default little popup notification that appears in the top right of the screen when an item is added to cart. By default it is a light blue with darker blue text - again, I just need to know the location of the CSS for it.

Thanks.

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

  • Posts: 83007
  • Thank you received: 13398
  • MODERATOR
8 months 3 weeks ago #360012

Hi,

1. As far as I know, HikaShop doesn't have any CSS code for the variant name and dropdown options on the product page.
It might be your template adding CSS code to it, or there is just no CSS code for these.
If you're familiar with CSS, then you should already have a grasp on how to check what CSS code is being applied on a specific element of the page with the help of the developer tools of your browser. So with this, you should be able to figure out what to do exactly. Here is a tutorial on this, just in case: developer.chrome.com/docs/devtools/css
Note that you don't necessarily need to find the CSS code already applying to an element on a page to be able to customize it.
For example, if you want the product name to be with the red color on the product page, you don't need to find what CSS code already applies to it. Instead, you can look at the HTML element with your browser's inspector. You'll find that it uses the class hikashop_product_name_main. So you can directly write such CSS code in your custom.css file:

.hikashop_product_name_main{ color: red !important; }
If you want, we can look at the situation on that page in order to analyze the CSS with the developer tools on our browser to tell you where to look. But for that, we'll need you to provide the URL of the page.

2. The corner notification popup uses CSS code which is located in media/com_hikashop/css/notify-metro.css

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

  • Posts: 7
  • Thank you received: 1
8 months 3 weeks ago #360023

Thank you. Yes, I did find all the CSS classes I need, so I shall just use those to create a custom.css

I did also eventually find some CSS for HikaShop that was bundled with the Jollyany template.

The following user(s) said Thank You: nicolas

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

Time to create page: 0.055 seconds
Powered by Kunena Forum