Für Modul Eingabe eine externe CSS Datei Laden

Gesperrt
csandro
Beiträge: 44
Registriert: Mo 30. Jan 2012, 02:25
Kontaktdaten:

Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von csandro » So 23. Dez 2012, 17:03

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
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von Spider IT » So 23. Dez 2012, 19:49

Hallo Sandro,

mach einen Eintrag ins Layout (Style - Layouts).

Gruß
René

csandro
Beiträge: 44
Registriert: Mo 30. Jan 2012, 02:25
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von csandro » Mo 24. Dez 2012, 03:18

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
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von Spider IT » Mo 24. Dez 2012, 10:41

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
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von xmurrix » Mo 24. Dez 2012, 14:45

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
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von Spider IT » Mo 24. Dez 2012, 14:54

Hallo Murat,

das hilft aber auch nicht unter Content - Kategorie.

Gruß
René

Seelauer
Beiträge: 186
Registriert: So 22. Jan 2006, 21:03
Wohnort: Mal da, mal da
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von Seelauer » Mo 24. Dez 2012, 15:07

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 !
Guten Gruß
Seelauer.

xmurrix
Beiträge: 3143
Registriert: Do 21. Okt 2004, 11:08
Wohnort: Augsburg
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von xmurrix » Mo 24. Dez 2012, 15:44

Spider IT hat geschrieben:..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.
CONTENIDO Downloads: CONTENIDO 4.10.1
CONTENIDO Links: Dokumentationsportal, FAQ, API-Dokumentation
CONTENIDO @ Github: CONTENIDO 4.10 - Mit einem Entwicklungszweig (develop-branch), das viele Verbesserungen/Optimierungen erhalten hat und auf Stabilität und Kompatibilität mit PHP 8.0 bis 8.2 getrimmt wurde.

csandro
Beiträge: 44
Registriert: Mo 30. Jan 2012, 02:25
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von csandro » Fr 28. Dez 2012, 17:04

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
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: Für Modul Eingabe eine externe CSS Datei Laden

Beitrag von rethus » Do 19. Mai 2016, 11:40

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
Screenshot_004_20160519.jpg (39.42 KiB) 8224 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>';
}
?>
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

Gesperrt