Für Modul Eingabe eine externe CSS Datei Laden

[csandro]

Hallo,

ich bin gerade dabei ein Modul zu bauen. Nun möchte ich für die Moduleingabe eine eigene CSS Datei laden.

Mit inline Styles möchte ich nicht arbeiten (zu unsauber und viel zu viel Aufwand wenn man was ändern möchte).

Die entsprechende CSS Datei einfach mit @import in die Modul Eingabe importieren ist auch keine saubere Lösung,
da die externe CSS Datei immer im Head geladen werden sollte.

Wie schaffe ich es nun zusätzlich zur contenido.css für das Backend noch eine eigene (meine.css) im Backend
Header zu laden. Sie muss auch nicht Modulabhängig geladen werden, sondern kann wie die contenido.css immer
mitgeladen werden.

Ich benötige allerdings eine Lösung, die auch nach einem Contenido Update erhalten bleibt. Habt Ihr eventuell
eine Idee dazu.

Vielen Dank schon mal

Sandro

----> Ich wünsche allen Frohe Weihnachten und nen Guten Rutsch <------

[Spider IT]

Hallo Sandro,

mach einen Eintrag ins Layout (Style - Layouts).

Gruß
René

[csandro]

Hallo und vielen Dank für die schnelle Antwort.

So funktioniert es leider nicht, da ja im Backend nicht immer mein Layout mit geladen wird.
Wenn ich z.B. auf Kategorien gehe und dort die Konfiguration eines Menüpunkts aufrufe, wird an
dieser Stelle mein Layout ja garnicht abgefragt.

Hast du / Habt ihr eventuell noch eine Idee dazu?


Bis dann

Sandro

[Spider IT]

Nur mal fürs Verständnis: Die contenido.css, die du unter Style - Styles bearbeiten kannst, wird nur und ausschließlich in die Webseite geladen, nicht ins Backend von Contenido.
Das Backend von Contenido wird über ein eigenes Stylesheet formatiert, das liegt in /contenido/styles/contenido.css.
Das kannst du aber nicht upgradesicher bearbeiten, und das gilt auch für Stellen wo das eingebunden ist, denn das Backend wird beim Upgrade überschrieben (beim Hochladen werden die Dateien überschrieben).

Gruß
René

[xmurrix]

Hallo Sandro,

du kannst im Layout des Mandanten eine zusätzliche CSS einbinden, wenn das Frontend im Backend bearbeitet wird, z. B. mit folgendem Code im head-Tag:

Code: Alles auswählen

<?php if (!empty($contenido) && !empty($edit)) : ?>
<link rel="stylesheet" type="text/css" href="css/myStyles.css" />
<?php endif; ?>

Das fügt die CSS-Datei aus dem Mandantenordner (cms/css/) ein, wenn die Seite im Backend im Editiermodus angezeigt wird.

Es kann sein, dass die CONTENIDO eigene CSS-Datei danach eingebunden wird, ich weiß das jetzt nicht auswendig, dann müsstest du mit !important Deklarationen in deiner CSS arbeiten...

Gruß
xmurrix

[Spider IT]

Hallo Murat,

das hilft aber auch nicht unter Content - Kategorie.

Gruß
René

[Seelauer]

Hallo,
meine Vorgehensweise:
Ich ergänze nach Bedarf die contenido/styles/contenido.css. Speichere die Ergänzungen dazu extern ab. Bei einem Update muss ich halt die Ergänzungen am Ende der contenido/styles/contenido.css wieder anhängen. Zwei Minuten Arbeit (für das Erneuern nach einem Update).
Ein schönes Weihnachtsfest !

[xmurrix]

..das hilft aber auch nicht unter Content - Kategorie...

Stimmt, dort hilft es nicht. Da kann so wie Seelauer (http://forum.contenido.org/viewtopic.ph ... 81#p156263) es macht, verfahren.

Und es besteht immer die Gefahr, dass nach einem Update etwas nicht passt. Es kommt zwar selten vor aber dennoch ist es nicht unwahrscheinlich, dass sich im Backend etwas ändert (IDs, CSS Klassen-Namen der Elemente). Nach einem Update sollte man dann seine eigenen CSS-Formate immer prüfen.

[csandro]

Hallo,

nun bin ich aus den Feiertagen wieder zurück und habe gesehen, dass ja zu meiner Anfrage
einiges geschrieben wurde. Vielen Dank schon mal für die Lösungsvorschläge.

Ich werde es jetzt wie Vorgeschlagen einfach mit @import in die contenido.css einbinden.

Kann man das nicht irgendwie in die Entwicklung von Contenido einfließen lassen, dass
man eine eigene zusätzliche Backend css Datei hinzufügen kann?

Der Code würde so von jedem Modul viel übersichtlicher sein, denn man kann seine Styles
dann einfach auslagern.

Vielen lieben Dank nochmal an euch.

Bis dann

Sandro

[rethus]

Ich hatte mal ein Modul, bei dem ich dann in der Artikel-Konfiguration via Checkbox wählen konnte, welches Stylesheet für diesen Artikel aktiviert sein soll.
Sinn und zweck war, dass man eigene CSS-Files hinzunehmen kann, dies aber Artikelabhängig, damit man den CSS-Overhead vermeiden kann.

Es war mal für 4.8 entwickelt, hatte aber soweit ich mich erinnere noch ein paar Kinderkrankheiten (sortierreihenfolge der css usw.).
Sah dann in den Artikeleinstellungen so aus:

Screenshot_004_20160519.jpg (39.42 KiB) 9784 mal betrachtet

Eingebunden wurde das Modul einfach via Modul-Container in den Head-Bereich des Layouts.

Wer mag kann es gerne nutzen, und auf 4.9 portieren und hier natürlich teilen.

Modulname: xst_cssJsLoader

Code: Alles auswählen

Autor:   Samuel Suther <www.xstable.de>
Version: 0.1.0
Description:
Modul lädt CSS oder JS-Dateien nur für den aktuellen Artikel nach.
Dateien welche _hide_ im Dateinamen enthalten werden nicht in der Checkbox-Liste dargestellt. (damit keine doppelte Verlinkung für Standard-Files besteht)

Modulinput:

Code: Alles auswählen

?><?php/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname  :      xst_cssJsLoader
* Author(s)   :     Samuel Suther
* Copyright   :     Suther Kommunikationsdesign
* Created     :     15.03.2011
************************************************/
?>
<?php
cInclude("includes", "functions.general.php");
rereadClients();
$cols =3;

echo "<script type='text/javascript' src='".$cfg['path']['contenido_fullhtml'].$cfg['path']['scripts']."jquery/jquery.js'></script>";
?>
<script type="text/javascript">
<!-- //
$(document).ready(function(){
  $('#chooseCss input[type="checkbox"]').click(function(){
      var s = "";
      $('#chooseCss input:checked').each(function(){
          s+= $(this).next().text() + ",";
      });
      $('#choosedCss').val(s);
  });
  $('#chooseJs input[type="checkbox"]').click(function(){
      var s = "";
      $('#chooseJs input:checked').each(function(){
          s+= $(this).next().text() + ",";
      });
      $('#choosedJs').val(s);
  });
});
// -->
</script>
<table border="0">
<tr><th style="border-bottom:1px solid orange">zus&auml;tzliche CSS-Files w&auml;hlen</th></tr>
    <tr>
    <td id="chooseCss">
<?php
$i=1000;
$cssPath  = $cfgClient[$client]['css']['path'];
$cssFiles = scanDirectory($cssPath);
sort($cssFiles);

foreach($cssFiles as $key => $val){
   $y=$i-1;
   $cssFileName = str_replace($cssPath, "", $val);
   $cssWebPath = $cfgClient[$y]['path']['htmlpath']."/$cssFileName";
   
   if("CMS_VALUE[$y]"== "chkd")$checked="checked"; else $checked="";

   if(!strstr($cssFileName, "index") && !strstr($cssFileName, "_hide_")){
      echo "<div style='float:left; width:200px; overflow: auto'>
             <input type=checkbox id='chkbox$i' $checked name='CMS_VAR[$y]' value='chkd'><span>$cssFileName</span>
            </div>";
      if( (($i%$cols)==0)) echo "<p style='clear:both'></p>";
      $i++;
   }
}
?>
             <input type="hidden" name="CMS_VAR[100000]" id="choosedCss" value="CMS_VALUE[100000]">
        </td>
    </tr>
<tr><td>&nbsp;</td></tr>
<tr><th style="border-bottom:1px solid orange">zus&auml;tzliche JS-Files w&auml;hlen</th></tr>
    <tr>
    <td id="chooseJs">
<?php
$i=2000;
$jsPath  = $cfgClient[$client]['js']['path'];
$jsFiles = scanDirectory($jsPath);
sort($jsFiles);

foreach($jsFiles as $key => $val){
   $y=$i-1;
   $jsFileName = str_replace($jsPath, "", $val);
   $jsWebPath = $cfgClient[$y]['path']['htmlpath']."/$jsFileName";
   
   if("CMS_VALUE[$y]"== "chkd")$checked="checked"; else $checked="";

   if(!strstr($jsFileName, "index") && !strstr($cssFileName, "_hide_")){
      echo "<div style='float:left; width:200px; overflow: auto'>
             <input type=checkbox id='chkbox$i' $checked name='CMS_VAR[$y]' value='chkd'><span>$jsFileName</span>
            </div>";
      if( (($i%$cols)==0)) echo "<p style='clear:both'></p>";
      $i++;
   }
}
?>
             <input type="hidden" name="CMS_VAR[200000]" id="choosedJs" value="CMS_VALUE[200000]">
        </td>
    </tr>
</table>
<?php

Moduloutput:

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname  :      xst_cssJsLoader
* Author(s)   :     Samuel Suther
* Copyright   :     Suther Kommunikationsdesign
* Created     :     15.03.2011
************************************************/
$getCss = "CMS_VALUE[100000]";
$choosedCss = explode(",",$getCss);

foreach($choosedCss as $val){
    if(!empty($val))
        echo '<link href="css/'.$val.'" rel="stylesheet" type="text/css"></link>';
}

$getJs = "CMS_VALUE[200000]";
$choosedJs = explode(",",$getJs);

foreach($choosedJs as $val){
    if(!empty($val))
        echo '<script src="js/'.$val.'" type="text/javascript"></script>';
}
?>