Trying up update the previous / next arrows on the product listing pages

  • Posts: 140
  • Thank you received: 18
7 years 7 months ago #279293

-- HikaShop version -- : 3.2

So Im trying to add my own arrows for the product listings pages. I uploaded the new png file, and I added the following to the custom front end css...

.hikashop_previous_product{
	background-color: transparent !important;
	float:left;
	width: 6px;
	height: 6px;
	background:url(https://www.eutopiantrader.com/images/com_hikashop/upload/nav-icon.png) no-repeat 5px -20px;
	margin-bottom:10px;
	padding:5px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:4px
}

.hikashop_previous_product:hover{
	background:url(https://www.eutopiantrader.com/images/com_hikashop/upload/nav-icon.png) no-repeat 5px 3px;
}

.hikashop_next_product{
	background-color: transparent !important;
	float:left;
	width: 6px;
	height: 6px;
	background:url(https://www.eutopiantrader.com/images/com_hikashop/upload/nav-icon.png) no-repeat -30px -20px;
	margin-bottom:10px;
	padding:5px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:4px
}

.hikashop_next_product:hover{
	background:url(https://www.eutopiantrader.com/images/com_hikashop/upload/nav-icon.png) no-repeat -30px 3px;
}

The problem is that the default arrows just turn to empty images. If I actually goto the url for the image as listed in the config above, they it is there, but they just dont show in the listing they just change to little blank squares. I tried it without the www.eutopiantrader.com/ and just using /images/com_hikashop/upload/nav-icon.png and that did the same thing which is why I tried the full url. Any thoughts?

Thanks.

(HikaShop Business 3.2.0 [1709061916])

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

  • Posts: 83780
  • Thank you received: 13570
  • MODERATOR
7 years 7 months ago #279317

Hi,

I don't see that CSS on your website:
www.eutopiantrader.com/media/com_hikasho.../frontend_custom.css
Where did you add that CSS code ?

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

  • Posts: 140
  • Thank you received: 18
7 years 7 months ago #279375

Hi Nicholas,

Per an earlier post on said topic I had added it to the front_end.css in the back end hikashop config css editor, but I then removed it as it wasnt working. I had used the code that I found in that same post.. I took it back out when it was not working so as not to keep the images broken. If you like I can put it back in for you.

Thanks

(HikaShop Business 3.2.0 [1709061916])

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

  • Posts: 140
  • Thank you received: 18
7 years 7 months ago #279401

Hey Nicholas,

I put the change back into the custom front end.css
as follows

.hikashop_previous_product{
	background-color: transparent !important;
	float:left;
	width: 50px;
	height: 50px;
	background:url(https://www.eutopiantrader.com/images/Logo/nav-icon.png) no-repeat 50px 50px !important;
	margin-bottom:10px;
	padding:5px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:4px
}

.hikashop_previous_product:hover{
//5px 3px
	width: 50px;
	height: 50px;
	background:url(https://www.eutopiantrader.com/images/Logo/nav-icon.png) no-repeat 50px 50px !important;
}

.hikashop_next_product{
	background-color: transparent !important;
	float:left;
	width: 50px;
	height: 50px;
	background:url(https://www.eutopiantrader.com/images/Logo/nav-icon.png) no-repeat 50px 50px !important;
	margin-bottom:10px;
	padding:5px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:4px
}

.hikashop_next_product:hover{
	width: 50px;
	height: 50px;
	background:url(https://www.eutopiantrader.com/images/Logo/nav-icon.png) no-repeat 50px 50px !important;
}

I am going to leave it there so you can see it. I do not understand what is stopping my new images from displaying though I think it has something to do with the placement of the boxes themselves with relationship to the images and likely something to do with the column size as well. I tried manipulating the box sizes with the broder box in the development console and while I was able to increase the size of the boxes to match the size of the image (50px x 50px (too large an image perhaps? I did want to increase the size since that is partially why I added my own images because the default ones are just way too tiny, but at the same time since I was increasing them I figured I would use my brand colors). but I can not got the boxes to line up with the images.

i left the original px sizes commented out in the custom front end.css so that I can return back to the original if everything else fails.

I am truly at a complete loss an feeling VERY defeated right now because I spent over an hour trying many different things to get this too work, and I failed miserably and not understanding why is a huge kick below the belt especially to my pride because I feel like this should be a very easy straight forward change, and nothing I am doing is working.

I would really welcome and appreciate anyones help me..

Thank you... A very dejected dardwizzle.

(HikaShop Business 3.2.0 [1709061916])
Last edit: 7 years 7 months ago by Dardwizzle.

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

  • Posts: 140
  • Thank you received: 18
7 years 7 months ago #279414

After much testing and back and forth it's finally working, here is what was done to get this too work...

.hikashop_previous_product{
	background-color: transparent !important;
	float:left;
	width: 50px!important;
	height: 50px!important;
	background-image: url(https://www.eutopiantrader.com/images/Logo/nav-icon-previous.png)!important;
	margin-bottom:5px;
	padding:15px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:5px
}


.hikashop_next_product{
	background-color: transparent !important;
	float:left;
	width: 50px!important;
	height: 50px!important;
	background-image: url(https://www.eutopiantrader.com/images/Logo/nav-icon.png)!important;
	margin-bottom:5px;
	padding:15px;
	border:1px solid #ddd;
	border-radius:3px;
	margin-right:5px
}

The hover was removed for simplicity.

Thanks!

(HikaShop Business 3.2.0 [1709061916])
The following user(s) said Thank You: nicolas

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

Time to create page: 0.067 seconds
Powered by Kunena Forum