Hauptelemente in der Benutzerschnittstelle

[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...

[FuXz]

Hi!

Hab das meiste rausgefunden!

Nur hab ich nun folgendes Problem:
Die "Content-Dropdown lists" ist verschwunden...
(Das ist diese kleine Leiste wo man "veröffentlichen" und sowas kann)
ansprechen tue ich sie ja mit

Code: Alles auswählen

 .actionMenu

Hab es mit

Code: Alles auswählen

.actionMenu {
position: absolute;
top:200 px; 
left: 300px;
}

probiert - Hilft aber nicht!

Vorschläge.
Danke!

[gerold]

Die "Content-Dropdown lists" ist verschwunden...
(Das ist diese kleine Leiste wo man "veröffentlichen" und sowas kann)
ansprechen tue ich sie ja mit

Code: Alles auswählen

 .actionMenu

Hi FuXz!

``.actionMenu`` ist ein wenig zu allgemein. Deshalb glaube ich nicht, dass du damit steuern kannst, ob diese Liste angezeigt wird oder nicht.

Suche im Code, der an den Browser übermittelt wird nach dieser Liste. Wenn diese dort nicht auftaucht, dann hat es nichts mit den CSS zu tun, sondern du hast diese Liste auf eine andere Art ausgeschaltet.
Suche dazu nach: ``<dl class="actionMenu" id="statusMenu">``

``portal_skins/plone_templates/global_contentmenu`` ist für die Darstellung dieses Menüs zuständig. Vielleicht hast du dort drinnen etwas verändert.

lg
Gerold

[FuXz]

Hi Gerold!

Suche dazu nach: ``<dl class="actionMenu" id="statusMenu">``

Habe ich gemacht und es steht dieser code drin:

Code: Alles auswählen

<dl class="actionMenu" id="statusMenu">
          <dt class="actionMenuHeader">
            <a href="http://www2:8080/pharmatec/news/content_status_history"
               title="Ändere den Status dieses Artikels.">

                <span>Status:</span>

                <span class="state-visible">Öffentlicher Entwurf</span>

            </a>
          </dt>
          <dd class="actionMenuContent">
            <ul>
                
                <li>
                    <a href="http://www2:8080/pharmatec/news/content_status_modify?workflow_action=hide"
                       title="Privat schalten">Privat schalten</a>
                </li>
                
                
                <li>

                    <a href="http://www2:8080/pharmatec/news/content_status_modify?workflow_action=publish"
                       title="Veröffentlichen">Veröffentlichen</a>
                </li>
                
                <li class="actionSeparator">
                    <a href="http://www2:8080/pharmatec/news/content_status_history">Erweitert</a>
                </li>
                <li class="actionSeperator">
                    <a href="http://www2:8080/pharmatec/news/placeful_workflow_configuration">Richtlinie</a>

                </li>
            </ul>
          </dd>
        </dl>

Wundert mich, dass dort nirgendwo "position: absolute" auftaucht!
Und an

portal_skins/plone_templates/global_contentmenu

habe ich so und so nichts rumgemährt.
Gruß FuXz!

[FuXz]

Ok hab das Problem gefunden!

Code: Alles auswählen

.contentActions {
display: yes;
}

War auf none gestellt! Dachte das gehört zu was anderem!
Aber aus dem HTML Quellcode wusste ich das ich nach ".contentActions" suche musste!

Mal ne andere kleinere Sache die mich grad nerven raubt:
Wie zentrieren den Inhalt im "Left und Right Slot?".
align:center; nein
background-position:center; nein
Wie mach ich das?

[gerold]

Wie zentrieren den Inhalt im "Left und Right Slot?".

Hi FuXz!

Das geht schon irgendwie mit ``align: center;`` oder ``text-align: center;``, aber es gibt zu viele Objekte in den Slots, als dass ich wissen könnte, was du genau zentrieren möchtest.

mfg
Gerold

[FuXz]

Was ich meine ist, im Linken Slot die Navigation u.ä. und im Rechten Slot der Kalender.
Ich möchte nicht, dass die so häßlich am Rand rangepappt sind, sondern in ihrem Container zentriert.
Werde es weiter mit

``align: center;`` oder ``text-align: center;``

probieren.

[FuXz]

Also mit

align: center;text-align: center;

war nix zu machen. Aber mit

Code: Alles auswählen

position: relative;
right:10px;

habe ich meine Wünsche erfüllen können.
Nun muss ich zwar jedes Portlet auf der Linken und Rechten Seite einzellnd Ausrichten aber es scheint ja nicht anders zu gehen.
Navigation zentriert:

Code: Alles auswählen

#portlet-navigation-tree { 
position: relative;
right:10px;
}

"Aktuelle Änderungen" (mit Inhalt) zentriert:

Code: Alles auswählen

#portlet-recent {
position: relative;
right:10px;
}

[gerold]

Nun muss ich zwar jedes Portlet auf der Linken und Rechten Seite einzellnd Ausrichten aber es scheint ja nicht anders zu gehen.

Hi FuXz!

Es gibt *immer* ein Objekt, wie z.B. eine Tabelle oder ein DIV, in dem die anderen Objekte eingebettet sind. Möchtest du, dass alle eingebetteten Objekte mehr Rand von Links bekommen, dann ist das meist eine Sache dieses einbettenden Objektes und nicht der einzelnen Unterobjekte. Ein ``padding-left: 2em;`` wirkt da oft Wunder.

Bitte, sei vorsichtig mit deinen Änderungen. Je mehr du *absolut* positionierst, desto schwieriger wird die Sache, da sich dann auf einmal andere Änderungen im CSS nicht mehr so auswirken, wie man sich das vorstellt.

Styles, die die Spalten (left_slot, content, right_slot) betreffen, sind z.B. in der Datei ``portal_skins/plone_styles/columns.css``drinnen.

Zusätzlich gibt es in ``portal_skins/custom/public.css`` noch die Definitionen ``#portal-column-one .visualPadding`` und ``#portal-column-two .visualPadding``, die direkt für die Abstände der einzelnen Spalten zuständig sind.

Wenn ich nicht weiß, welche Styledefinition für ein bestimmtes Element zuständig ist, dann ändere ich so lange bei den verschiedensten Styledefinitionen die Hintergrundfarbe (nur zum Testen), bis ich das gewünschte Element gefunden habe.

Weiters ist die "Web Developer"-Toolbar des Firefox-Browsers ein wunderbares Werkzeug um die Styledefinitionen eines Elements herauszubekommen. Über "CSS --> View Style-Information" ändert sich der Mauszeiger zu einem kleinen Kreuzchen. Klickt man mit diesem Kreuzchen auf ein Element der Internetseite, dann zeigt Firefox die dafür zuständige Styledefinition und die dafür zuständige CSS-Datei an.

lg
Gerold

[FuXz]

Hi Gerold!

Und wieder merke ich, dass mir noch einiges fehlt...

Code: Alles auswählen

 <td id="portal-column-one">

              <div class="visualPadding">

hierraus hatte ich gelesen, dass für mich das Objekt "portal-column-one" interessant ist... nur hatten alle Änderungen (roter Hintergrund) nichts bewirkt. Jetzt wo ich die Lösung kenne, merke ich, dass Ich nicht das Objekt sonder wie es im Quellcode steht die Klasse "visualPadding" ansprechen muss!
Wieder was gelernt !

Bitte, sei vorsichtig mit deinen Änderungen. Je mehr du *absolut* positionierst, desto schwieriger wird die Sache, da sich dann auf einmal andere Änderungen im CSS nicht mehr so auswirken, wie man sich das vorstellt.

Den Fehler hat ich mal vor nem halben Jahr darum mach ich das so und so nicht mehr! Deshalb benutz ich maximal ein position: relative.

Danke! Habe alles geändert. Wenn man sowas gleich wüßte würde man sich eine menge Zeit sparen...

[FuXz]

Hi Gerold!

Hab mir jetzt mal das Developer Toll installed.
Und ich muss echt sagen:"nice!"
Und unter "Web Developer -> Informationen -> ID & Klassendetails einblenden" sieht man genau was was anspricht!
Nur blöd, dass sich das teilweise so blöd überlappt!

[gerold]

"Web Developer -> Informationen -> ID & Klassendetails einblenden"

Hi FuXz!

Das habe ich mir noch nie richtig angesehen. -- Werde ich ab jetzt sicher öfter verwenden.

lg
Gerold

[FuXz]

Hi Gerold!

Also es gibt an dem Tool schon paar sehr nette Sachen.
Das wäre "ID & Klassendetails einblenden" und "Reihenfolge der Div'
s Anzeigen" und "Z-Index einblenden" oder "Verwendete Farbe anzeigen"!
Nun dachte ich, ich hab das Design soweit angepasst ... denkste!
Jetzt habe ich mir die Seite im IE angeschaut.
Und jetzt gehts mir weider dreckig!


Im oberen Beispiel sieht man das ganze mit dem Firefox.
Hier habe ich das Problem, dass wenn der "intelligente Ordner" angezeigt wird, sich "Aktion" und "Ansicht" (was eigentlich die ersten beiden Reiter-Bestandteile sind) als letztes angezeigt werden und das auch noch links bündig.

Im unteren Beispiel das ganze mit dem IE!
Was zur Hölle macht der da? Warum schluckt er die Reiter-Bestandteile "
Bearbeiten, Eigenschaften, Kriterien, Unterordner, Zugriffsrechte"? Und mit dem darunter genau das gleiche...
Ich dachte, da die plone Geschichte W3C norm ist, sollte es sowas nicht geben?!?

Liegt das an mir? Wahrcheinlich hab ich etwas verändert, dass der IE nicht so mag!
Dank des neuen Tools wei ich ja, dass es sich "nur" um

Code: Alles auswählen

#portal-column-content   #content .documentEditable
.hiddenStructure
Ansichten
.contentViews

    * #contentview-folderContents .plain Inhalte
    * #contentview-view .selected Anzeigen
    * #contentview-edit .plain Bearbeiten
    * #contentview-metadata .plain Eigenschaften
    * #contentview-local_roles .plain Zugriffsrechte

.contentActions

    * #statusMenu .actionMenu deactivated

      .actionMenuHeader
      Status: .state-visibleÖffentlicher Entwurf
      .actionMenuContent
              o Privat schalten
              o Veröffentlichen
              o Einreichen
              o .actionSeparator Erweitert

    * #objectMenu .actionMenu deactivated

      .actionMenuHeader
      Zu Ordner hinzufügen
      .actionMenuContent
              o .contenttype-event Termin
              o .contenttype-file Datei
              o .contenttype-folder Ordner
              o .contenttype-image Bild
              o .contenttype-link Link
              o .contenttype-news-item Nachricht
              o .contenttype-document Seite
              o .contenttype-topic Intelligenter Ordner

    * #templateMenu .actionMenu deactivated

      .actionMenuHeader
      Ansicht
      .actionMenuContent

handeln kann

[FuXz]

Oh Man!
Nachdem ich jedes Ding durchgegangen bin und nichts fand, überlegte ich mit gleich komplette costum dateien rauszunehmen ... brachte auch keinen Erfolg.

Dann kam die Lösung... natürlich die dümmste die es gab!
Ich hatte mich im FireFoX unter Admin angemeldet ... und im IE unter einem User (dem ich ALLE Rechte gab).
Ich dachte mir, wenn ich einem User alle Rechte gebe (Manager, ...) hat er dieselben Optionen wie der Admin ... aber so kann man sich irren.
.... Oh man
aber das Problem von dem oberen Bild steht immer noch!

[FuXz]

Also auch im Quellcode ist die Reihenfolge:
- Status
- intelligenter Ordner
- Ansicht
- Aktionen

Warum steht der intelligente Ordner ganz Vorne?
Ich vermute fast, dass es irgendwas mit dem Zeilenumbruch zu tun hat!

-edit-
Als würde er Rechts anfangen: Status schreiben, dann I.O.(Links daneben) dann kommt ein Zeilenumbruch, dann kommt Ansicht , dann Aktionen (links daneben).

[gerold]

Also auch im Quellcode ist die Reihenfolge:
- Status
- intelligenter Ordner
- Ansicht
- Aktionen

Hi FuXz!

Vielleicht hast du die Reihenfolge in den "portal_actions" verändert.

Wenn du das Fenster überbreit machst, so dass alles in einer Zeile Platz hat. Passt es dann? (zum Probieren, Bildschirmauflösung erhöhen...)

lg
Gerold