Das deutsche Python-Forum

Hallo Allerseits!

Ich habe mir ein Main-Template geschrieben, welches das Standard-css plone_Custom.css und ein eigenes km.css benutzen soll. Ist das überhaupt möglich und wenn ja, wie?

Mein Template beginnt wie folgt:

Code: Alles auswählen

<div metal:define-macro="main">
	<html
	    xmlns="http://www.w3.org/1999/xhtml"
	    xml:lang="en-US"
	    lang="en-US"
	    i18n:domain="afv"
	    metal:use-macro="here/main_template/macros/master"
	>
	<head>
	  <title tal:content="template/title">The title</title>
	</head>
	<body>

  <metal:cssslot fill-slot="css_slot">
    <link
      rel="stylesheet"
      href=""
      tal:attributes="href string: context/km.css" />
  </metal:cssslot>

	<div metal:fill-slot="content">

	  <tal:variablen tal:omit-tag="" tal:define="
	    Arbeitsbereich python: request.get('AB', 'hfb');
      klasse python: {True : 'selected', False : ''};
	  ">
      <!-- GRÜNER RAHMEN -->
	    <div id="content" class="documentEditable">

Im Verzeichnis, in welchem das Template liegt, habe ich als DTML-Method das Stylesheet km.css liegen, doch leider wirkt es nicht!

Sieht jemand meinen Fehler?

Ich benötige zwei Stylesheets, weil ich im Portal eine Webanwendung schreibe, welche einige Standards des Portallayouts verwenden soll und wiederum ein eigenes Stylesheet aufgesetzt bekommen soll.

Ich hoffe ein Erfahrener hat eine Idee!

Danke schon mal im Voraus und viele liebe Grüße
JR

JR hat geschrieben:

Code: Alles auswählen

  <metal:cssslot fill-slot="css_slot">
    <link
      rel="stylesheet"
      href=""
      tal:attributes="href string: context/km.css" />
  </metal:cssslot>

Sieht jemand meinen Fehler?

Hi JR

Bei Plone sieht das zum Beispiel so aus:

Code: Alles auswählen

<style type="text/css" 
       media="all"
       tal:content="string:@import url(${context/km.css/absolute_url});"
></style>

Dein Beispiel würde ich abändern, da ich einen kleinen Fehler gesehen habe:

Code: Alles auswählen

<metal:cssslot fill-slot="css_slot">
  <link rel="stylesheet"
        href=""
        tal:attributes="href context/km.css/absolute_url" 
  />
</metal:cssslot>

Wenn du aber Plone 2.1.2 einsetzt dann würde ich die Stylesheets einfach nur in die "CSS Registry" (=portal_css) eintragen. Unterhalb von "ploneCustom.css". Damit wird dein CSS automatisch verwendet.

Falls du dir ein eigenes Produkt schreibst, dann kannst du dein Stylesheet vom QuickInstaller hinzufügen lassen. Dafür brauchst du nur folgenden Code in dein "Extensions/install.py" eintragen (leicht abgeändert natürlich):

Code: Alles auswählen

    # Stylesheet registrieren
    from Products.CMFCore.utils import getToolByName

    css = getToolByName(self, "portal_css")
    css.registerStylesheet(
        "KaKleinanzeiger.css", 
        expression='', 
        media='all',
        rel='stylesheet', 
        title='', 
        rendering='import',
        enabled=True, 
        cookable=True
    )

Ich weiß jetzt nicht ob ich an alles gedacht habe. Schreib einfach, falls es noch ein Problem gibt.

lg
Gerold

Hi Gerold!

Erst einmal vielen Dank für deine Mühe, aber leider klappt es noch nicht.

Ich habe mal ein Beispielversuch:

In einem Ploneordner habe ich übers ZMI ein PageTemplate mit dem Namen test_pt und eine DTML Method mit dem Namen test.css angelegt.

Lass dich vom Code nicht erschrecken. Der zweite Teil ist einfach das Stylesheet ploneCustom.css mit einer Layoutdefinition für einen p-tag.
Leider klappt mein Beispiel nicht. Der Text wird einfach nicht groß und fett dargestellt.

Vielleicht ist es ja ein simpler Fehler...

Grüße dich
JR (Jamil)

Code test_pt :

Code: Alles auswählen

<div metal:define-macro="main">
	<html
	    xmlns="http://www.w3.org/1999/xhtml"
	    xml:lang="en-US"
	    lang="en-US"
	    i18n:domain="afv"
	    metal:use-macro="here/main_template/macros/master"
	>
	<head>
	  <title tal:content="template/title">The title</title>
	</head>
	<body>

	<metal:cssslot fill-slot="css_slot">
	  <link rel="stylesheet"
	        href=""
	        tal:attributes="href context/test.css/absolute_url"
	  />
	</metal:cssslot>

	<div metal:fill-slot="content">
  	<p>Test in großer fetter Schrift</p>
  </div> <!-- ENDE <div metal:fill-slot="content"> -->
  </body>
  </html>
</div>

Code test.css :

Code: Alles auswählen

<hr noshade size="1">/*
 *  This is the file where you put your CSS changes.
 *  You should preferrably use this and override the
 *  relevant properties you want to change here instead
 *  of customizing plone.css to survive upgrades. Writing
 *  your own plone.css only makes sense for very heavy
 *  customizations. Useful variables from Plone are
 *  documented at the bottom of this file.
 */

/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

p {font-size:30px; font-weight:bold;}



/* </dtml-with> */

/* DOCUMENTATION ON PRE-DEFINED PROPERTIES FROM PLONE */

 /* You can insert colors and other variables from Plone's
    base_properties by doing:

    & dtml-variableName ; (without the spaces, excluded here to not make it render)

    Example:

    myLink {
        color: & dtml-fontColor ;   (again, without the spaces)
    }

   This means you can generate your own elements that use Plone's defaults,
   and respect any customizations people have done. See base_properties for
   the default values.

   These are the available properties:

   logoName - the file name of the portal logo

   fontFamily - the font family used for all text that is not headers

   fontBaseSize - the base font size that everything is calculated from

   fontColor - the main font color

   fontSmallSize - used for various elements like buttons and discreet text

   discreetColor - the font color of discreet text

   backgroundColor - the background color

   linkColor - the color used on normal links

   linkActiveColor - color used on active links

   linkVisitedColor - color used on visited links

   borderWidth - the width of most borders in Plone

   borderStyle - the style of the border lines, normally solid

   borderStyleAnnotations - style of border lines on comments etc

   globalBorderColor - the border color used on the main tabs, the portlets etc

   globalBackgroundColor - background color for the selected tabs, portlet headings etc

   globalFontColor - the color of the font in the tabs and in portlet headings

   headingFontFamily - font family for h1/h2/h3/h4/h5/h6 headlines

   contentViewBorderColor - the content view tabs border color

   contentViewBackgroundColor - the content view tabs background color

   contentViewFontColor - the font color used in the content view tabs

   inputFontColor - the font color used for input elements

   textTransform - whether to lowercase text in portlets, tabs etc.

   evenRowBackgroundColor - the background color of even rows in listings

   oddRowBackgroundColor - the background color of even rows in listings

   notifyBorderColor - border color of notification elements like the status message, the calendar focus

   notifyBackgroundColor - background color of notification elements like the status message, the calendar focus

   helpBackgroundColor - background color of information pop-ups (currently not used)

 */

JR hat geschrieben:Ich habe mal ein Beispielversuch:

Hi Jamil!

Verzeihe, aber aus deinem Beispielcode werde ich nicht schlau. Da sind zu viele ungereimtheiten drinnen. Am Anfang taucht schon die erste Frage auf: Soll dein Beispielcode, vom ersten Beitrag, eine "main_template" oder irgendeine andere Seitenvorlage sein? Wenn das die "main_template" ist, dann kann schon mal nichts funktionieren.

Deshalb habe ich hier mal eine funktionierende "main_template", von der ich alles unnötige entfernt habe. Es werden aber trotzdem noch die Stylesheets und Javascripts usw. so importiert wie es von Plone 2.1.2 vorgesehen ist.

main_template:

Code: Alles auswählen

<metal:page define-macro="master"><metal:doctype define-slot="doctype"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></metal:doctype>
<metal:block use-macro="here/global_defines/macros/defines" />
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en"
      tal:attributes="lang language;
                      xml:lang language"
>
<head metal:use-macro="here/header/macros/html_header">

  <metal:fillbase fill-slot="base">
    <metal:baseslot define-slot="base">
      <base href="" tal:attributes="href here/renderBase" />
    </metal:baseslot>
  </metal:fillbase>

  <metal:headslot fill-slot="head_slot"
                  tal:define="lang language;
                              charset site_properties/default_charset|string:utf-8"
  >
    <metal:cache use-macro="here/global_cache_settings/macros/cacheheaders">
      Get the global cache headers located in global_cache_settings.
    </metal:cache>

    <metal:headslot define-slot="head_slot" />
  </metal:headslot>

  <metal:cssslot fill-slot="css_slot">
    <tal:comment replace="nothing"> A slot where you can insert CSS in the header from a template </tal:comment>
    <metal:cssslot define-slot="css_slot" />
  </metal:cssslot>

</head>

<body tal:attributes="class here/getSectionFromURL;
                      dir python:test(isRTL, 'rtl', 'ltr')"
>

  <metal:bodytext metal:define-slot="main" tal:content="nothing">
    Page body text
  </metal:bodytext>

</body>
</html>
</metal:page>

Jetzt speichere ich das mal ab. Im nächsten Beitrag zeige ich eine Seitenvorlage, die auf diese "main_template" zugreift und den Slot "main" befüllt.

lg
Gerold

Diese Seitenvorlage ruft das Makro "master" der Seitenvorlage "main_template" auf und befüllt den "main"-Slot. Um die Stylesheets braucht man sich hier drinnen nicht mehr kümmern, da diese von der "main_template" importiert werden. Sie müssen vorher natürlich in die "CSS Registry" eingetragen werden.

testseite:

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="plone">
<body>

<metal:main fill-slot="main">

  <h1>Title or id</h1>

  <p>
     Das ist die perfekte Welle.
     Das ist der perfekte Tag.
  </p>

</metal:main>

</body>
</html>

lg
Gerold

Hi Gerold!

Den Code test_pt habe ich stark gekürzt, aber er funktioniert doch!?
Ich verwende das main_template unter plone_skins/plone_templates
und fülle unter anderem den slot "content".

Mein Versuch den slot "cssslot" mit eigenem css-Code zu füllen, misslang leider.

Mein eigentliches Template sieht schon etwas schöner aus, mit content-tabs etc.
Ich dachte nur, dass es für das Beispiel nicht nötig ist, um die Übersicht zu wahren...

Bis später
Jamil

Ähm, wo finde ich die CSS-Registry. Komme ich da übers ZMI innerhalb der Portalebene heran oder ist Pythoncode nötig, wie du ihn oben angegeben hast?

Jamil

Ich dachte nur, dass es für das Beispiel nicht nötig ist, um die Übersicht zu wahren...

Hi Jamil!

Das Problem ist, dass du in deinem Beispiel ein Makro "main" definierst, dass in der Content-Seite keinen Sinn ergibt. Deshalb tritt ein wenig Verwirrung auf. Aber hier noch ein Beispiel mit dem Befüllen des CSS-Slots, was aber bedingt, dass dieser Slot nicht aus der "main_template" entfernt wurde.

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      lang="en"
      metal:use-macro="here/main_template/macros/master"
      i18n:domain="plone">
<head>

  <metal:cssslot fill-slot="css_slot">
    <style type="text/css"
           media="all"
           tal:content="string:@import url(${context/hallo.css/absolute_url});"
    ></style>
  </metal:cssslot>

</head>
<body>

<metal:main fill-slot="main">

  <h1>Title or id</h1>

  <p>
     Das ist die perfekte Welle.
     Das ist der perfekte Tag.
  </p>

</metal:main>

</body>
</html>

Weiters würde ich einfach mal schauen, was an den Browser geliefert wird.

- Steht dort im Quellcode der Link zum Stylesheet drinnen?

- Kann der Stylesheet mit der definierten URL aufgerufen werden?

- Wird im Header der Content-Type "text/css" an den Browser übermittelt?

Diese Fragen kann dir der Firefox-Browser mit dem Zusatztool (Add on) "Web Developer" aufzeigen.
https://addons.mozilla.org/extensions/m ... on=firefox

lg
Gerold

PS: Achte darauf: **context** ist nicht **content**

JR hat geschrieben:Ähm, wo finde ich die CSS-Registry. Komme ich da übers ZMI innerhalb der Portalebene heran oder ist Pythoncode nötig, wie du ihn oben angegeben hast?

Hi Jamil!

Direkt im Plone-Root-Ordner befindet sich der das Objekt "plone_css". Das ist die CSS-Registry.

Der Code den ich geschrieben habe, ist nur dann interessant, wenn du dir ein eigenes Plone-Produkt im Dateisystem schreiben möchtest. Dieser Code registriert, beim Installieren deines Produktes, dein Stylesheet in der CSS-Registry. Das kannst du aber auch händisch direkt in der CSS-Registry machen, dann sparst du dir diesen Code.

Vor Plone 2.1.x gab es diese CSS-Registry allerdings noch nicht.

lg
Gerold

Hi Gerold,

morgen werde ich mich auf jeden Fall in Ruhe mit dem css-Problem befassen, da es mir wie alles wirklich wichtig ist. Vielen Dank für deinen Tipp zu dem Plugin vom Firefox.

Wie kann ich hier eigentlich so schick code (XHTML) hier einbinden? Kenn bisher nur code=py.

Also dann erst einmal vielen Dank und ich bin zuversichtlich, dass ich es morgen dank deiner Super-Hilfe schaffe

Ach ja, natürlich verwechsel ich content und context nicht

Höchtens, wenn ich mich vertippe, aber dann dürfte es in der Regel krachen...

Also dann gute Nacht Gerold!

Jamil

Hallo!

Es will nicht funktionieren...

Cookies gelöscht, Cache geleert, Verlauf geleert und die Versuche führen nicht zum gewünschten Testergebnis.

Folgenden Versuch habe ich nun gestartet. Zwei Dateien in einem Ploneordner:
PageTemplate, wie du (Gerold) es mir gesendet hast:

index_html:

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 
      lang="en" 
      metal:use-macro="here/main_template/macros/master" 
      i18n:domain="plone"> 
<head> 

  <metal:cssslot fill-slot="css_slot"> 
    <style type="text/css" 
           media="all" 
           tal:content="string:@import url(${context/km.css/absolute_url});" 
    ></style>
<!--<link rel="stylesheet" href="./km.css" type="text/css" /> -->
  </metal:cssslot> 

</head>
<body> 

<metal:main fill-slot="main"> 

  <h1>Title or id</h1> 

  <p class="testklasse"> 
     Das ist die perfekte Welle. 
     Das ist der perfekte Tag. 
  </p> 

</metal:main> 

</body> 
</html>

Alternativ habe ich Zeile 9-12 raus- und Zeile 13 reingenommen.

Dann habe ich folgendes Stylesheet in demselben Ordner zu liegen und auch unter portal_css registriert, wobei dies glaub ich bei oben stehendem Verfahren nicht zwangläufig nötig wäre (?)

km.css:

Code: Alles auswählen

<style type="text/css"> 
p.testklasse{font-size:30px; font-weight:bold;}
</style>

Das angezeigte Ergebnis ist zwar schön, aber leider bleibt die Schrift normal groß und wird nicht fett

Wenn ich mir den an den Browser gesendeten Code ansehe, enthält er

Code: Alles auswählen

<style type="text/css" media="all">@import url(http://intern.XXX-XXXXX.de/ressortfaecher/folder_geschuetzt.2006-03-23.8811122424/test2/km.css);</style>

und der Pfad lässt sich auch aufrufen, um das Stylesheet im Browser anzusehen.
Werde rumprobieren, bis es klappt. So ist es ja leider häufig, beim Programmieren, Basteln etc.

Viele Grüße
Jamil

JR hat geschrieben:km.css:
Code: Alles auswählen
<style type="text/css"> 
p.testklasse{font-size:30px; font-weight:bold;}
</style>

Hi Jamil!

Schön. Jetzt brauchst du nur noch ein richtiges Stylesheet:

Code: Alles auswählen

p {font-size:400%; }

Mein Tipp zum Testen:
Erstelle ein neues "File"-Objekt im Ordner mit dem Namen km.css. Nach dem Erstellen den oben genannten Code rein (ohne <style>-Tags). Prüfe ob der Content-Type auch wirklich "text/css" ist.

Dann sollte es funktionieren.

lg
Gerold

Hey Gerold!

Das ist die perfekte Welle. Das ist der perfekte Tag.

Was würde ich nur ohne deine Hilfe machen.. -> Viel langsamer sein!

Ich guck auch schon, ob ich die ein oder andere Frage hier beantworten kann, möchte auch mein noch nicht so großes Wissen weitergeben.

Also dann noch mal ein riesen Dankeschön
Jamil

P.S.:
Falls du Lust hast und wenn du mal nach Berlin kommen solltest, würde ich mich gerne mal auf einen Kaffee mit dir treffen und mich bei dir revanchieren. Finde es echt toll, dass du so fleißig mit deinen Ratschlägen und Hinweisen hilfst. Hab mir überlegt, dass ich evtl. aufkommende Fragen zu Plone etc. etwas sammle. Mir kommen immer wieder Ideen, wie man dieses und jenes geschickt machen kann. Kennst das sicher nur allzu gut.

JR hat geschrieben:Finde es echt toll, dass du so fleißig mit deinen Ratschlägen und Hinweisen hilfst.

Aber gerne doch.

Hm, vielleicht war ich doch zu schnell!?

Muss ich etwas zusätzliches beachten, um die base-properties, zum Beispiel sowas:

Code: Alles auswählen

.dienstkalender td, .mitgliederliste td, .hfb td
{
  FONT-SIZE:11px;
  border-color:&dtml-globalBorderColor;;
  border-style:solid;
  border-width:&dtml-borderWidth;;
  border-spacing:0px;
  color:&dtml-fontColor;;
  padding:2px;
}

verwenden zu können? In der portal_css - Registrierung ist der Stylesheet eingetragen. Habs einmal in meinem Ziel(plone)Ordner probiert und den Stylesheet dann in custom gelegt. Geht aber leider beides nicht.

Jamil

Hat sich erledigt!!!

Musste es dann halt doch als DTML-Method abspeichern

Grüße
Jamil

Das deutsche Python-Forum

Plone - zwei Stylesheets gleichzeitig

Plone - zwei Stylesheets gleichzeitig

Re: Plone - zwei Stylesheets gleichzeitig

Stylesheets

Re: Stylesheets

Voreilig gewesen?