Load diff css / js files for plugin or module based on lang

[afforever]

after searching this forum i couldn't find a solution which is that i want to load a different css or javascript file for a specific module or plugin based on the language selected. So far this worked for the language direction only

Code: Select all

$lang = JFactory::getLanguage();
if ($lang->isRTL()) {
JHtml::_('stylesheet', 'mod_mymodule/css/mycss.css', array(), true);
JHtml::_('script', mod_mymodule/js/myjs.js', true, true);
}

it works perfectly for the language direction but not for a specific language. Right now i have two different rtl languages each having different settings.

also if you could tell me how to get the above working with the relative urls as it is written in the code. I got it working only after putting the absolute urls for example http://domain.com/system/plugins/css/mycss.css

thanks

Ref: http://forum.joomla.org/viewtopic.php?f=617&t=708971

[infograf768]

after searching this forum i couldn't find a solution which is that i want to load a different css or javascript file for a specific module or plugin based on the language selected. So far this worked for the language direction only

Code: Select all

$lang = JFactory::getLanguage();
if ($lang->isRTL()) {
JHtml::_('stylesheet', 'mod_mymodule/css/mycss.css', array(), true);
JHtml::_('script', mod_mymodule/js/myjs.js', true, true);
}

it works perfectly for the language direction but not for a specific language. Right now i have two different rtl languages each having different settings.

Use this type of code:

Code: Select all

$lang = JFactory::getLanguage();
if ($lang->getTag() == 'en-GB') {
whatever code
} else {
etc.

also if you could tell me how to get the above working with the relative urls as it is written in the code. I got it working only after putting the absolute urls for example http://domain.com/system/plugins/css/mycss.css

As I explained, this code

Code: Select all

JHtml::_('stylesheet', 'mod_mymodule/css/mycss.css', array(), true);
JHtml::_('script', mod_mymodule/js/myjs.js', true, true);

will work fine IF the files are present in
ROOT/media/mod_mymodule/css/mycss.css
ROOT/media/mod_mymodule/js/myjs.js

Another possible code would be:

Code: Select all

$doc = JFactory::getDocument();
$doc->addScript(JURI::base().'../media/mod_mymodule/css/mycss.css');
$doc->addScript(JURI::base().'../media/mod_mymodule/js/myjs.js');

For a plugin, you may want to first make sure that one is in the right application:

Code: Select all

$app = JFactory::getApplication();
if ($app->isSite()) {
etc.

This means that you have to add in your module or plugin xml, after <files></files> and depending on your needs

Code: Select all

<media destination="mod_mymodule" folder="media">
		<filename>index.html</filename>
		<folder>css</folder> <!-- Note: if needed -->
		<folder>images</folder> <!-- Note: if needed -->
		<folder>js</folder> <!-- Note: if needed -->
</media>

[afforever]

thank you infograf... that is exactly what i was looking for.. much appreciated..

[jdran]

I feel this php code serves best my problem I had with my website's name and tagline positioning in each language as described in this post:

http://forum.joomla.org/viewtopic.php?f=629&t=753361

However, I am not sure yet for what I have to edit in my template's index.php.

Code: Select all

$lang = JFactory::getLanguage();
if ($lang->getTag() == 'el-GR') {
JHtml::_('stylesheet', 'myTemplate/css/mySecondcss.css', array(), true);
} else {
*what here?*
}

Where "mySecondcss.css" is a simple css which just locates the desired Greek tagline (or also the Site's name) adding some padding to place it in the right position. (or should I include the whole rest style as well?).

if the code above is correct, what do I have to put after }else{ ?

Any reply deeply appreciated..

[infograf768]

Test by yourself as the results may depend on the way the css are loaded in your template. but try first adding only the necessary chnages in mySecondcss.css.

No need for an else if this works

[jdran]

Well, I tried but I couldn't find a solution.

This is the code:

Code: Select all

<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
//get params
$tagline = $this->params->get('sitedescription');
JFactory::getDocument()->setGenerator('');
$lang = JFactory::getLanguage();
if ($lang->getTag() == 'el-GR') {
  JHtml::_('stylesheet', 'tdg/css/mySecondcss.css', array(), true);
}
  
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/cleanstickyfooter.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
</head>

<body>
    <div class="header">
      <div class="logo">
         <a href="index.php" title="Logo">
            <img class="badge" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/logo.png" width="100px" height="100px" title="logo" alt="The logo" />
         </a>
            <div class="spec">
          
               <div class="sitename">
                  <?php echo $app->getCfg('sitename');?>
               </div><!--/sitename-->
      
               <div class='tagline'>
                 <?php echo $tagline; ?>
               </div><!--/tagline-->
            </div><!--/spec-->
      </div><!--/logo-->
       
  </div><!--/header-->

What I wanted to do is to have a different css in each language for the <spec> and only. That's why I asked what do I have to put after "else".
The problem is that I don't know how to substitute the "default.css" for the case that Greek language is turned on. I even tried different forms of the code JHTML::_ but it didn't seem to trigger anything.

[infograf768]

1. In which .css file are the original classes you want to override?
2. Do you need to do these changes only for Greek or also some other languages? In this case which ones?
3. When you look at the source of the page, what do you see in the header part (copy/paste here) ?

[jdran]

1) In default.css
2) Only for Greek (however, I am curious if a different kind of code is needed for more languages / just for educational purpose. Only if it is not time consuming.)
3) I had edited some lines from the code posted previously, but I leave them intact here (except few unimportant exceptions):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="el-gr" lang="el-gr" >
<head>
  <base href="http://www.siteexample.com/el/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="keyword examples" />
  <meta name="description" content="description example" />
  <title>Website title</title>
  <link href="/el/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/el/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="http://www.siteexample.com/en/" rel="alternate" hreflang="en-GB" />
  <link href="/templates/tdg/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/plugins/system/jcemediabox/css/jcemediabox.css?version=114" type="text/css" />
  <link rel="stylesheet" href="/plugins/system/jcemediabox/themes/standard/css/style.css?version=114" type="text/css" />
  <link rel="stylesheet" href="/modules/mod_lofarticlesslideshow/assets/jstyle.css" type="text/css" />
  <link rel="stylesheet" href="/media/mod_languages/css/template.css" type="text/css" />
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/plugins/system/jcemediabox/js/jcemediabox.js?version=114" type="text/javascript"></script>
  <script src="/modules/mod_lofarticlesslideshow/assets/jscript.js" type="text/javascript"></script>
  <script type="text/javascript"> edited / deleted </script>
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/cleanstickyfooter.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/default.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/greek.css" type="text/css" /> (**EDITED&ADDED**)

<meta name="msvalidate.01" content="deleted" />
<script type="text/javascript"> GA snippet </script>
</head>

[infograf768]

The header in the source is not the body.
Example:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
  <base href="http://localhost:8888/multifr/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="generator" content="Joomla! - Open Source Content Management" />
  <title>**Home - multi**</title>
  <link href="/multifr/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/multifr/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="http://localhost:8888/multifr/nl/" rel="alternate" hreflang="nl-NL" />

  <link href="http://localhost:8888/multifr/fr/" rel="alternate" hreflang="fr-FR" />
  <link href="http://localhost:8888/multifr/it/" rel="alternate" hreflang="it-IT" />
  <link href="http://localhost:8888/multifr/es/" rel="alternate" hreflang="es-ES" />
  <link href="http://localhost:8888/multifr/mk/" rel="alternate" hreflang="mk-MK" />
  <link href="http://localhost:8888/multifr/ta/" rel="alternate" hreflang="ta-IN" />
  <link href="/multifr/templates/beez_20/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link href="http://localhost:8888/multifr/component/search/?format=opensearch" rel="search" title="**Search** multi" type="application/opensearchdescription+xml" />
  <link rel="stylesheet" href="/multifr/media/cms/css/debug.css" type="text/css" />
  <link rel="stylesheet" href="/multifr/templates/system/css/system.css" type="text/css" />

  <link rel="stylesheet" href="/multifr/templates/beez_20/css/position.css" type="text/css" media="screen,projection"  />
  <link rel="stylesheet" href="/multifr/templates/beez_20/css/layout.css" type="text/css" media="screen,projection"  />
  <link rel="stylesheet" href="/multifr/templates/beez_20/css/print.css" type="text/css" media="print"  />
  <link rel="stylesheet" href="/multifr/templates/beez_20/css/general.css" type="text/css" />
  <link rel="stylesheet" href="/multifr/templates/beez_20/css/general_mozilla.css" type="text/css" />
  <link rel="stylesheet" href="/multifr/templates/beez_20/css/personal.css" type="text/css" />
  <link rel="stylesheet" href="/multifr/media/mod_languages/css/template.css" type="text/css" />
  <script src="/multifr/media/system/js/mootools-core-uncompressed.js" type="text/javascript"></script>

  <script src="/multifr/media/system/js/core-uncompressed.js" type="text/javascript"></script>
  <script src="/multifr/media/system/js/caption-uncompressed.js" type="text/javascript"></script>
  <script src="/multifr/media/system/js/mootools-more-uncompressed.js" type="text/javascript"></script>
  <script src="/multifr/templates/beez_20/javascript/md_stylechanger.js" type="text/javascript"></script>
  <script src="/multifr/templates/beez_20/javascript/hide.js" type="text/javascript"></script>
  <script type="text/javascript">
[...]

I am asking this to know in which order are loading the css file on your settings.
So please, add your css for Greek as suggested above and then copy the head here.
If the Greek css is loading before the css you want to override, then another code is necessary than the one I suggested.

[jdran]

You are right, I don't know why I misunderstood.
I edited my previous post.

Also I realized that I had forgotten to add the greek.css. After I did, I saw the greek.css overrides but this stylesheet doesn't affect only the desired language (greek) but both languages (=the english version as well).

The code is as I posted it in four posts ago:

Code: Select all

$lang = JFactory::getLanguage();
if ($lang->getTag() == 'el-GR') {
JHtml::_('stylesheet', 'tdg/css/greek.css', array(), true);
}

[infograf768]

switch your site to English and post here the source <head> of it

[jdran]

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
  <base href="http://siteexample.com/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="english keywords" />
  <meta name="description" content="eng description" />
  <title>Site title eng</title>
  <link href="/?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="http://siteexample.com" rel="alternate" hreflang="el-GR" />
  <link href="/templates/tdg/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
  <link rel="stylesheet" href="/plugins/system/jcemediabox/css/jcemediabox.css?version=114" type="text/css" />
  <link rel="stylesheet" href="/plugins/system/jcemediabox/themes/standard/css/style.css?version=114" type="text/css" />
  <link rel="stylesheet" href="/modules/mod_lofarticlesslideshow/assets/jstyle.css" type="text/css" />
  <link rel="stylesheet" href="/media/mod_languages/css/template.css" type="text/css" />
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
  <script src="/media/system/js/core.js" type="text/javascript"></script>
  <script src="/media/system/js/caption.js" type="text/javascript"></script>
  <script src="/plugins/system/jcemediabox/js/jcemediabox.js?version=114" type="text/javascript"></script>
  <script src="/modules/mod_lofarticlesslideshow/assets/jscript.js" type="text/javascript"></script>
  <script type="text/javascript">edited / deleted  </script>

<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/cleanstickyfooter.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/default.css" type="text/css" />
<link rel="stylesheet" href="/templates/tdg/css/greek.css" type="text/css" />

</head>

Thank you very much for your patience, I m really thankful.
I sent you a pm with the website just to aid you not spend a lot of time. I will, later, post any findings to help other users, and the community in general, with the same problem.

[infograf768]

replied to your mail

You have an extraneous
<link rel="stylesheet" href="/templates/tdg/css/greek.css" type="text/css" />

that will evidently load whatever the language.

[jdran]

I removed this line you told me and now the code doesn't have any effect in any language..

Code: Select all

<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
//get params
$tagline = $this->params->get('sitedescription');
JFactory::getDocument()->setGenerator('');

$lang = JFactory::getLanguage();
if ($lang->getTag() == 'el-GR') {
JHtml::_('stylesheet', 'tdg/css/greek.css', array(), true);
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/cleanstickyfooter.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/default.css" type="text/css" />
<!--<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/greek.css" type="text/css" />-->
</head>

I suspect that the code is either not the right one or it can't reach my css template folder (root>templates>tdg>css>greek.css).
I am not sure whether the code provided ($lang->getTag() == 'el_GR')...etc..} is capable to substitute the default.css for the greek.css or not.. (even though it would be better if the greek.css included rules only for the desirable changes and affected it for the greek language/template, leaving the rest intact for both languages/templates.)

[infograf768]

The code suggested should ONLY provide the necessary changes for el_GR, i.e in your greek css you should add only the changed classes.

[jdran]

I m certainly missing something here. I did all things you suggested but also tried on my own some options. I can't trigger any change in greek language. I sent you a pm, I 'd be glad for a reply. Thanks.

[jdran]

Infograf, is there anything I can do to solve it myself at least? I wouldn't want to bother you further, but I need to find the solution. Is there any documentation? Thank you very much.

[hendrik1979]

what solution......

[jdran]

What I was trying to do (and haven't solved it yet) was to give different positions through css for two hardcoded divs regarding the language was viewed.

To do that I needed to give a php code (the solution needed) which said:
If the language is English, use default.css
else use the greek.css.

The solutions that infograf gave me were on the right direction, but neither of them was working for an unknown reason.. Probably it is the path, or the code itself. I do not know..

[arvincandaruma]

hey guys,

where do you get this line in joomla 2.5

$lang = JFactory::getLanguage();
if ($lang->isRTL()) {
JHtml::_('stylesheet', 'mod_mymodule/css/mycss.css', array(), true);
JHtml::_('script', mod_mymodule/js/myjs.js', true, true);
}

i want to see what css my site is using when I change the language, because it's loading different style when I changed and I cannot see it in mozzilla. thanks

[infograf768]

That kind of code should be added in the module view if needed for the module.

To find which css is used on a site when changing language or else, just install Firebug on Firefox

[arvincandaruma]

yeah, i use firebug but I only see the personal.css, anyway got it sorted. thanks anyway.

[pradvk]

try using
<link rel="stylesheet" href="<?php echo JURI::root();?>/media/css/style.css" type="text/css" />


it works for me

[joay]

I am on a project and this code could be helpful for me.

[setx]

In Joomla 2.5, the scripts below are loaded automatically.

Code: Select all

<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/templates/pswedge/js/jquery.min.js" type="text/javascript" defer="defer"></script>

I don't want to load these files. How can I remove these links?

[infograf768]

One of them is loaded by your template

Code: Select all

<script src="/templates/pswedge/js/jquery.min.js" type="text/javascript" defer="defer"></script>

So it's easy to change, depending on what type of template you use.
The others are loaded by Joomla as they are necessary for J to work properly.
This is hardcoded in core.

[infograf768]

Use the Firebug extension in Firefox to know what is loaded and when.

The site in your signature is not a Joomla site.

[pishro]

hi!
how i can add custom fonts language, CSS and JavaScript files to my template based on the Warp Framework ?

[triveni1231]

I want to add few custom fonts.

Triveni

[telme]

hi!
how i can add custom fonts language, CSS and JavaScript files to my template based on the Warp Framework ?

If you need to load custom CSS and JavaScript files, this is where you do it.

If you create a theme style and want to add some new assets, you can override the default template.config.php file. Just copy /layouts/template.config.php to /styles/YOUR_STYLE/layouts/template.config.php.