custom css for mobile

JimR · 2015-06-17 14:13:32

I have a set of styles I use that have to be separated by the module. I have one for Autoindex, and another for the Gallery. I check for the G_STYLE variable in phplugins.php.

I've been working on getting my CRG style done, and it's nearly complete. I just notice it's not working on mobile.

The G_STYLE is set to "CE4-Mobile" not "CE4-CRG"

How do I detect I'm on running the CRG module while on a mobile device?

BTW - the G_STYLE variable is not defined for CRG in the documentation. I had to dig into the code to find it.

rod barbee · 2015-06-17 14:28:56

Have you tried using media queries?

JimR · 2015-06-17 14:34:32

Media queries tell me the screen size but cannot tell which module created the page I'm current on, right?

The basic style I'm overriding has a common name throughout CE4. I had to create custom css for each module to avoid the conflicts.

The problem is both Gallery and CRG are setting G_STYLE to the same variable name. This same line appears in the mobile.php files for both Gallery and CRG:

define( 'TTG_COMP', 'TTG CE4-Mobile 4.0' );

I would expect something like a second variable to know it's the mobile version, or a unique name such as CE4-Gallery-Mobile and then CE4-CRG-Mobile.

Last edited by JimR (2015-06-17 14:44:00)

Matthew · 2015-06-17 15:26:41

Thanks for the heads up; I've updated the PHPlugins documentation to include CRG.

For targeting the CRG mobile gallery specifically, will G_TEMPLATE suffice?
http://ce4.theturninggate.net/docs/doku … album_sets

JimR · 2015-06-18 00:46:34

will G_TEMPLATE suffice

Oh, sweet. That sounds perfect!

Matthew · 2015-06-18 15:22:59

Glad to hear it.

Matthew · 2015-06-18 15:27:08

I'm not presently setup to adequately test this, but I think you could target multiple templates, as follows.

Name all CRG templates beginning with "crg-", and then use G_TEMPLATE to make a partial match:

function ttg_user_function( $style, $path ) { 
    if(G_STYLE == 'CE4-MOBILE' && preg_match('/^crg-(.*)$/', G_TEMPLATE)) {

    // FUNCTION HERE

    }
} // END

JimR · 2015-06-21 07:14:57

Nice tip - thanks. That's good one to document

I only have one CRG template, so the simple test is working.

I do have multiple galleries, but haven't needed custom CSS for a specific gallery. If I do, I'll use your tip.

Community @ The Turning Gate

#1 2015-06-17 14:13:32

custom css for mobile

#2 2015-06-17 14:28:56

Re: custom css for mobile

#3 2015-06-17 14:34:32

Re: custom css for mobile

#4 2015-06-17 15:26:41

Re: custom css for mobile

#5 2015-06-18 00:46:34

Re: custom css for mobile

#6 2015-06-18 15:22:59

Re: custom css for mobile

#7 2015-06-18 15:27:08

Re: custom css for mobile

#8 2015-06-21 07:14:57

Re: custom css for mobile

Board footer