Hauptelemente in der Benutzerschnittstelle

[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

[FuXz]

Hi Gerold!

Die Reihenfolge bei Portal_actions habe ich nie angefasst!
Und wenn ich den Ausschnitt vergrößere werden mehr Elemente auf der ersten Zeile angezeigt bzw. komplett ... je nachdem wie groß der Content Container wird.
Eine Idee?
Danke

[gerold]

wenn ich den Ausschnitt vergrößere werden mehr Elemente auf der ersten Zeile angezeigt bzw. komplett

... in der richtigen Reihenfolge?

Wenn Ja, und wenn es dich stört, dann kümmere dich darum, dass du mehr Platz bekommst. Du kannst nicht einfach den Hauptbereich (Content) so schmal machen und dich dann wundern, warum alles untereinander (verschoben) da steht.

lg
Gerold

[FuXz]

Ja in der richtigen Reihenfolge ... das ist ja das verwunderliche!
Mir ist klar, dass wenn ich den Content verkleinere automatische die Dinge in einer neuen Zeile erscheinen. Mir ist nur unklar, warum die Reihenfolge durcheinander gehauen wird, wenn es 2 zeilig wird!

[gerold]

Mir ist nur unklar, warum die Reihenfolge durcheinander gehauen wird, wenn es 2 zeilig wird!

Hi FuXz!

Plone ist so gestaltet, dass es auch von sehbehinderten Menschen gut gelesen werden kann. Dafür ist es notwendig, relativ wenig Tabellen und mehr Listen einzusetzen.
Damit diese Listen für nicht sehbehinderte Menschen wie eine Tabelle aussehen, werden diese mit viel Aufwand per CSS so umdesigned, dass diese nicht untereinander, sondern nebeneinander stehen. Allerdings ist das so kompliziert, teilweise unausgereift und für solche optische Fehler so sehr anfällig, dass ich auch ab und zu mal wieder einen nicht gut gemeinten Fluch in Richtung Plone-Designer ausstoße.

Der Grund für diese unlogisch anmutenden Verschiebungen sind wahrscheinlich die vielen "float: left;", "float: right", "block: ..." in den CSS-Files.

Ich persönlich habe mich damit abgefunden, und versuche erst gar nicht, irgendetwas kompliziertes an den Document-Tabs oder diesen Menüs zu ändern. Maximal Padding und Margin anpassen... aber das kann auch schon schief gehen.

Ich kann dir bei so komplexen Dingen nicht helfen, da es mich dann zu viel Zeit kosten würde und ich ja auch noch einen Job habe, auf den ich mich konzentrieren muss.

lg
Gerold

[FuXz]

Ich glaub auch, dass ich das jetzt einfach sein lasse ...

Ich kann dir bei so komplexen Dingen nicht helfen, da es mich dann zu viel Zeit kosten würde und ich ja auch noch einen Job habe, auf den ich mich konzentrieren muss

Ok - ein Wink mit dem Zank Speitel .... Ich stell keine Fragen mehr!
Hab zwar noch einige aber naja...