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!