Jump to content
Portman

Help needed understanding gallery module

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.

Share this post


Link to post
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

Share this post


Link to post
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 ?

Share this post


Link to post
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.


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
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.


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
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.

Share this post


Link to post
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?

Edited by Portman

Share this post


Link to post
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/


Download the latest CE Phoenix version here:
https://github.com/gburton/CE-Phoenix/archive/master.zip

Share this post


Link to post
Share on other sites

😳 sorry I'm new to this version of oscommerce - it is very different to the original...

But its working now 🎉

Thanks for your help

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×