Hi all and thanks in advanced. I have been having many issues with my site and finally decided to do a fresh install and saved myself many headaches. Now i have a little nagging issue and for some reason my product options are all showing in one long line. (please see image of the problem as well as an image of what i trying to achieve. I want to go from the standard vertical layout to horizontal. What files and code to use?
Thanks
Thanks
Attachments
horizontal option dis.png (129.84 KiB) Viewed 865 times
vert dis.png (213.3 KiB) Viewed 865 times
Last edited by sdd on Tue Feb 23, 2021 9:44 am, edited 1 time in total.
well we came up with two ways to do it.
It is your preference which you use
I would say try them both as they are slightly different.
1 does not account for lengths of text that may be assigned to the option if it is longer than a couple of words
The other does and centres the text below the option image.
One is slightly more messy - you may not notice on some screen sizes :-)
People SCREAM if you dare mention editing bootstrap - it makes me laugh though :-)
ALSO there are plenty of extensions available
It is your preference which you use
I would say try them both as they are slightly different.
1 does not account for lengths of text that may be assigned to the option if it is longer than a couple of words
The other does and centres the text below the option image.
One is slightly more messy - you may not notice on some screen sizes :-)
People SCREAM if you dare mention editing bootstrap - it makes me laugh though :-)
ALSO there are plenty of extensions available
Do you want me to make you an OCMod
Use updated OCMod below
The same people who freak about bootstrap are the same as the ones who buy a car with michelin tyres and think it will blow up if you put dunlop tyres on sort of thing :-) - serious lecture incoming I imagine
Use updated OCMod below
The same people who freak about bootstrap are the same as the ones who buy a car with michelin tyres and think it will blow up if you put dunlop tyres on sort of thing :-) - serious lecture incoming I imagine
Last edited by mikeinterserv on Sun Feb 21, 2021 10:45 pm, edited 1 time in total.
No worries :-) glad you got it
Last edited by mikeinterserv on Sun Feb 21, 2021 10:45 pm, edited 1 time in total.
You cant edit css or js files with ocmod, you can however append a style tag.mikeinterserv wrote: ↑Sun Feb 21, 2021 10:13 amQuestion for switch or straighlight or anyone else who may know
Why is the modified bootstrap.min.css which is correctly modified and in the storage mods folder NOT being used by OC and the default location bootstrap.min.css is being used. Yes I refreshed mods and sass and cache etc - checked all the mod files - all fine - mod log all fine correct lines replaced etc
Front end NO CHANGE seen from bootstrap.min.css
Instead of editing bootstrap just create a new Pseudo-element or refined selector and use !important to override bootstrap. When you make a change in bootstrap it then becomes global therefore affects all elements that inherit that class.
Full Stack Web Developer :: Send a PM for Custom Work.
Backup and learn how to recover before you make any changes!
Editing bootstrap is fine if you know EXACTLY what its going to do and where the elements are on the site.
I actually WANT to affect ALL those radio elements on the WHOLE site.
I have fixed the issue and it is working fine.
I just forgot to add the link in twig file.
So you clearly CAN use OCMod with these files if you wish - like I do.
Also if you code long enough you will find an occasion or two where you have NO CHOICE but to edit bootstrap, so for anybody to say bootstrap should NEVER be edited is total nonsense. I will agree that it is rare to have to do that but some sites ONLY use bootstrap with NO css - so what do you do then.
There is nothing on bootrap that says it should NEVER be touched, nothing.
I actually WANT to affect ALL those radio elements on the WHOLE site.
I have fixed the issue and it is working fine.
I just forgot to add the link in twig file.
So you clearly CAN use OCMod with these files if you wish - like I do.
Also if you code long enough you will find an occasion or two where you have NO CHOICE but to edit bootstrap, so for anybody to say bootstrap should NEVER be edited is total nonsense. I will agree that it is rare to have to do that but some sites ONLY use bootstrap with NO css - so what do you do then.
There is nothing on bootrap that says it should NEVER be touched, nothing.
Last edited by mikeinterserv on Sun Feb 21, 2021 12:16 pm, edited 1 time in total.
Switch you are mainly correct as usual :-) - but sometimes you want a change to be GLOBAL as I do in this particular case. Its not because I want to argue about it for fun
an easy way to handle custom css changes is to side load a custom.css, you can then put your css overrides in there, etc. Also easier to track as opposed to going through minified bootstrap code.mikeinterserv wrote: ↑Sun Feb 21, 2021 11:35 amSwitch you are mainly correct as usual :-) - but sometimes you want a change to be GLOBAL
Full Stack Web Developer :: Send a PM for Custom Work.
Backup and learn how to recover before you make any changes!
Never going to argue with that :-)
Edit - this method does NOT a good mod make:-)
While it works fine - you need the storage path for the header twig which is unknown in advance for a mod.
So advice from switch is solid as ever and I won't bother with this as an OCMod - too many issues that can be overcome by different methods mentioned by switch and others :-)
I will re make the OCMod to add the required css to the header instead as suggested by switch more than once :-)
OCMod for 2 columns for long option list
NO bootstraps were harmed in the making of this OCMod :-)
Both switch and Mona were more correct in their approach to this for OC. I will concede :-)
So here is an OCMod that should meet with general approval
See the image to see how it handles long text for option.
I added space under image now
NO bootstraps were harmed in the making of this OCMod :-)
Both switch and Mona were more correct in their approach to this for OC. I will concede :-)
So here is an OCMod that should meet with general approval
See the image to see how it handles long text for option.
I added space under image now
Attachments
Clipboard23.jpg (31.18 KiB) Viewed 565 times
Thank you very good information to know.sw!tch wrote: ↑Sun Feb 21, 2021 10:48 amYou cant edit css or js files with ocmod, you can however append a style tag.mikeinterserv wrote: ↑Sun Feb 21, 2021 10:13 amQuestion for switch or straighlight or anyone else who may know
Why is the modified bootstrap.min.css which is correctly modified and in the storage mods folder NOT being used by OC and the default location bootstrap.min.css is being used. Yes I refreshed mods and sass and cache etc - checked all the mod files - all fine - mod log all fine correct lines replaced etc
Front end NO CHANGE seen from bootstrap.min.css
Instead of editing bootstrap just create a new Pseudo-element or refined selector and use !important to override bootstrap. When you make a change in bootstrap it then becomes global therefore affects all elements that inherit that class.
mikeinterserv wrote: ↑Sun Feb 21, 2021 10:39 pmOCMod for 2 columns for long option list
NO bootstraps were harmed in the making of this OCMod :-)
Both switch and Mona were more correct in their approach to this for OC. I will concede :-)
So here is an OCMod that should meet with general approval
See the image to see how it handles long text for option.
I added space under image now
Could you be amazing and workup and 3 or 4 column option?
I have some items with 50+ color options and 2 columns isn't enough
I signed up just for your post and reply after searching for several minutes lol
Who is online
Users browsing this forum: OSWorX, paulfeakins and 412 guests