Hauptelemente in der Benutzerschnittstelle

[FuXz]

Hi!
Komme ganz gut vorran. Bin jetzt dabei das "look and feel"- anzupassen!
Dabei stoße ich auf folgendes Problem (suche im Forum hat nichts ergeben):
Im Plone Buch (engl.) Seite 180 gibt es 13 Hauptelemente auf der Seite!
Ich habe nun einige dieser Elemente per "portal_skins/custom/ploneCustom.css" geändert!
Nur von 3 Elemente :
- Content drop-down lists (Acht)
- Document actions (9)
- Byline (10)
finde ich keine Id.
Wie ist die Id von den Freunden?
Was mir aufgefallen ist, ist dass es sich bei diesen um Funktionen handelt die ich erst habe, wenn ich eingelogt bin. Könnte also bedeuten, dass die Main_template nur alle Elemente enthält, wenn man Ausgelogt ist.
Aber (7) den Inhalts-Reiter steht in der main_template ...
ich hab grad nochmal nachgeguckt. portal_column_content ist gar nicht content tabs ...
Also hat es irgendwas mit dem eingelogt sein zu tun?!?

desweiteren ... wenn ich z.b. mir das Suchformular angucke...
Das ist ja schon automatisch oben rechts zu finden ... wo stehen diese standard Einstellungen dafür? (wie ich es per costum.css verändere weis ich)
---- edit -----
Dann bin ich mir nicht sicher wegen
#visual-portal-wrapper {
}
Dieses gibt ja an, in welchem Bereich(maßen) sich meine Seite aufhält.
Ich würde gerne ausserhalb dieses Wrappers ein Hintergrund Bild machen.
Aber bei "globalBackgroundColor" kann ich ja nur Farbe und kein img angeben.

Diese Leiste auf der die Reiter sind... wo stehen die Eigenschaft für die?

Danke FuXz

[FuXz]

Dann bin ich mir nicht sicher wegen
#visual-portal-wrapper {
}
Dieses gibt ja an, in welchem Bereich(maßen) sich meine Seite aufhält.
Ich würde gerne ausserhalb dieses Wrappers ein Hintergrund Bild machen.
Aber bei "globalBackgroundColor" kann ich ja nur Farbe und kein img angeben.

Hat sich erledigt ...
body {
background-image: url(hintergrund_all.jpeg);
}

[gerold]

Nur von 3 Elemente :
- Content drop-down lists (Acht)
- Document actions (9)
- Byline (10)
finde ich keine Id.

Hi FuXz!

- Byline (10)

Code: Alles auswählen

  <div class="documentByLine">

- Document actions (9)

Code: Alles auswählen

             <ul id="portal-siteactions">

    <li id="siteaction-sitemap"><a
    href="http://localhost:8080/Plone/sitemap" accesskey="3"
    title="Website-Übersicht">Website-Übersicht</a></li>

oder

Code: Alles auswählen

<div class="contentActions">

- Content drop-down lists (Acht)

Code: Alles auswählen

        <dl class="actionMenu" id="statusMenu">
          <dt class="actionMenuHeader">

Hast du die gesucht?

lg
Gerold

[gerold]

... wenn ich z.b. mir das Suchformular angucke...
Das ist ja schon automatisch oben rechts zu finden ... wo stehen diese standard Einstellungen dafür?

Hi FuXz!

Das Suchformular wird von der main_template per Makro eingebunden.

Code: Alles auswählen

<div metal:use-macro="here/global_searchbox/macros/quick_search">

lg
Gerold

[FuXz]

Hi Gerold!

Mit .XYZ spreche ich die Klassen an?

<div class="contentActions">

Code: Alles auswählen

.contentActions {
display: none;
}

<ul id="portal-siteactions">

<li id="siteaction-sitemap"><a
href="http://localhost:8080/Plone/sitemap" accesskey="3"
title="Website-Übersicht">Website-Übersicht</a></li>

Code: Alles auswählen

#portal-siteactions {
display: none;
}

-> Müßte gehen!
aber wird trotzdem weiter angezeigt!
- edit - Warum gibt es hier 2 Möglichkeiten, wofür benutz ich was? - edit-
ByLine:

Code: Alles auswählen

.documentByLine {
display: none;
}

Funktioniert!

Code: Alles auswählen

.actionMenu {
display: none;
}

Funktioniert nicht! ( Oder ich versteh nicht, was dahinter steckt)

Und bei 7 "content tabs" finde ich per Suche auch nichts!
Und das obwohl ich im Stammordner suche!

Warscheinlich nur irgendwelche dummie Fehler von mir

[gerold]

Funktioniert nicht! ( Oder ich versteh nicht, was dahinter steckt)

Hi FuXz!

Betrifft Postings von dir: Bitte schreibe nicht alles in einem Block zusammen und schließe Code in Code-Tags ein, damit man deine Postings leichter lesen kann.

Was die Oberflächenänderungen anbelangt --> Ich denke, es ist am Einfachsten, wenn du jeweils ein Bild der Homepage machst und das, was du verändern möchtest, mit einem Rahmen markierst. Dieses Bild kannst du irgendwo hochladen, damit wir es ansehen können.

Dann erklärst du uns was du mit dem umrahmten Element machen möchtest. Wir, hier im Forum, versuchen dir dann eine Antwort darauf zu geben. Anders wird es zu kompliziert. Nur so weiß man, wovon du sprichst.

Was das Ausblenden von manchen Objekten betrifft. Diese kann man meist so einstellen, dass diese nur unter bestimmten Voraussetzungen angezeigt werden. Das sind meistens Eigenschaften die im ZMI festgelegt werden. --> Deshalb auch die Bitte um Bilder, damit man dir bessere Tips geben kann.

lg
Gerold

[FuXz]

Ok. Mal gucken wo ich was hochladen kann ...

[FuXz]

zu 1:
Ich hätte gerne "Suchen" vor dem Suchfeld...

zu 2:
Hat sich erledigt!

zu 3:
Also ic hab die Farben geändert, weis aber nicht mehr genau wie.
Mir geht es aber mehr darum, dass die Content-Reiter nebeneinander stehen und nicht das letzte bei geringer Content width nach unten rutscht.

zu 4:
Dort hätte ich gerne einen Farbbalken.
Ungefähr so wie er bei "Personal bar"!

zu 5:
Wie kann ich das verschwinden lassen?

Code: Alles auswählen

.contentActions { 
display: none; 
}

bzw.

Code: Alles auswählen

#portal-siteactions { 
display: none; 
}

funzt nicht.

zu 6: (nicht markiert)
Ich würde gerne die Hintergrundfarbe und ähnlcihes der NAvigation des "Left Slot" ändern.

Danke FuXz

[gerold]

zu 1:
Ich hätte gerne "Suchen" vor dem Suchfeld...

Hi FuXz!

Jetzt kann ich etwas damit anfangen

Also zum Punkt "Suchen". Ich umschreibe es mal ein wenig, damit du siehst, wie ich rauszukriegen versuche, in welcher Datei was zu finden ist. Die nächsten Posts halte ich kürzer.

Meistens suche ich in der "main_template" nach einem Stichwort, wie in diesem Fall "search". Meinstens sehe ich mir aber die main_template an und gehe dort hin, wo ich den gesuchten Maktoaufruf vermute.

Mit beiden Methoden findet man

Code: Alles auswählen

             <div metal:use-macro="here/global_searchbox/macros/quick_search">
               The quicksearch box, normally placed at the top right
             </div>

Dieses Codeschnipsel sagt aus, dass an dieser Stelle das Makro "quick_search" der Datei "global_searchbox" aufgerufen wird. Möchte ich also etwas am Aussehen der Suche ändern, dann muss ich es in der Datei "global_searchbox" machen. Eine Suche im ZMI nach "global_searchbox" bringt "plone_templates/global_searchbox" zu tage.

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">

<body>

<!-- THE SEARCHBOX DEFINITION -->
<div id="portal-searchbox" metal:define-macro="quick_search">
    <form name="searchform"
          action="search"
          tal:define="livesearch site_properties/enable_livesearch|nothing"
          tal:attributes="action string:${portal_url}/search;
                          onsubmit python:test(livesearch==True,'return liveSearchSubmit()','')"
          style="white-space:nowrap">


        <div class="LSBox">
        <label for="searchGadget" 
               style="text-transform: none;
                      font-weight: normal;"
        >Suche:</label>
        <input id="searchGadget"
               tabindex=""
               name="SearchableText"
               type="text"
               size="15"
               value=""
               title="Search Site"
               accesskey="4"
               i18n:attributes="title title_search_site;"
               tal:attributes="value request/SearchableText|nothing;
                               tabindex tabindex/next"
               class="visibility:visible" />

        <input class="searchButton"
               type="submit"
               tabindex=""
               value="Search"
               tal:attributes="tabindex tabindex/next"
               i18n:attributes="value label_search;" />

        <div class="LSResult" id="LSResult" style=""><div class="LSShadow" id="LSShadow"></div></div>
        </div>
    </form>

    <div id="portal-advanced-search"
         class="hiddenStructure">
        <a href="#"
           tal:attributes="href string:$portal_url/search_form"
           i18n:translate="label_advanced_search"
           accesskey="5">
            Advanced Search…
        </a>
    </div>

</div>

</body>
</html>

lg
Gerold

[gerold]

zu 3:
Also ic hab die Farben geändert, weis aber nicht mehr genau wie.
Mir geht es aber mehr darum, dass die Content-Reiter nebeneinander stehen und nicht das letzte bei geringer Content width nach unten rutscht.

Hi FuXz!

Für das Aussehen dieser Reiter sind folgende Properties des Objektes "portal_skins/custom/base_properties" zuständig:

- contentViewBorderColor
- contentViewBackgroundColor
- contentViewFontColor

Die Styles der ContentView-Reiter ist eine Kunst für sich. Die sind so richtig kompliziert aufgebaut, da diese im HTML-Code eigentlich mehrere Objekte sind: UL, LI und LI a. Dafür kann man aber durch eine Änderung an den Stylesheets, abgerundete Ecken, Bilder und sonst was einstellen, ohne den Quellcode direkt anrühren zu müssen. Ich muss aber zugeben, dass es manchmal einfacher ist, den Quellcode zu ändern und aus den ULs und LIs eine Tabelle zu machen.

Code: Alles auswählen

.contentViews {
  padding-left: 0.15em;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}
.contentViews li {
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}
.contentViews li a {
  margin-right: 0.15em;
  padding-left: 0.15em;
  padding-right: 0.15em;
  padding-top: 0.15em;
  padding-bottom: 0.15em;
}

Wie ich schon schrieb --> ziemlich komplex. Man muss nämlich darauf achten, dass die einzelnen Werte zusammenpassen.

lg
Gerold

[gerold]

zu 4:
Dort hätte ich gerne einen Farbbalken.
Ungefähr so wie er bei "Personal bar"!

Hi FuXz!

Wie deine Peronal bar aussieht, das weiß ich nicht. Aber die Position die du angezeichnet hast, die ist wahrscheinlich direkt oberhalb von

Code: Alles auswählen

<table id="portal-columns">

in der "main_template" zu finden.

Füge einfach mal oberhalb ein

Code: Alles auswählen

<div style="background-color: green;">Hallo hier bin ich</div>

ein, dann weißt du wo du dich befindest.

lg
Gerold

[gerold]

zu 5:
Wie kann ich das verschwinden lassen?

Hi FuXz!

Im Objekt "portal_actions" im Karteireiter "Actions". Suche nach der Category: "document_actions".

Wenn du das Häckchen bei "Visible?" ausschaltest, dann werden diese "document_actions" nicht mehr angezeigt. Dort könntest du auch granularer einstellen, bei welcher Berechtigungsstufe die einzelnen Actions angezeigt werden sollen.

lg
Gerold

[gerold]

zu 6: (nicht markiert)
Ich würde gerne die Hintergrundfarbe und ähnlcihes der NAvigation des "Left Slot" ändern.

Hi FuXz!

"/portal_skins/plone_portlets/portlet_navigation"

Dort kannst du dir ansehen, was man so alles ändern kann.

Code: Alles auswählen

/* kompletter Bereich */
dl#portlet-navigation-tree {
  background-color: green;
}

/* Überschrift */
#portlet-navigation-tree dt.portletHeader {
  background-color: magenta;
}

/* Unterhalb der Überschrift */
#portlet-navigation-tree dd.portletItem {
  background-color: yellow;
}

"portal_skins/plone_styles/portlets.css" gibt dir zusätzliche Informationen.

"portal_skins/plone_portlets/portlet_navigation" und "portal_skins/plone_portlets/portlet_navtree_macro" gehören zusammen.

lg
Gerold

[FuXz]

Hi Gerold!

Und danke erstmal für die umfassenden Antworten!

Zu 1:
Ja, in dem Marko hab ich auch schon reingeguckt, aber nachdem ich kein "Suche" fand, dachte ich mir, dass das irgendwo anders steht.
Und das ist auch jetzt das Problem ...
Ich habe den Code geändert und jetzt erscheint:
"Suche:" (Suchfeld) (Lupe) "Suche"!
Das "Suche" nach dem Suchfeld ist leider nicht verschwunden!
Dann hab ich mir überlegt, dass

Code: Alles auswählen

        <input class="searchButton"
               type="submit"
               tabindex=""
               value="Search"
               tal:attributes="tabindex tabindex/next"
               i18n:attributes="value label_search;" />

der Übeltäter sein muss. Erstaunlich finde ich hier, dass hier weder was von "suche" noch was von einem "img" (Lupe) steht! Und So bewandert in Tal bin ich nun leider noch nicht...

Entferne ich diese classe einfach guckt das (Suchfeld) zwar ein bisschen über den definierten Wrapper Bereich, dass ist aber kein Problem und kann ich per Costum.css beheben (mittels Padding).
Aber, wenn ich das nun rauslösche, erscheint die "Erweiterte Suche" kurz (0,5 Sekunden) neben den Portal-Reitern und verschwindet wieder.
Es steht aber trotzdem normal im Content Bereich ( auch wärend es wo anders erscheint).
Danke FuXz!

- edit -

Nun habe ich grad rausgefunden, dass wenn ich Im "Suchfeld" etwas eingebe, erscheint ab 2 Buchstaben der "erweiterte Suchen" auch!
Wieder an der Falschen Stelle neben den Reitern.

[gerold]

Hi FuXz!

Jetzt verstehe ich...: du willst den Submit-BUTTON (mit der Beschriftung "Suche"), der derzeit rechts neben dem Textfeld steht, links davon haben.

Ok, dazu weiter unten...

Ja, in dem Marko hab ich auch schon reingeguckt, aber nachdem ich kein "Suche" fand, dachte ich mir, dass das irgendwo anders steht.

Plone ist mehrsprachig. Das heißt, dass im Quellcode alles in englischer Sprache steht und durch die speziellen i18n-Attribute der Tags, beim Rendern nach Übersetzungen gesucht wird.

Code: Alles auswählen

i18n:attributes="value label_search;" 

Dieser Code gibt an, dass das Tag-Attribut "value" den Wert der Übersetzung mit der ID "label_search" bekommen soll. Diese Übersetzungen stellt das Produkt "PlacelessTranslationService" zur Verfügung.

Dann hab ich mir überlegt, dass

Code: Alles auswählen

        <input class="searchButton"
               type="submit"
               tabindex=""
               value="Search"
               tal:attributes="tabindex tabindex/next"
               i18n:attributes="value label_search;" />

der Übeltäter sein muss. Erstaunlich finde ich hier, dass hier weder was von "suche" noch was von einem "img" (Lupe) steht!

Das ist ein Submit-Button, mit dem man die Suche anstoßen kann.

Code: Alles auswählen

<input type="submit" />

Das Textfeld, genauer gesagt, das Suchformular reagiert aber auch auf die Enter-Taste, so ist der Button nicht unbedingt nötig. Wenn du ihn los werden willst, dann lösche den kompletten Tag. Wenn du ihn links vom Textfeld haben willst, dann verschiebe den kompletten Input-Tag.

Die Lupe ist im Stylesheet zu finden. Ich glaube, als "background-image" der Klasse "searchButton".

In diesem Code ist der Submit-Button links vom Textfeld:

Code: Alles auswählen

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
      i18n:domain="plone">

<body>

<!-- THE SEARCHBOX DEFINITION -->
<div id="portal-searchbox" metal:define-macro="quick_search">
    <form name="searchform"
          action="search"
          tal:define="livesearch site_properties/enable_livesearch|nothing"
          tal:attributes="action string:${portal_url}/search;
                          onsubmit python:test(livesearch==True,'return liveSearchSubmit()','')"
          style="white-space:nowrap">


        <div class="LSBox">

        <input class="searchButton"
               type="submit"
               tabindex=""
               value="Search"
               tal:attributes="tabindex tabindex/next"
               i18n:attributes="value label_search;" />

        <input id="searchGadget"
               tabindex=""
               name="SearchableText"
               type="text"
               size="15"
               value=""
               title="Search Site"
               accesskey="4"
               i18n:attributes="title title_search_site;"
               tal:attributes="value request/SearchableText|nothing;
                               tabindex tabindex/next"
               class="visibility:visible" />

        <div class="LSResult" id="LSResult" style=""><div class="LSShadow" id="LSShadow"></div></div>
        </div>
    </form>

    <div id="portal-advanced-search"
         class="hiddenStructure">
        <a href="#"
           tal:attributes="href string:$portal_url/search_form"
           i18n:translate="label_advanced_search"
           accesskey="5">
            Advanced Search…
        </a>
    </div>

</div>

</body>
</html>

lg
Gerold

[FuXz]

Hi Gerold!

Ja das meinte ich damit !... grad nachgeguckt ... hab mich bissl dumm ausgedrückt.

Ja das ist jetzt so ansatzweise so, wie ich mir das wünsche

Nun ist da immer noch dieses andere Problem:

Wenn ich nun einen Suchtext eingebe, erscheint solange ich in dem Eingabe-Such-Fenster bleibe der Text "erweiterte Suche" neben den Portal-Reitern. Nun hab ich ein bisschen rumprobiert und rausgefunden, dass dort noch mehr steht... aber anscheinend löschen sie da die Hintergrund und text Farbe aus (oder es ist nicht gewollt, dass man das lesen soll)
Jedenfalls erscheint dort in unsichtbarer Tinte:

LiveSearch ↓
Keine passenden Resultate gefunden.
Erweiterte Suche

Das lässt mich vermuten das es eine Live Search gibt, die mitten beim eingeben schon prüft, ob es den gesuchten Begriff gibt.
Hab nach "live search" gesucht aber nichts gefunden.
Wenn dem so ist, wo stell ich das ab?

- edit -
Habe gerade mal den Original "global_searchbox" Text eingefügt ...
Da kommt das auch!

[gerold]

Jedenfalls erscheint dort in unsichtbarer Tinte:

LiveSearch ↓
Keine passenden Resultate gefunden.
Erweiterte Suche

Das lässt mich vermuten das es eine Live Search gibt

Hi FuXz!

Ja, es gibt ein "Live Search" -- eines der besten Features seit Plone 2.1.

Ich schlage vor, du siehst dir das mal in einem unveränderten Plone an.

Vermutlich hast du irgendwelche Styles so überschrieben, dass die "Live Search"-Box nicht mehr korrekt angezeigt wird.

lg
Gerold

[gerold]

"portal_skins/plone_styles/public.css" --> suche nach "/* LiveSearch styles */"

lg
Gerold

[FuXz]

Hi Gerold!

Also eigentlich habe ich da nicht rumgeschraubt!
Bin ich mir eigentlich sicher...
So und da ich nunmal nicht die nerven für sowas habe gibt es ein

Code: Alles auswählen

.livesearchContainer {
display: none;
}

von mir

Dieser Code gibt an, dass das Tag-Attribut "value" den Wert der Übersetzung mit der ID "label_search" bekommen soll. Diese Übersetzungen stellt das Produkt "PlacelessTranslationService" zur Verfügung.

Dachte ich mir auch schon! Hab das jetzt dl't und mache es mal drauf.

[FuXz]

zu 4:
Bevor ich heute hier noch frei drehe...

Mein Linie ... ich nehme ein Bild!
In der main_template steht somit:

Code: Alles auswählen

 <img src="hintergrund_reiter.jpeg" width=100% height=21px> 

Img wird angezeigt und ist tatsächlich 21 Pixel hoch!

Dann passe ich die costum.css an:

Code: Alles auswählen

#portal-globalnav {
      position: absolute;
      top 75px; left: 385px;
}

#portal-globalnav li {
}

#portal-globalnav li a {
      color: #FFFFFF;
      background-image: url(hintergrund_reiter.jpeg);
      height: 21px;
}

Hier wird die glob_nav liste aber nicht 21 px hoch ...
Bestimmt ein Sinnloser Fehler ....

Hatte es auch schon so gemacht, dass ich das Bild in "portal-globalnav" hatte ... da hat er auch die 21 px richtig angezeigt.
Aber bei den 21px in dem Reiter direkt hat er nicht gemacht und die ganzen Sachen komisch ineinander geschoben.
Ausserdem war die Ausrichtung nicht hinzubekommen...