X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Dev Questions (X-Cart 5) (https://forum.x-cart.com/forumdisplay.php?f=56)
-   -   How do I change parts of the skin for mobile browsers only? (https://forum.x-cart.com/showthread.php?t=70308)

Dr. Bogger 10-22-2014 11:55 AM

How do I change parts of the skin for mobile browsers only?
 
Hello,

I am looking to edit the default skin, to change the look on mobile devices only.

Is there a way I can detect if the browser being used is desktop or mobile?

Example:
PHP Code:

if (Mobile Browser) {
Do 
this
} else {
Do 
this



Dr. Bogger 10-22-2014 03:41 PM

Re: How do I change parts of the skin for mobile browsers only?
 
Can I use this inside a template file?
PHP Code:

if (\XLite\Core\Request::isMobileDevice()) 


elmirage001 10-22-2014 08:36 PM

Re: How do I change parts of the skin for mobile browsers only?
 
Use CSS media queries
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Good luck!

Paul

Dr. Bogger 10-22-2014 09:19 PM

Re: How do I change parts of the skin for mobile browsers only?
 
Is it possible to move/remove <div> sections using CSS?
If so, using what code?

elmirage001 10-22-2014 09:38 PM

Re: How do I change parts of the skin for mobile browsers only?
 
Sorry, I missed that you were using x-cart 5...

I don't have any experience with xc5...

tony_sologubov 10-23-2014 05:32 AM

Re: How do I change parts of the skin for mobile browsers only?
 
Quote:

Originally Posted by Dr. Bogger
Can I use this inside a template file?
PHP Code:

if (\XLite\Core\Request::isMobileDevice()) 



Yes, this is correct code.

Quote:

Is it possible to move/remove <div> sections using CSS?
If so, using what code?

Well, if CSS code can accomplish what you need, then you can do this. In order to register CSS code for mobile skin, you can use the condition mentioned earlier (if (\XLite\Core\Request::isMobileDevice())) in the method described here:
http://kb.x-cart.com/display/XDD/Adding+CSS+and+JS+files

Dr. Bogger 10-23-2014 06:02 AM

Re: How do I change parts of the skin for mobile browsers only?
 
I'm not using mobile skin. I just want to modify the default responsive skin to look better on mobile devices.

I will even share the mods that I do if somebody is willing to help point me in the right direction.

Dr. Bogger 10-23-2014 06:03 AM

Re: How do I change parts of the skin for mobile browsers only?
 
Quote:

Originally Posted by tony_sologubov
Yes, this is correct code.


Also, I tried using that code inside the template files, and it didn't work. It just displayed the code on the screen.

tony_sologubov 10-23-2014 06:23 AM

Re: How do I change parts of the skin for mobile browsers only?
 
Quote:

Originally Posted by Dr. Bogger
Also, I tried using that code inside the template files, and it didn't work. It just displayed the code on the screen.


OK. Could you please explain what you are trying to achieve then? I need a bit more details in order to help.

Tony.

Dr. Bogger 10-23-2014 06:51 AM

Re: How do I change parts of the skin for mobile browsers only?
 
Quote:

Originally Posted by tony_sologubov
OK. Could you please explain what you are trying to achieve then? I need a bit more details in order to help.

Tony.


I need to edit the files:

- skins/default/en/checkout/steps/shipping/parts/subsection.shipping.tpl
- skins/default/en/checkout/steps/shipping/parts/subsection.payment.tpl

But I need the changes I make to only display on mobile devices.

I wish there was a "mobile override" skin area, kinda like "custom skin", but one that only works if being viewed from a mobile device.


All times are GMT -8. The time now is 03:26 AM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.