I need some help on the mobile plugin (css+js include)

[ties]

Hello

Im stuck on how to do this, i'm extending plugins but they require js and css. And because a mobile page doesn't include all other features of the full page it seems useless to me to include all the css and js of current active plugins. I got these solutions but they all don't really do what i want:
I could do a header_include_raw, my current favorite but it'll make a lot of requests for all the mini-css files

OR:

I could write my own includeMobileCss /Js function but it's a lot of work and the i need to know what function is use to compress the css

OR:

or i have to find a way to clear the css/js file and then add the mobile stuff

Can anyone help me with a deciding? or maybe have a better solution?
Bye, and thanks
Ties

[Nick]

Hmmm... let's think. The header_include hook is the one that includes all the css/js files. That hook is in the function called from doIncludes, found in a theme's header.php file:

    <!-- Include merged files for all the plugin css and javascript (if any) -->
    <?php $h->doIncludes(); ?>
    <!-- End -->

Does the Mobile plugin provide it's own theme? If not, how about overriding the user's header.php with your own? You can do that with the theme_index_header hook:

public function theme_index_header($h) {
    $h->displayTemplate('mobile_header');
    return true; // important to prevent the usual header.php template from being used
} 

Then you can put whatever you like in your own header template, and users can customize it just like any other template.

An alternative possibility, though not very efficient, would be to do

$h->clearCache('css_js_cache', false); // false simply prevents the "Cache cleared" message from showing. 

The best place to do that would be in the header_include_raw hook because it comes after header_include so you can be sure all merged css/js (including your own!) will be cleared.

To help me understand the problem better, let me ask you this: Do you want CSS and JS from other plugins to be included in a mobile theme always, sometimes or never? I might have some more ideas depending on your answer!

[ties]

hmm its alot to take but i asked for it
I want them to be never included
I'll explain in sort of detail how the plugin works
step 1 :

theme_index_top triggered for detection of mobile device (to redirect) / url is already mobile
then the all-in-one 'template' is triggered (which is basicly a sum of all the mobileHooks

step 2 :
the mobileHooks are triggered one by one to fill the page with content

i dont use any plugin hooks in the theme to prevent content to be W3C mobile incompatible as i dont use the pluginHooks it would make no sense to me to include all the scripts and css so my header currently exists of :
$h->pluginHook('mobile_hook','mobile',array('mobile_head_start'));
$h->pluginHook('mobile_hook','mobile',array('mobile_head'));
$h->pluginHook('mobile_hook','mobile',array('mobile_head_end'));

the advantage is that i can still add plugin hook to the theme like header_include_raw and doInclude (not really one but you get the point)
but if i do use a pluginhook it will automatically get scripts so header_include_raw is useless in my eyes
doIncludes would be a great options if i can remove any items from the list
so i think im going with te custom function
before $h->pluginHook('mobile_hook','mobile',array('mobile_head_end')); is triggered i'll add:

<link rel="stylesheet" type="text/css" href=" BASEURL . ?client=mobile&type=css" />

to get all the independant css files (like mobile_sb_base.css) which can be overriden by a THEME/css/mobile_sb_base.css and compress them with a custom function like this one:

 header('Content-type: text/css');
  ob_start("compress");
  function compress($buffer) {
    /* remove comments */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    return $buffer;
  }

  /* your css files */
  include('master.css');
  include('typography.css');
  include('grid.css');
  include('print.css');
  include('handheld.css');

  ob_end_flush();

[ties]

there is always

<style type="text/css">
  @import url("import1.css");
  @import url "import2.css";
</style>

is a creator wants extra styles

[leneo34]

Is there a way to change the color of the link on top that says 'Login'... for now its yellow and I'm trying to change the basic colors to fit the full version of the site. I managed to change the color of the main title but I cant find the css for the login link color.