Seite 1 von 2

Tool zum Nachverfolgen von CSS Code

Verfasst: 08.01.2016 17:05
von unicorn75
Hallo,
zuerst einmal, falls es der falsche Bereich ist, bitte ich einen Moderator darum, zu verschieben, danke!


Nun zu meiner Frage. Ich möchte wieder ein phpbb Forum eröffnen und plane gerade das Design (für Version 3.1). Ich hatte auf Version 2 jahrelang eines am Laufen aber dies ist schon länger her :D

Ich möchte das Standarddesign prosilver farblich anpassen (obwohl es eine Heidenarbeit ist und mit Sicherheit ein [fast] passender Style zu finden ist) und konnte dort einiges innerhhalb der colours.css einiges nachvollziehen, sprich welcher Stylesheet für welchen Bereich sich auswirkt. Dank dem Firebug Addon für Mozilla habe ich etwa 80% "entschlüsselt". Und dabei stellte sich mir die Frage, ob es ein kostenloses Tool gibt, welches den umgekehrten Weg geht.

Sprich ich markiere einen Stylesheet in der colours.css und es wird mir die Forenseite mit genau diesem Code angezeigt, sorry kann es nicht besser ausdrücken. Einige der Codeabschnitte kann ich einfach nicht zuordnen, ich habe hier bereits das Forum durchforstet aber werde nicht richtig fündig.

(Ich arbeite momentan rein offline an dem Forum per phase5Editor in einer XAMPP Umgebung)

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 08.01.2016 17:54
von Kirk
Hallo
Schau mal hier: KB:html_css_finden

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 08.01.2016 18:46
von unicorn75
Danke, habe ich irgendwie überlesen :lol:
Ich werde es am Sonntag spätestens probieren, klingt auf jeden Fall gut!

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 08.01.2016 20:13
von AYYILDIZLAR
Hallo,

Evtl. hilft dir noch dieser Artikel bei deiner Erstellung vom eigenen Style :wink:
KB:213

Grüße

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 09.01.2016 20:00
von unicorn75
Kirk hat geschrieben:Hallo
Schau mal hier: KB:html_css_finden
An sich wird da nur ein anderer editor verwendet, da bleibe ich bei meinem geliebten Phase 5 ;-)

Mir geht es darum, dass ich bei einigen einträgen in der colours.css einfach nicht nachverfolgen kann, wo es sich auswirkt also welcher forenbereich betroffen ist. Mit den Firebug erwische ich "nur" die bereich, welche eben gerade angezeigt werden. Wenn man ab nicht "zufällig" zum beispiel einen Beitrag schreibt und dort BBCode einfügt, wird einem dann auch nicht das dazugehörige Fenster mit dessen Farbcode angezeigt, also Beispielsweise:

Code: Alles auswählen

.codebox {
        background-color: lightgrey;
        border-color: grey;
}
Und ich finde nicht immer die bereiche und hoffte es gibt ein Tool in dem ich zum Beispiel

Code: Alles auswählen

.pollbar1 {
        background-color: khaki;
        border-bottom-color: khaki;
        border-right-color: khaki;
}
aus der colours.css markiere und dieses "ausführen" lassen kann, so dass dann ein Browserfenster aufgerufen wird und darin eben genau das Fenster, worin dieser Code zur Wirkung kommt

(Bitte jetzt nicht an den farbnamen stören ^^). Natürlich kann ich alle dateien nach pollbar durchsuchen und dor mich durchwühlen aber ich hoffte auf eine "einfache" lösung ;-)

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 10.01.2016 09:55
von Kirk
Wie sol dir Firebug was anzeigen was nicht vorhanden ist.
Wenn du jetzt z.b. die Farbe der codebox ändern willst, verfasst du einen Beitrag wo eben diese codebox vorkommt und untersuchst es mit Firebug.
Im linken Fenster hast du den html code und im rechten Fenster das css, es wird dir dort auch angezeigt in welcher css Datei und in welcher Zeile.
[ externes Bild ]

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 10.01.2016 11:09
von unicorn75
AYYILDIZLAR hat geschrieben:Hallo,

Evtl. hilft dir noch dieser Artikel bei deiner Erstellung vom eigenen Style :wink:
KB:213

Grüße
Danke.

Mehrfach gelesen, zum Teil auch verstanden :lol:

Ich habe eine eigene stylevorlage bereits am laufen, ist auch bereits aktiviert (wie erwähnt bisher offline, werde es erst online stellen, wenn das Design fertig ist) und per vorschau in den styles arbeite ich mich durch die verschiedenen Farben durch. Wenn ich dort alles begriffen habe, also sämtliche längs- und querlinienfarben :D geht es an das Design. Ich habe keinerlei Zeitdruck und ich kann nicht einmal sagen, warum ich gerade mit den Farben anpassen anfange aber ich denke, ich bin recht weit gekommen (85% aller Farbvorgaben sind "entziffert")
Kleine, wenn auch inzwischen fast vergessene Vorkenntnisse beim Programmieren sind zum Glück vorhanden.

Ich befürchte es wird richtig spannend, wenn ich den Style ändern möchte. Habe mich jetzt schon gewundert, als ich mir durchlas, wie man das Logo ändern kann und dabei auf den folgenden Codeabschnitt in der common.css verwiesen wird

Code: Alles auswählen

          #logo {
           float: left;
           width: auto;
           padding: 10px 13px 0 10px;
        }

        a#logo:hover {
           text-decoration: none;
        }

aber ich dies nicht finde, sondern jeweils nur die Einträge mit einem "." davor aber dies ist ein anderes Thema

Kirk hat geschrieben:Wie sol dir Firebug was anzeigen was nicht vorhanden ist.
Wenn du jetzt z.b. die Farbe der codebox ändern willst, verfasst du einen Beitrag wo eben diese codebox vorkommt und untersuchst es mit Firebug.
Im linken Fenster hast du den html code und im rechten Fenster das css, es wird dir dort auch angezeigt in welcher css Datei und in welcher Zeile.
[ externes Bild ]
Dies funktioniert so lange, wie ich das entsprechende Element m Firebug angezeigt bekomme. Es geht zum Beispiel nicht, wenn ich ein Thema abonniere und dann dort das Fenster mit der rückmeldung kurz erscheint. und ebenso, muss ich ja erst einmal herausfinden, welches Element wo zuständig ist. Sorry ich dachte es existiert auch eine andere Lösung, dann eben die "suche und du wirst (vielleicht) finden" Methode :D

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 10.01.2016 11:57
von Kirk
Was den Artikel in der KB angeht, da war ein Fehler drin, ist berichtigt.
unicorn75 hat geschrieben:wenn ich ein Thema abonniere und dann dort das Fenster mit der rückmeldung kurz erscheint.
Das stimmt, suche in der colours.css nach .phpbb_alert {, du kannst dir diese Box auch länger anzeigen lassen in dem du in der Foren-Übersicht auf "Alle Cookies des Boards löschen" klickst.

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 10.01.2016 13:22
von unicorn75
Kirk hat geschrieben:Was den Artikel in der KB angeht, da war ein Fehler drin, ist berichtigt.
...
Das stimmt, suche in der colours.css nach .phpbb_alert {, du kannst dir diese Box auch länger anzeigen lassen in dem du in der Foren-Übersicht auf "Alle Cookies des Boards löschen" klickst.
Dank sehr!

Re: Tool zum Nachverfolgen von CSS Code

Verfasst: 10.01.2016 20:11
von Talk19zehn
Hi, ihr könntet auch das AddOn WEB-Devoloper (Firefox) einsetzen, welches zusätzlich zahlreiche Untersuchungen ermöglicht. Das Einrichten erfordert allerdings ein gewisses Know-How. Die Kombination bringt hilfreiche Konstellationen zu Tage.
Fakt ist, dass ich, du, er, sie alle möglichen phpBB-Einstellungen (konform je phpBB-Version) aktiviert und Beispielthemen involviert haben muss, um an ein Ziel zu gelangen, zu prüfen, zu validieren etc.

Wie war das noch mit Hopfen und Malz ... :wink:

Grüße