Hi,
@Carolek : If you look at the CSS for the stars HTML with the developer tool of your browser, you'll see that there is no CSS coming from HikaShop to style them.
And if you open the CSS file of HikaShop (
yaeliq.com/media/com_hikashop/css/frontend_custom.css
) that you can find in the header of the page, you can see that you're basing your CSS of HikaShop with the version 2.3.0 which didn't contain the new CSS that is used by the new vote and comment system.
So you need to either add your modifications to the new version of the CSS of HikaShop, or add the missing CSS to your custom CSS file:
/*
* Rating
*/
.hk-rating {
margin:auto;
display:inline;
}
.hk-rating a { cursor: pointer; background-color: transparent !important; }
.hk-rate-star {
width:16px;
height:16px;
font-size:2px;
display:inline-block;
text-decoration:none;
vertical-align:bottom;
background-image:url('../images/star.gif') !important;
background-repeat:no-repeat;
}
.hk-rate-star.state-full { background-position:left top; }
.hk-rate-star.state-mid { background-position:left -16px; }
.hk-rate-star.state-empty { background-position:left -32px; }
.hk-rate-star.state-hover { background-position:left -48px !important; }
.hikashop_vote_notification{
display:inline;
color:grey;
}
.hikashop_vote_form .hikashop_comment_textarea{
border: 1px solid #EEEEEE;
border-radius: 4px 4px 4px 4px;
color: #666666;
height: 60px;
margin: 5px 0;
padding: 5px;
width: 98%;
}
.hikashop_vote_form .button{margin-left:0px}
.hikashop_comment_textarea:hover, .hikashop_comment_textarea:focus{
border:1px solid #ddd;
}
.hikashop_vote_stars{
width: 100%;
padding:5px 0px;
}
.hikashop_vote_notification_mini{color:#666; font-size:11px; font-style:italic}
.hikashop_total_vote{color:#666; font-size:11px;}
.hikashop_total_vote{
display: inline;
}
.hikashop_vote_form{margin-top:10px}
.hikashop_vote_listing_useful_bought{font-style:italic}
.hikashop_vote_listing_useful_note{
margin-right:10px;
}
.hikashop_vote_listing_notification:hover{
margin-left:3px;
}
#hikashop_product_vote_listing{
margin-top:30px;
}
#hikashop_product_vote_form table, .hikashop_product_vote_form table{
margin:auto;
color:#666;}
.hikashop_vote_no_comment{
margin-left: 80px;
font-weight:bold;
}
.hikashop_listing_comment{
color:#555555;
font-weight: bold;
}
.hikashop_form_comment{
color:#555;
font-weight: bold;
}
.hikashop_vote_notification_mini{
display: inline;
}
.hikashop_comment_form{
width:100%;
}
.hikashop_comment_form input{
border: 1px solid #DDDDDD;
border-radius: 3px 3px 3px 3px;
padding: 3px;
}
.hikashop_product_vote_listing .pagination{text-align:center;}
.hikashop_product_vote_listing .pagination .list-footer{
margin: 10px 0px 5px 0px;
}
.hikashop_product_vote_listing .pagination .list-footer .counter{
display: none;
}
.hikashop_product_vote_listing .pagination .list-footer .limit{
display: none;
}
.hika_comment_listing{
margin:10px auto;
border: 1px solid #eee;
color: #999;
width: 100%;}
.hika_comment_listing_notification{
width: 120px;
font-style:italic;
}
.hika_comment_listing td{padding:5px;}
.hika_comment_listing:hover{border: 1px solid #ddd;}
.hika_comment_listing:hover .hika_comment_listing_useful_p{
color: #90b1c3;
}
.hika_comment_listing_name{
font-weight: bold;
color:#2C8296
}
.hika_comment_listing_stars{
width:85px;
}
.hika_comment_listing_content{
background-color: white;
padding: 2px;
color: #333;
}
.hika_comment_listing_useful_p{
width: 18px;
background-color: #ffffff;
border: 1px solid #90b1c3;
font-weight:bold;
padding: 1px;
text-align:center;
}
.hika_comment_listing_useful{
background-color: transparent !important;
width: 16px !important;
height: 14px !important;
background-image:url(../images/icons/vote_plus.png) !important;
background-size:16px 14px !important;
background-repeat:no-repeat !important;
background-position: right !important;
cursor: pointer !important;
}
.hika_comment_listing_useful.hide{
width: 16px;
height: 14px;
background-size:0px 0px;
}
.hika_comment_listing_useful_p.hide{
display:none;
}
.hika_comment_listing_useful.locked{
opacity: 0.2;
cursor: default !important;
}
.hika_comment_listing_useful.locked:hover, .hika_comment_listing_useless.locked:hover{
opacity: 1;
}
.hika_comment_listing_useless{
background-color: transparent !important;
width: 16px !important;
height: 14px !important;
background-image:url(../images/icons/vote_minus.png) !important;
background-size:16px 14px !important;
background-repeat:no-repeat !important;
background-position: right !important;
cursor: pointer !important;
}
.hika_comment_listing_useless.locked{
opacity: 0.5;
cursor: default;
}
.hika_comment_listing_full_stars {
width: 16px;
height: 16px;
display:inline-block;
text-decoration: none;
background-image: url('../images/star.gif') !important;
background-repeat: no-repeat;
background-position:left top;
cursor: default;
}
.hika_comment_listing_empty_stars {
width: 16px;
height: 16px;
display:inline-block;
text-decoration: none;
background-image: url('../images/star.gif') !important;
background-repeat: no-repeat;
background-position:left -32px;
cursor: default;
}
.hika_comment_listing_empty{
color: #666;
padding:5px;
}
.hika_comment_listing_bottom{
}
@media only screen and (max-width: 420px) {
.hikashop_sort_listing_comment{display: none;}
}
@sonic69 : Yes, I know that. And I tried to change the default template to use the protostar template, but it didn't do anything. So that means that the menu item of your link has a template assigned to it. But I don't know which one and you have 20 different templates. So I don't want to spend an hour trying to figure out how your website is structured, especially since you didn't purchase HikaShop and that we usually only provide such advanced user support to customers who purchased our products, and that the problem likely comes from a template customization and isn't inherant to HikaShop.
So could you please provide a link where we can see the product page with the protostar template ?