Hauptelemente in der Benutzerschnittstelle

Django, Flask, Bottle, WSGI, CGI…
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Dienstag 25. Juli 2006, 14:37

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
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Dienstag 25. Juli 2006, 15:27

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);
}
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Dienstag 25. Juli 2006, 15:56

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Dienstag 25. Juli 2006, 16:04

FuXz hat geschrieben:... 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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Mittwoch 26. Juli 2006, 10:20

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 :(
Zuletzt geändert von FuXz am Mittwoch 26. Juli 2006, 10:47, insgesamt 1-mal geändert.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 10:41

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Mittwoch 26. Juli 2006, 10:48

Ok. Mal gucken wo ich was hochladen kann ...
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Mittwoch 26. Juli 2006, 15:07

Bild

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
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 20:00

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 20:37

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 20:44

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 20:50

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Mittwoch 26. Juli 2006, 21:57

FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
FuXz
User
Beiträge: 56
Registriert: Donnerstag 6. Juli 2006, 08:44

Donnerstag 27. Juli 2006, 09:02

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.
Benutzeravatar
gerold
Python-Forum Veteran
Beiträge: 5555
Registriert: Samstag 28. Februar 2004, 22:04
Wohnort: Oberhofen im Inntal (Tirol)
Kontaktdaten:

Donnerstag 27. Juli 2006, 09:30

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...
FuXz hat geschrieben: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.
FuXz hat geschrieben: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
:-)
http://halvar.at | Kleiner Bascom AVR Kurs
Wissen hat eine wunderbare Eigenschaft: Es verdoppelt sich, wenn man es teilt.
Antworten