Post by sdd » Sun Feb 21, 2021 8:24 am

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

Attachments

horizontal option dis.png

horizontal option dis.png (129.84 KiB) Viewed 810 times

vert dis.png

vert dis.png (213.3 KiB) Viewed 810 times

Last edited by sdd on Tue Feb 23, 2021 9:44 am, edited 1 time in total.

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by sw!tch » Sun Feb 21, 2021 8:34 am


Full Stack Web Developer :: Send a PM for Custom Work.
Backup and learn how to recover before you make any changes!


Active Member

Posts

Joined
Sat Apr 28, 2012 2:32 pm

Post by mikeinterserv » Sun Feb 21, 2021 8:49 am

:) 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

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sdd » Sun Feb 21, 2021 8:59 am

I have to admit i chuckled :laugh: at the back and forth but i see code but not sure which files im need to edit with opencart 3.0.2.0

Thanks

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by mikeinterserv » Sun Feb 21, 2021 9:03 am

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 :laugh:
Last edited by mikeinterserv on Sun Feb 21, 2021 10:45 pm, edited 1 time in total.

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sdd » Sun Feb 21, 2021 9:12 am

LOL understand and thank you for your reply. I will take a look at these folders.
Thanks

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by mikeinterserv » Sun Feb 21, 2021 9:17 am

I'll make you an OCMod it will take 2 minutes

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sdd » Sun Feb 21, 2021 9:41 am

Thanks mikeinterserv but i got it going and really appreciate your help 100%.

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by mikeinterserv » Sun Feb 21, 2021 10:13 am

No worries :-) glad you got it
Last edited by mikeinterserv on Sun Feb 21, 2021 10:45 pm, edited 1 time in total.

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sw!tch » Sun Feb 21, 2021 10:48 am

mikeinterserv wrote:
Sun Feb 21, 2021 10:13 am
Question 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
You cant edit css or js files with ocmod, you can however append a style tag.

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!


Active Member

Posts

Joined
Sat Apr 28, 2012 2:32 pm

Post by mikeinterserv » Sun Feb 21, 2021 11:05 am

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.
Last edited by mikeinterserv on Sun Feb 21, 2021 12:16 pm, edited 1 time in total.

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by mikeinterserv » Sun Feb 21, 2021 11:35 am

sw!tch wrote:
Sun Feb 21, 2021 10:48 am
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.
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

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sw!tch » Sun Feb 21, 2021 11:40 am

mikeinterserv wrote:
Sun Feb 21, 2021 11:35 am
sw!tch wrote:
Sun Feb 21, 2021 10:48 am
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.
Switch you are mainly correct as usual :-) - but sometimes you want a change to be GLOBAL
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.

Full Stack Web Developer :: Send a PM for Custom Work.
Backup and learn how to recover before you make any changes!


Active Member

Posts

Joined
Sat Apr 28, 2012 2:32 pm

Post by mikeinterserv » Sun Feb 21, 2021 12:18 pm

sw!tch wrote:
Sun Feb 21, 2021 11:40 am
Also easier to track as opposed to going through minified bootstrap code.
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 :-)

Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by mikeinterserv » Sun Feb 21, 2021 10:39 pm

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

Attachments

Clipboard23.jpg

Clipboard23.jpg (31.18 KiB) Viewed 510 times


Active Member

Posts

Joined
Thu May 28, 2020 6:55 am
Location - Wales

Post by sdd » Mon Feb 22, 2021 9:53 am

sw!tch wrote:
Sun Feb 21, 2021 10:48 am
mikeinterserv wrote:
Sun Feb 21, 2021 10:13 am
Question 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
You cant edit css or js files with ocmod, you can however append a style tag.

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.
Thank you very good information to know.

User avatar
sdd
New member

Posts

Joined
Sat Feb 06, 2021 6:21 am

Post by jmvarner83 » Fri May 27, 2022 2:38 pm

mikeinterserv wrote:
Sun Feb 21, 2021 10:39 pm
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

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

Newbie

Posts

Joined
Fri May 27, 2022 2:35 pm
Who is online

Users browsing this forum: integraa and 266 guests