HIKASHOP ESSENTIAL 60€The basic version. With the main features for a little shop.
HIKAMARKETAdd-on Create a multivendor platform. Enable many vendors on your website.
HIKASERIALAdd-on Sale e-tickets, vouchers, gift certificates, serial numbers and more!
MARKETPLACEPlugins, modules and other kinds of integrations for HikaShop
-- url of the page with the problem -- :
balancedequine.com.au
-- HikaShop version -- : 3.0.1
-- Joomla version -- : 3.7.4
-- PHP version -- : 7.1
-- Browser(s) name and version -- : Firefox 54.0.1
For a long time now, I have been using Hikashop and from the day of install, we have put up with the grey text on all of the shop buttons when the rest of the site is using blue text for links. I have just managed to rectify this on all but the proceed to checkout button in the mini cart area using CSS customizations to the button text and the hover text. My question to you is, why is Hikashop styling the buttons in the first place? Why not let the template style the buttons and if a user wants something different, they can customize the CSS in the display settings. I feel this is a major flaw in this system and a lot of people won't bother to try and fix this unless it seriously affects the operation of the site. The hard coded button text color is #777777 which is a dark grey and while this may be suitable to a lot of sites, the text will become hard to see on buttons that use darker colors. Also, because of the hika styling in the Proceed to checkout button is hard coded to no background and grey text means that I have to trawl through the CSS to find where it is set and change that to match the rest of the site, or put up with it. I am not a website programmer and there may be a reason for this, but as far as I am concerned, if people installed Hikashop and the buttons matched the rest of the site, most would be happy with this and the few that aren't can style it any way they want. Just my 2 cents worth, all the best, Steve
Please Log in or Create an account to join the conversation.
Hello,
We do not customize buttons as we did before :why is Hikashop styling the buttons ?
Please Log in or Create an account to join the conversation.
Thank you for your reply, but did you read my post or just the title? I had a look at the link you provided and it shows where I can adjust the CSS which is where I had to change the Hikashop styled font colour for the colour that the rest of the site uses. If Hikashop doesn't style the button font, why was the colour defined as #777777 (dark grey) when the template defines the font colour as blue. I repeat my original statement that if Hikashop did not define the button font and background colours, then the buttons would be styled by the template. Could you please read my original post and reply to that. Steve
Please Log in or Create an account to join the conversation.
Hi,
Jerome did read your message and did point out to the correct section of the documentation. However, he wanted to point the "CSS for buttons" setting there, not the CSS file edition.
That setting has been added since HikaShop 3.0.0
By default HikaShop defines a class hikabtn and set it there.
That way, regardless of how your template is made and regardless of which class name the template uses for the buttons, HikaShop will display buttons with some style.
That option allows you to change the CSS class in order to use the one of the template.
Templates implementing boostrap usually use the CSS class "btn" so juste replace hikabtn by btn there and the CSS of the template will be used.
Other templates will use other CSS classes so you can put the appropriate one there.
HikaShop has no way of knowing which class should be used since there is nothing in place for templates to advertise the classes they are using for specific elements.
That's why there is a setting there now so that you can set it yourself.
Please Log in or Create an account to join the conversation.
Sorry for the time it has taken to respond to this. I appreciate the fact that you can't know what developers name components, like buttons, but there are a lot of other styling that Hikashop takes it upon itself to override and put in its own styling. I have a client that wants a shopping cart developed, and having used Hikashop in the past, this is my logical choice to recommend. The site itself has a black background with white paragraph font, red H1, white H2, red, H3 etc. Buttons are orange background with white text. When I install Hikashop and add a dummy product for testing. I go to the product page only to find that Hikashop has overrides that makes H1 into a dark grey, paragraph text becomes dark grey with a white background etc. Your documentation says it is a simple matter to style the look of Hikashop to match your template. My question is, why are elements that don't change from template to template, eg. H1, H2 etc <p> for paragraph and so on, being overridden by Hikashop. My previous comment still applies in that if hikashop adopted the basic elements of styling, this would be more than good enough for most users straight out of the box
To put it mildly, this site with Hikashop overrides looks like crap and in order to fix this, I have had to resort to trawling through the "Styles for the front end" which is, quote "The styles CSS contains all the color/margins/images CSS of HikaShop front-end.". I did manage to find the override for the H1. When I removed this override, it adopted the template H1 style which is great, exactly what I wanted. I cannot for the life of me find the override that is responsible for the description text even though inspecting the element using Firefox says it is in style_default.css line 141. Removing the color attribute completely results in no change, Changing the color value to white does nothing and adding in color as white or #ffffff; and the background as #000000; or black also does nothing. So at this point I have a crappy looking website thanks to Hikashop overrides that you say are not there, and the only way I can get it to look any good is to adopt a light theme that the customer does not want. I even contemplated purchasing the style pack until I realized that you are only offering your styles, not a customizable solution for the money you are asking. I look forward to your reply, Steve
Please Log in or Create an account to join the conversation.
Hi,
When you install HikaShop by default, HikaShop doesn't add its own styling to elements unless the elements usually don't have any styling provided by the template or HikaShop cannot know the styling classes used by the template.
I don't remember HikaShop styling itself h1 tags. It usually lets the template CSS do that.
However, some templates have CSS in a way that doesn't work well with some of the HTML of HikaShop.
The goal of the styles pack, is to help you in such cases by providing different color bases, especially the black styles for black based templates. So it should greatly help in some cases. And yes, the styles pack are completely customizable. they give CSS and image files and if you need to, you can remove/change the CSS you don't want in them and/or change the images provided.
So I don't see why you're saying that they are not customizable ?
Also, regarding the style_default.css you're talking about, please note that by default, that CSS file is deactivated. We provide it as a way for you to have more styling CSS by default when your template doesn't style the elements they are supposed to. If you activated it and then you didn't like it, you can always modify it, but you can't say that the problem is the default CSS in HikaShop.
Finally, regarding your question on the add to cart buttons, the grey color on hover comes from that CSS:
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover{
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-block;
outline: none;
border:1px solid;
border-color: #EEEEEE #DDDDDD #DDDDDD #EEEEEE;
text-decoration:none;
color: #303030 !important;
background-color: #f8f8f8;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
background: -webkit-linear-gradient(top, #ffffff, #f8f8f8);
background: -moz-linear-gradient(top, #ffffff, #f8f8f8);
background: -o-linear-gradient(top, #ffffff, #f8f8f8);
background: linear-gradient(top, #ffffff, #f8f8f8);
}Please Log in or Create an account to join the conversation.
Ok Nicolas, so on your advice, I purchased the styles pack and installed it. Selected the red style and had a look to see what changed. What I found was that on the product categories, it gave me a red title, add to cart button and red borders around elements, so far so good, looks ok. Clicking into the product page, I found a black background even though I have specified everywhere a white background, black description fonts on a white background which is exactly the same as it was before spending 40 Euros on the style pack. Going into the checkout, I find the status form is unreadable as it is displaying the amount in white text in the white band of the form, it is displaying white text for the GST in the black band and also white text in the white band for the total. Oh, and by the way, the address heading shows in dark grey and is very hard to read. I have reinstalled Hikashop and set the CSS to on, and the frontend style to default, this has made no difference at all. I have had good results using light themes with Hikashop, so it is very disappointing to find that it is so bad with dark themes. If you would like to have a look at what I am talking about, the url is avonrivercomputers.com.au/manninghair If you go to brands and select the top left brand and navigate to the product page. Look forward to your response, Steve
Please Log in or Create an account to join the conversation.
Hi,
Looking at your website, I can see that you've selected the "orange" style in the style setting of the HikaShop configuration. I would recommend instead to select black red in order to get the one the most adapted to the template you're using.
Now, if there are issues with the black red style on your template, we'll be happy to look into them.
The style pack is a few months old only and we need more feedback on it to be able to improve it so it would be a great help, and that would also help with your issues.
Please Log in or Create an account to join the conversation.
Hi Nicolas, selecting the red black style has made it a bit easier to read the status form on the checkout page although the red on grey for the description is a bit hard to read and should be white like the subtotal, GST and total fields, but I could live with this.. The category view is not quite what I wanted and set in the configuration settings, ie white background for the thumbnail images, but I can live with this as I can fix this by editing the images there. The problem here is that the link is not in keeping with the rest of the website, The template calls for links to be white and hover links turn red. The red black style shows the links as red and hover turns white, opposite to the template. The product category is the same but when you go to the product page, the description text is still showing black text on a white background which is different from anywhere else in the site, is not configured in the template and inspecting the element says that this is overriding the template text using an inline style of black text with a white background. CSS should be making the site elements consistent but Hikashop is changing these elements which is why I keep saying that if it took the elements from the template, it would at least be consistant throughout the site. I must say that this has been really frustrating that in order to get Hikashop to display the same as the template settings, I have to go in and edit the CSS of nearly everything that the template already defines. Steve
Please Log in or Create an account to join the conversation.
Hello,
Let's process step by step, first your product description, see my inspect tool screenshot :
div.hikashop_product_page form a {
color: #774796;
}
div.hikashop_product_page form a:hover {
color: white;
text-decoration: none;
}div.hikashop_product_page form a.hikabtn {
color: #774796;
}
div.hikashop_product_page form a.hikabtn:hover {
color: white;
text-decoration: none;
}Please Log in or Create an account to join the conversation.
I have altered the code as suggested and it has altered the buttons somewhat, but its not what I want and it certainly is not what the template is set up to. Keep in mind the template settings are as follows: H1 is red, buttons are purple with white text. and hover is a darker purple with white text. Hikashop overrides the H1 and makes it purple in line with the purple style. If I set the "Button Style" in the configuration to Normal, "Front-end CSS" to default and CSS for buttons as hikabtn, my result is a purple button with black font. The contact us button is black with purple border and purple font. When I hover over the button it does show my template style of purple button with white font. Changing the button style from normal to CSS makes no difference. If I change the CSS for buttons from hikabtn to btn gives me a green "Add to cart button" and the contact us button is purple with dark grey font. I realise that I can go into the css files and alter every aspect of the hikashop display, but I don't want to do that. My biggest problem with this approach is that after styling everything in purple, exactly the way the client wants it, they come back and say, you know what? it would be great if it was red or green or some other colour. This leaves me with no option but to go back through the CSS files again and change everything there. There is provision to change the default item box background color in the coonfiguration settings and even in the menu options, why can't we have the same type of thing for heading, add to cart button and proceed to checkout where we can style the look and feel of how our clients want instead of this take it or leave it attitude. Your product is a good one with lots of nice features in it, but if its not easy to get get the "look" people are wanting, they will try something else. I have already purchased another shopping cart to see if it is any easier to get the look I am after, and I know there are a lot of others doing the same. It can't be that difficult to allow the user the flexibility to be able to change a few colors, surely. Steve
Please Log in or Create an account to join the conversation.
Hello,
First note that the way you write your message makes him really difficult to read and to understand, that's why Jerome have organized you idea by editing your post.
Now, I will answer you step by step from what you said :
The style purpose is to complete the template function, it's a working basis, and so it's quite normal that sometimes style "override" template css command."I have altered the code as suggested and it has altered the buttons somewhat, but its not what I want and it certainly is not what the template is set up to."
If you don't want to go inside Css file, you have to use only templates that by chance fit exactly your needs, as I said previously style is a working basis in order to go more far in HikaShop page customization and simplify this task."I realize that I can go into the CSS files and alter every aspect of the HikaShop display, but I don't want to do that.
My biggest problem with this approach is that after styling everything in purple, exactly the way the client wants it, they come back and say, you know what?
it would be great if it was red or green or some other color.
This leaves me with no option but to go back through the CSS files again and change everything there."
Please Log in or Create an account to join the conversation.
Ok, to put my issue plainly. I have settled on a purple and black Hikashop style, as this is the closest I can get to what I want. When I go to the product category the button is correct and matches my template. When I click into the product for more information, the buttons "Add to cart" and Contact us are totally different. Inspecting the button element in firefox tells me that the button text is on line 811 and that the font color is purple. When I change this by removing the colon, the font shows as white. This is in line with the rest of the template. Now here is where the problem is. When I now go to the checkout, the status form has gone from a readable black and grey striped table, to a black on white table with white text in the white areas and is unreadable. Resetting the button font to purple sets the checkout status form back to being readable. This more than anything is what I am trying to say. If I manually change some style element in Hikashop, it may have repercussions by changing something else. Then if we chase that element, it in turn may effect something else. Any help with would be appreciated, Steve
Please Log in or Create an account to join the conversation.
Hello,
Ok, I think I understand your error, here some basic way to customize css command :
selector {command: parameters;}
It is the most basic structure, that with a concrete example look like this :
hikabtn {color: purple;}
Here another example with a multiple selector or target
hikabtn,
hika_order,
hika_table{color: purple;}
Obviously, here if you switch purple for by example red, of course that will impact all the 3 elements.
So, another concrete example by using the navigator inspector tool, in this case you will see this :
Please Log in or Create an account to join the conversation.
I appreciate your help and I am starting to see some things of what you say, but for the life of me, I can't figure out what is going on with my site. When I go to the category listing of the products, if there are options, the option button is in line with the template. When I go to the product page, the buttons there are showing purple background with grey font instead of white like all the rest of the buttons. If I inspect the button element, the only thing it shows is the product form, color purple. Changing purple to whit results in the add to cart button background goes white and the contact us for more information renders correctly. Why is that some of the Hikashop buttons render correctly and some do not. All I really want is for Hikashop to render the buttons the same as the template dictates. What can I do about this situation? The development site url avonrivercomputers.com.au/manninghair/ Thanks in advance, Steve
Please Log in or Create an account to join the conversation.
Hello,
In order to have for all button the same style is to sort all css command that target button class, and to keep only your required command.
Can't say much about this, here the root of this is that template and style are mixed, so you have to remove some css command that don't give right command for what you required.
Regards
Please Log in or Create an account to join the conversation.
I am quickly getting to the point where I change the template to match the Hikashop style as everything I try results in totally unpredictible results an example is that I inspect the add to cart button element and I find that it is styled in the black purple style on line 1 which shows as black. I take this to be the font color as it is showing as black. If I remove the colon from the black style and save the style, everything on the product page changes. The button turns green with wihite text, the Contact us button changes to white background and the number selectors change as well showing a white plus and minus on an off white background. The proceed to checkout button has changes the white background also and when I go to the checkout the status form gives me white text on white table stripe and white text on black stripe on the alternate stripe. All this from removing 1 colon. If I change the black style to white in line 4, everything goes haywire and I have to change it back to black to restore some semblence of order. This is what I am having issues with. Can anyone help? Steve
Please Log in or Create an account to join the conversation.
Hello,
It'seems that despite my help you are unable to use our style css as a basis for your work.
This forum aim isn't to provide css custom code or knowledge about Css properties.
Sorry for this return, I think from where we are, I can only invite you to make a refund for the style css as if I understand you well it's leads you to trouble instead of help you.
Regards
Please Log in or Create an account to join the conversation.
