Clansuite Community Forum

 
Willkommen Gast. Bitte einloggen oder registrieren.
Haben Sie Ihre Aktivierungs E-Mail übersehen?

Einloggen mit Benutzername, Passwort und Sitzungslänge
 
Seiten: [1]   Nach unten
  Drucken  
Autor Thema: CssBuilder jetzt als Modul  (Gelesen 819 mal)
0 Mitglieder und 1 Gast betrachten dieses Thema.
paulbr
Developer
*****
Offline Offline

Beiträge: 126


« am: Mai 04, 2011, 07:18:13 »

Der CssBuilder ist nun als Clansuite_Cssbuilder eingebunden.
Aufrufbar wie gehabt über die Toolbox.

Der neue CssBuilder sollte weitestgehend verständlich sein.
Im Formular an- /bzw. Abklicken was man möchte/nicht möchte.

Die Pfade sind voreingestellt für Backend (admin) und Frontend (standard).
Bei änderungen am css core, dem backend als auch dem frontend, kann
alles markiert werden. Somit wird alles auf einem Rutsch korrekt compiliert und gespeichert.

In core/tools liegt nun auch die Clansuite_Browserinfo.
Beispiel der Nutzung siehe theme.core.php zeile: 221
hier wird, wenn der browser IE ist die import_ie.css anstelle der import.css geladen.
Die browserweiche kann hier für alle in der Clansuite_Browserinfo definierten Browsern
genutzt werden.
Nur drauf achten, das man dann entsprechend im CssBuilder die browser und den postfix richtig setzt.
In der toolbox.module.php ist ein beispiele anhand vom IE ersichtlich.

Die core/css/csfw, admin/css und standard/css files und ini files habe ich aufgeräumt und neu am CssBuilder angepasst.

gruss
paul

-------------

EDIT:
Wir sollten die toolbox auch in dem Controlcenter irgendwo unterbringen, da es sehr lästig ist
jedesmal erst auf die frontpage zu wechseln, wenn man im controlcenter am Arbeiten ist.
Wo sollen wir das Unterbringen dort, im menü ?

Mir ist beim testen des CssBuilders aufgefallen, das der IE8 die Clansuite nicht anzeigen kann,
das ganze design ist zerschossen, wenn der debug eingeschaltet ist.
Nach Ausschalten des Debug wird die Clansuite normal angezeigt.
Liegt das nur an meinem IE oder habt ihr das auch?

Gespeichert
Jens-A. Koch
Maintainer
*
Offline Offline

Beiträge: 574

One-Man Team


« Antworten #1 am: Mai 05, 2011, 01:53:17 »

Läuft - schöne Sache. Danke fürs Einfügen in den Core und das Aufräumen des CSS Files!
Habe die Quellcodeformatierung vom CssBuilder ein wenig verbessert und "additionFiles" in "additionalFiles" umbenannt.


Zur Position für den CssBuilder im Backend.
Ja, ins ControlCenter Menü unter System -> Layout -> CssBuilder
Ich kümmer mich drum..

Zu Anzeigefehlern mit MSIE kann ich nichts sagen, aber evtl. ja Rikku..

-------

Nachtrag:

Ein CSS-Problem gibt es mit den Forms. Diese werden nicht mehr korrekt dargestellt.
Die Formattierungen sind in /core/form.css enthalten. Die wird zwar als "additional File" in
der cssBuilder.ini des Themes Admin angegeben, aber ... tja, nicht inkludiert oder nicht ausgewertet.

Im CSFW gibts für Forms die Datei /core/csfw/3-form/core-form.css.
In dieser Datei gibts ein paar Unstimmigkeiten, beispielsweise ".form fieldset".
Diese Zuweisung geht in fast allen Browsern nicht (ff4, chrome, opera).
Fieldset innerhalb eines Forms lässt sich nicht formatieren, das geht nur über das Fieldset selbst.

Wenn ich den Inhalt der /core/form.css auf die /core/csfw/3-form/core-form.css merge, dann
funktioniert es. Diesen Merge wollte ich erstmal vermeiden und frage daher...
Es sollte doch der Inhalt von core-form.css Bestandteil der import.css sein und
dann noch ein extra Import der form.css (auch in der import.css) erfolgen?
Dann müsste der Browser doch eigentlich die spezielleren Regeln der form.css anwenden.
Oder versteh ich das falsch?

Gruß Jens
Gespeichert

Keine Supportanfragen per PN oder Mail. Fragen bitte nur im Forum stellen (Wie man Fragen richtig stellt).
paulbr
Developer
*****
Offline Offline

Beiträge: 126


« Antworten #2 am: Mai 05, 2011, 07:31:59 »

Die /core/css/csfw/3-form/core-form.css ist im core-css also csfw.css eingebunden.
Die /core/css/form.css wird im /backend/admin/css/import.css importiert.

Es ist so, das zuerst die forms definitionen aus der csfw.css geholt werden (1. vorkommen),
wenn die gleichen selectoren in der /core/css/forms entalten sind, werden die gleichen
definitionen überschrieben (2. vorkommen), es sei denn in der /core/css/csfw/3-form/core-form.css
ist !important gesetzt, dann hat dieser gültigkeit.

Anders ausgedrückt:
Die /core/css/form.css wird gemerged mit der /core/css/csfw/3-form/core-form.css und gleiche
definitionen werden ersetzt.

/core/css/csfw/3-form/core-form.css:
    .form
    {
        background:#f4f4f4;
        border:1px #ddd solid;
        margin:0 0 1em 0;
        padding:10px;
        overflow:hidden;
    }

/core/css/form.css:
    .form {
        clear:both;
        color:#000;
        font-family:Arial, Verdana;
        font-size:12px;
        margin:10px;
    }

wird zusammengeführt und hat dann diese definition:
    .form {
        background:#f4f4f4;
        border:1px #ddd solid;
        margin:0 0 1em 0;
        padding:10px;
        overflow:hidden;
        clear:both;
        color:#000;
        font-family:Arial, Verdana;
        font-size:12px;
        margin:10px;
    }

Würde nun z.b.:
        ...
        margin:0 0 1em 0 !important;
        ...
        margin:10px;

stehen, dann würde das letzte margin ignoriert werden.
Wobei hier der IE mal ausgenommen werden sollte, der macht es nicht immer
korrekt.

In der /core/css/form.css ist die fieldset class falsch definiert.
Ich gehe mal davon aus, das diese fieldset definition nur gültig sein soll,
wenn vorher der selector .form steht?

Beispiel:
<div class="form">
  <fieldset...>

d.h. das definierte fieldset wird nur innerhalb der classe .form verwendet
fieldsets ausserhalb der classe .form verwenden die normale fieldset definition.

dann sollte die definition im css sein:   .form fieldset {
nicht:  fieldset.form {

Globale tags wie fieldset, pre etc.. ignorieren zum teil class definitionen wenn man
sie z.b. so <fieldset class="form"> definiert. ist wohl auch eine Browser geschichte.
Da hab ich schon oft Haare raufend fehler gesucht.

Was jeder Browser richtig definiert ist, wenn man diese globalen tags innerhalb
einer classe kapselt.

gruss
paul

Gespeichert
Jens-A. Koch
Maintainer
*
Offline Offline

Beiträge: 574

One-Man Team


« Antworten #3 am: Mai 05, 2011, 07:50:15 »

Danke für die Beschreibung.

Zitat
Ich gehe mal davon aus, das diese fieldset definition nur gültig sein soll,
wenn vorher der selector .form steht?

Beispiel:
<div class="form">
 &nbsp;<fieldset...>

d.h. das definierte fieldset wird nur innerhalb der classe .form verwendet
fieldsets ausserhalb der classe .form verwenden die normale fieldset definition.

dann sollte die definition im css sein: &nbsp; .form fieldset {
nicht: &nbsp;fieldset.form {

Ja, Fieldset innerhalb eines Forms ist eigentlich ".form fieldset".
Alles richtig gedacht, aber es funktioniert nichtmal im FF4.
Die Zuweisung an das Element scheitert, die Browser können es wohl nicht!
Nach meiner Ansicht bleibt nur Zurückrudern auf die normale Element-Selektion "formfield.form".
Oder das globale "form fieldset" (ohne Punkt).

So wie in dem Beispiel machen wir es schon.
Siehe beispielsweise im Settingsdialog für News.
http://localhost/clansuite/trunk/index.php?mod=news&sub=admin&action=settings
Dazu bitte mal den Inahlt von /core/form.css in /core/css/csfw/3-form/core-form.css kopieren (insbesondere .formline mitnehmen).

Das zweite ungelöste Problem siehst Du dann auch. Und zwar oben rechts.
Genannt "Upper-Right-Edge-Rounded-Corner-Problem".
Dabei wird eine einzelne Rounded-Edge eingezeichnet, obwohl sie da falsch ist.
Bislang Browsertechnisch ungelöst... bitte so lassen!
Der Fehler wird mit einem Browserupdate korrigiert und nicht durch uns!

Gruß Jens
Gespeichert

Keine Supportanfragen per PN oder Mail. Fragen bitte nur im Forum stellen (Wie man Fragen richtig stellt).
paulbr
Developer
*****
Offline Offline

Beiträge: 126


« Antworten #4 am: Mai 05, 2011, 09:58:38 »


Schande über mein Haupt Smiley

War zum Teil ein falscher Gedankengang von mir im CssBuilder.
Die additional files müssen vor den eincompilierten css files importiert werden.
Hab ich geändert und comitted.

Die definition  .form fieldset {  funktioniert nicht weil das eine classe ist.
Klassen in bezug auf tags wie fieldset funktionieren nicht 100%, besser gesagt kaum.

Allerdings funktioniert ein identifier, also die definition:
 #forms fieldset
 #forms legend

dazu in action_admin_settings.tpl diese änderung:
<div id="forms">
{$form}
</div>

und nun funktioniert es Smiley

gruss
paul

PS: ich hab in den 3 templates aus /backend/admin/module
den style link auf backend/admin/form.css gelöscht da dieser dort neh nicht existiert und
die form.css sowieso in der import.css vorhanden ist.

Gespeichert
Jens-A. Koch
Maintainer
*
Offline Offline

Beiträge: 574

One-Man Team


« Antworten #5 am: Mai 05, 2011, 11:22:44 »

Es funktioniert tadellos und sieht auch noch verdammt gut aus dabei &nbsp;L&#228;chelnd

Zitat
<div id="forms">
{$form}
</div>


Hmm, dann wird also jedes <form> von einem <div> umhüllt?
Mir wäre es ohne zusätzliches <div> Element natürlich lieber, aber wenn's läuft: ok.

Bitte nun nicht gleich alle {$form} Tags umklammern.
Die elegante Lösung besteht in einer Änderung des Formhandlers.
Dort wird ein zusätzlicher Standarddekorator eingesetzt und fertig.
Ich hab das dem Formhandler hinzugefügt ( http://trac.clansuite.com/changeset/5274 ).

Zitat
ich hab in den 3 templates aus /backend/admin/module
den style link auf backend/admin/form.css gelöscht da dieser dort neh nicht existiert und
die form.css sowieso in der import.css vorhanden ist.

Direkte Einbindungen gibts an so manchen Stellen. Werden wir nach und nach entfernen.
Gespeichert

Keine Supportanfragen per PN oder Mail. Fragen bitte nur im Forum stellen (Wie man Fragen richtig stellt).
paulbr
Developer
*****
Offline Offline

Beiträge: 126


« Antworten #6 am: Mai 06, 2011, 12:42:43 »


Zitat
Bitte nun nicht gleich alle {$form} Tags umklammern.
L&#228;chelnd

War ja nur eine notlösung zum testen.
Zudem hatte ich mich bisher mit dem Formhandler noch nicht auseinander gesetzt
daher wusste ich gar nicht wo ich das hätte machen müssen.

Ja gemeinsam klappt alles, deshalb Teamwork Smiley

Gespeichert
Jens-A. Koch
Maintainer
*
Offline Offline

Beiträge: 574

One-Man Team


« Antworten #7 am: Mai 30, 2011, 06:31:21 »

@Paul
 
Ich hab zufällig die Seite von CSS3Pie entdeckt, als ich nach "Runde-Ecken für Tabs" gesucht habe.
Dort geht es um CSS 3 Unterstützung für MSIE.
Damit würde box-shadow, border-radius etc. wohl einfach hinzubekommen sein.
Können wir das irgendwie gebrauchen?



Gespeichert

Keine Supportanfragen per PN oder Mail. Fragen bitte nur im Forum stellen (Wie man Fragen richtig stellt).
paulbr
Developer
*****
Offline Offline

Beiträge: 126


« Antworten #8 am: Mai 31, 2011, 02:15:05 »

Es wird nicht immer alles sauber angezeigt, aber sollte man auf jedenfall mit aufnehmen.
Das border-radius hatte ich schon einmal eingesetzt, bei boxes zumindest geht es ganz gut.

gruss
paul
Gespeichert
Seiten: [1]   Nach oben
  Drucken  
 
Gehe zu:  


Powered by SMF 1.1.16 | SMF © 2006-2009, Simple Machines

Google visited last this page Gestern um 06:16:44