Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Help needed understanding gallery module


Portman

Recommended Posts

Hi,

I am trying to setup the layout of my product info page on phoenix 1.0.7.9

Im using the PI Modules and playing with the gallery layout....

I have 2 questions ....

1. Can someone explain to me (or direct me to an explanation) of how the image sizes are adjusted...

I assume that the main image and the secondary image are all controlled in the Thumbnail width section...

at the moment my primary image is showing full size, so that when you click on the image and the modal pops us the images in the modal are smaller.

I want to reduce the size of the primary image by half (I have been able to reduce the size of the secondary images as I want them) but I cant seem to get it to change - am I looking in the completely wrong area?

the setup I have in the thumbnail width box is  col-8 col-sm-6 col-lg-2

2. is there a way to change the colour of the swipe arrows and indicators - I have a lot of white in my product images and they often cannot be seen.

Link to comment
Share on other sites

Hi,

1. you could try to change the sloth width for the one the gallery is placed inside.

admin/modules_content.php?module=cm_pi_modular&action=edit

2. via user.css 

.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")}
.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")}
.carousel-indicators li{background-color:#000;}

Best regards

Christoph

Link to comment
Share on other sites

Thanks Christoph,

answer 1 worked great... still finding my feet on a very different platform to my original osocommerce site...

 

Unfortunately answer 2 did not work, I found a couple of other 'solutions' as well that were very similar, I am just having no luck. is it possible that it is not looking at the user.css file? does this need to be activated as the default or final .css file  somewhere ?

Link to comment
Share on other sites

2 hours ago, Portman said:

Unfortunately answer 2 did not work, I found a couple of other 'solutions' as well that were very similar, I am just having no luck. is it possible that it is not looking at the user.css file? does this need to be activated as the default or final .css file  somewhere ?

This works for us:

.carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23575757' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important; }
.carousel-control-next-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23575757' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important; }
.carousel-indicators li {background-color: #575757 !important;}

Just paste into user.css - note the !important - some things don't work without it.
You may also be better off posting questions about Phoenix in phoenix Club.

Link to comment
Share on other sites

3 hours ago, Portman said:

I am just having no luck

Internet searching the question "bootstrap carousel control icon color" gives e.g. https://stackoverflow.com/questions/46249541/change-arrow-colors-in-bootstraps-carousel
Ensure you read it all.

3 hours ago, Portman said:

is it possible that it is not looking at the user.css file?

There's only one user.css file so if the one you're looking at is named that then you're looking at it.

3 hours ago, Portman said:

does this need to be activated as the default or final .css file  somewhere ?

No.

Link to comment
Share on other sites

5 hours ago, Portman said:

Thanks Christoph,

answer 1 worked great... still finding my feet on a very different platform to my original osocommerce site...

 

Unfortunately answer 2 did not work, I found a couple of other 'solutions' as well that were very similar, I am just having no luck. is it possible that it is not looking at the user.css file? does this need to be activated as the default or final .css file  somewhere ?

For me it it works without !important. The reason might be that I'm using a custom template. So maybe you check which template you are using and then check for the user.css in there.

Link to comment
Share on other sites

Hi @Heatherbell and @beerbee,

This should be so simple....

I have now tried both of your answers - cut and paste into user.css - uploaded my site and still nothing is happening - 

I have checked and double, even triple checked that it is in the right location and I have cleared my bowsers memory incase that was the issue - and still no change 

I read through the link you sent as well which to me just reiterated than cutting and pasting what you sent through should work

If I am using a template (that I got from burt) would this mean that there is another .css file that is overwriting my user.css file?

could there be anything else that you can think of that would be causing the issue?

Link to comment
Share on other sites

1 hour ago, Portman said:

If I am using a template (that I got from burt)

That's the first time you mentioned that!
Presumably you have the template selected in admin>my store>template selection.
So, your user.css is located at /templates/yourtemplate/static/

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...