Tool zum Nachverfolgen von CSS Code

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
unicorn75
Mitglied
Beiträge: 81
Registriert: 20.09.2005 15:49
Wohnort: Halle

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von unicorn75 »

Ja aber er bringt mich auch nicht vom Codeschnipsel einer css Datei zum jeweiligen Part der Webseite. Ansonsten aber sicherlich Hilfreich.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4918
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Talk19zehn »

Ja, der Eindruck entsteht und doch doch .. m.E macht´s die Kombination, welche nicht gaaaaanz so einfach ist (Informationen uvm.).

Grüße
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Klaus 1412
Mitglied
Beiträge: 14
Registriert: 22.08.2011 19:32

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Klaus 1412 »

Ich habe gut zwei Tage damit verbracht, meine Stylesheets neu anzupassen - mit Firebug für Firefox.

Im Prinzip ist es relativ einfach, wenn man sich ein wenig mit CSS auskennt. Im linken Fenster (im HTML-Code) den Bereich mit dem Mauszeiger überfahren, den man untersuchen möchte (wird in der Vorschau blau markiert). Das gesuchte HTML-Tag markieren und im rechten Teilfenster den CSS-Code untersuchen bzw. verändern. Die Live-Vorschau zeigt direkt die Auswirkung.

In der entsprechenden CSS-Datei den Wert entsprechend ändern, abspeichern und Seite neu laden.

Dummerweise gibt es im ungünstigsten Fall gleich mehrere Dateien, mit Einträgen für eine ID oder Klasse. Da schlägt halt der Informatiker durch: je komplizierter, umso besser - muss ja nicht jeder verstehen - oder anders ausgedrückt, man hätte es sicherlich auch einfacher gestalten können.

Um einen Syle wirklich gut anpassen zu können, muss man ggf. noch eigene Klassen dazupacken oder in nachfolgenden Beschreibungen ergänzen. :wink:
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4918
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Talk19zehn »

Tja, stimmt schon __> gewusst wie. Eine differenzierte Anleitung habe auch ich nicht gefunden. :cry:

Das KnowHow ist mühsam, wenn einem zur Umsetzung, dem Prozedere
Klaus 1412 hat geschrieben: In der entsprechenden CSS-Datei den Wert entsprechend ändern, abspeichern und Seite neu laden.

Dummerweise gibt es im ungünstigsten Fall gleich mehrere Dateien, mit Einträgen für eine ID oder Klasse. Da schlägt halt der Informatiker durch: je komplizierter, umso besser - muss ja nicht jeder verstehen - oder anders ausgedrückt, man hätte es sicherlich auch einfacher gestalten können.


.. so einiges nicht plausibel oder möglich ist, gar verständlich erscheint. Insofern kann man kaum abhelfen, wenn derartige Fragen gestellt sind. Die Antwort steht und fällt mit dem Hintergrundwissen. Man sollte ggf. den dortigen Support aufsuchen. Klar ist, dass phpBB.de dies nicht leisten kann.

Man kann nur ein Werkzeug kundtun, die Einstellungen und Vorgaben liegen allein beim Anwender. :wink: Eine verbindliche anstatt einer pauchalen Vorgehensweise gibt es eben nicht wirklich.

Grüße
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
unicorn75
Mitglied
Beiträge: 81
Registriert: 20.09.2005 15:49
Wohnort: Halle

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von unicorn75 »

Klaus 1412 hat geschrieben:Ich habe gut zwei Tage damit verbracht, meine Stylesheets neu anzupassen - mit Firebug für Firefox.

Im Prinzip ist es relativ einfach, wenn man sich ein wenig mit CSS auskennt. Im linken Fenster (im HTML-Code) den Bereich mit dem Mauszeiger überfahren, den man untersuchen möchte (wird in der Vorschau blau markiert). Das gesuchte HTML-Tag markieren und im rechten Teilfenster den CSS-Code untersuchen bzw. verändern. Die Live-Vorschau zeigt direkt die Auswirkung.

In der entsprechenden CSS-Datei den Wert entsprechend ändern, abspeichern und Seite neu laden.

Dummerweise gibt es im ungünstigsten Fall gleich mehrere Dateien, mit Einträgen für eine ID oder Klasse. Da schlägt halt der Informatiker durch: je komplizierter, umso besser - muss ja nicht jeder verstehen - oder anders ausgedrückt, man hätte es sicherlich auch einfacher gestalten können.

Um einen Syle wirklich gut anpassen zu können, muss man ggf. noch eigene Klassen dazupacken oder in nachfolgenden Beschreibungen ergänzen. :wink:
Naja wenn man ewig nichts mehr mit programmieren zu tun hatte und dann (fast) keinerlei css und php Vorkenntnisse besitzt versucht man es erstmal einfach zu halten ;-). Also Firebug ist auf jeden Fall sehr gut zu gebrauchen, habe leider wenig Zeit momentan aber kann immer mehr CSS Anweisungen in der colours.css nachvollziehen es wird aber kompliziert, wenn man den vorhanden/zuständigen Codebereich nicht "erwischt" beim durchgehen aller Forenbereiche. Ich werde hier bestimmt am Ende ein paar Anweisungen nachfragen müssen, wenn ich es einfach nicht finde aber ich probier gern auf eigene Faust.

P.S. wegen deinem Verweis auf Informatiker :grin: - ich habe auch vor 15 Jahren einen recht guten Abschluss als Anwendungsentwicklerin hingelegt aber darin keine Arbeit gefunden und kurze Zeit später aufgehört mich damit zu beschäftigen :oops:

Talk19zehn hat geschrieben:Tja, stimmt schon __> gewusst wie. Eine differenzierte Anleitung habe auch ich nicht gefunden. :cry:

Das KnowHow ist mühsam, wenn einem zur Umsetzung, dem Prozedere
Klaus 1412 hat geschrieben: In der entsprechenden CSS-Datei den Wert entsprechend ändern, abspeichern und Seite neu laden.

Dummerweise gibt es im ungünstigsten Fall gleich mehrere Dateien, mit Einträgen für eine ID oder Klasse. Da schlägt halt der Informatiker durch: je komplizierter, umso besser - muss ja nicht jeder verstehen - oder anders ausgedrückt, man hätte es sicherlich auch einfacher gestalten können.


.. so einiges nicht plausibel oder möglich ist, gar verständlich erscheint. Insofern kann man kaum abhelfen, wenn derartige Fragen gestellt sind. Die Antwort steht und fällt mit dem Hintergrundwissen. Man sollte ggf. den dortigen Support aufsuchen. Klar ist, dass phpBB.de dies nicht leisten kann.

Man kann nur ein Werkzeug kundtun, die Einstellungen und Vorgaben liegen allein beim Anwender. :wink: Eine verbindliche anstatt einer pauchalen Vorgehensweise gibt es eben nicht wirklich.

Grüße
Hier wird sehr gut weitergeholfen, bin vollauf zufrieden. ich arbeite mich jetzt eben nach und nach durch alles durch, dabei lerne ich es kennen. Mir ist es so lieber als einfach nur das neueste phpb runterzuladen, keinerlei Änderungen vorzunehmen und einfach als Forum anzubieten - wenn dann Probleme auftauchen, während das forum im betrieb ist - das wird lustig :D
Jetzt sind eben die Farben dran, danach muss ich mich in das Design einarbeiten wie statt Logo ein Banner, ohne die Site-Logo extension zu nutzen, welches sich möglichst an verschiedenen Seitengrößen anpasst. Die Suchbox nach unten etc. Aber dies ist alles später dran und dann gibt es bei Fragen ja das forum mit Lösungsansätzen und ansonsten darf man dumm fragen :lol:
Zuletzt geändert von unicorn75 am 17.01.2016 20:14, insgesamt 1-mal geändert.
Benutzeravatar
Kirk
Supporter
Supporter
Beiträge: 7878
Registriert: 24.05.2010 08:31
Kontaktdaten:

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Kirk »

Evtl. nützt einem dieses Video um sich mit Firebug etwas vertrauter zu machen.
unicorn75
Mitglied
Beiträge: 81
Registriert: 20.09.2005 15:49
Wohnort: Halle

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von unicorn75 »

Kirk hat geschrieben:Evtl. nützt einem dieses Video um sich mit Firebug etwas vertrauter zu machen.
Danke!

Vielleicht ne dumme frage aber trotzdem ^^ Spielt die Reihenfolge der css Anweisungen innerhalb der colours.css eine rolle?

Nachtrag weitere frage 8)

Code: Alles auswählen

html, body {
        color: black;

<!-- background-color: silver;  -->
        background: #FFCC00;
        background: -moz-linear-gradient(top, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFCC00), color-stop(66.6%, #ffffff) ,color-stop(100%, #339933));
        background: -webkit-linear-gradient(top, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        background: -o-linear-gradient(top, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        background: -ms-linear-gradient(top, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        background: -prefix-linear-gradient(top, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        background: linear-gradient(to bottom, #FFCC00 0%, #ffffff 66.6%, #339933 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFCC00', endColorstr='#339933', GradientType=0 );
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFCC00', endColorstr='#339933', GradientType=1)";

}
Wenn ich den Forenhintergrund mit einem Farbverlauf versehen will, reicht dann "background" oder muss ich "background-image" nutzen? Ich kann gerade nur mit dem aktuellen FF testen (werde morgen mal ein paar weitere Browser installieren) und da geht es so.

Ich habe das zu code der colours.css für die Button mit farbverläufe genutzt und eben dieses gefunden http://gradcolor.com/css3-gradient.php?c=3 wo es mit "background-image" umgesetzt wird.
Benutzeravatar
Talk19zehn
Ehemaliges Teammitglied
Beiträge: 4918
Registriert: 08.06.2009 12:03
Kontaktdaten:

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Talk19zehn »

Hi, das sind nur wenige Seiten; Sehr schön siehst du hier, was man u.U. momentan für Farbverläufe braucht, nutzt: http://www.colorzilla.com/gradient-editor/
Siehe dort z.B.:
background: #1e5799; /* Old browsers */ ... ff
Oder schaue auch mal hier vorbei: http://www.w3schools.com/cssref/pr_background-image.asp

Im Grunde kann man sich am QT von phpBB selbst orientieren.
Da die Styles Submission Policy (3.1.x) informiert, sei der Hinweis auszugsweise (siehe Browser==>For Board Styles) ...
...(...)...
•All submissions need to be compatible with the latest version of phpBB 3.1. See the Style Changes page for more information.
•Submissions must be compatible with Internet Explorer 8 (and above) and Firefox. ◦If there are minor display issues with your style in a specific browser (i.e. Internet Explorer 8), it may still be submitted as long as it does not interfere with any phpBB functionality. Please detail any known display issues with your style upon submission.
...(...)...
17.01.2016, 19:32
Quelle: https://www.phpbb.com/styles/ssp/
genannt. :wink:


Gruß
Beste Grüße
phpBB3 Designs: Stylearea Ongray-Designs
Klaus 1412
Mitglied
Beiträge: 14
Registriert: 22.08.2011 19:32

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von Klaus 1412 »

unicorn75 hat geschrieben:...
Vielleicht ne dumme frage aber trotzdem ^^ Spielt die Reihenfolge der css Anweisungen innerhalb der colours.css eine rolle?
...
Wenn ich den Forenhintergrund mit einem Farbverlauf versehen will, reicht dann "background" oder muss ich "background-image" nutzen? ...
Die Reihenfolge ist entscheidend. Eine nachfolgende Anweisung ersetzt eine Vorherige.
Genau das ist ja das Problem bei dem Stylesheet des Forums. Eine einzige Klassendefinition ist im ungünstigsten Fall in mehreren Dateien, also nicht nur in der colours.css, zu finden - genau das macht es verwirrend.

Also einfach mal bei Firebug im rechten Fenster (das mit den CSS-Anweisungen) nachschauen. Die oberste Anweisung ist die letzte Anweisung, die verwendet wird. Alle Anweisungen darunter, die durchgestrichen sind, wurden überschrieben und können genau genommen sogar ganz entfallen. In den Blöcken steht auch drin, in welcher Datei und Zeile sich diese Anweisung befindet. - Weiterhin - wenn hier etwas fehlt, also beispielsweise eine andere Schriftfarbe, fügt man diesen neuen Parameter einfach in der Anweisung, die an der obersten Stelle steht, mit ein.

Das Schöne ist ja, dass man so eine Änderung in Firebug direkt testen und sehen kann, bevor man in der css-Datei etwas ändert. :geek:
Aber Vorsicht, durch die unübersichtliche Verschachtelung und Kombination mehrerer Stile, kann sich so eine Änderung auch an einer anderen Stelle auswirken.

Die Frage mit 'background' oder 'background-image' ist relativ einfach zu beantworten: bei 'background-image' wird nur auf das Bild verwiesen. Bei 'background' kann auch auf das Bild verwiesen werden, d.h. 'background' ist die universelle Anweisung, in der die Farbe, das Bild, die Wiederholung usw. zusammen angegeben werden kann.
unicorn75
Mitglied
Beiträge: 81
Registriert: 20.09.2005 15:49
Wohnort: Halle

Re: Tool zum Nachverfolgen von CSS Code

Beitrag von unicorn75 »

Klaus 1412 hat geschrieben:
unicorn75 hat geschrieben:...
Vielleicht ne dumme frage aber trotzdem ^^ Spielt die Reihenfolge der css Anweisungen innerhalb der colours.css eine rolle?
...
Wenn ich den Forenhintergrund mit einem Farbverlauf versehen will, reicht dann "background" oder muss ich "background-image" nutzen? ...
Die Reihenfolge ist entscheidend. Eine nachfolgende Anweisung ersetzt eine Vorherige. ....Genau das ist ja das Problem bei dem Stylesheet des Forums. ...... Die oberste Anweisung ist die letzte Anweisung, die verwendet wird.

Das Schöne ist ja, dass man so eine Änderung in Firebug direkt testen und sehen kann, bevor man in der css-Datei etwas ändert. :geek:

Die Frage mit 'background' oder 'background-image' ist relativ einfach zu beantworten: bei 'background-image' wird nur auf das Bild verwiesen. Bei 'background' kann auch auf das Bild verwiesen werden, d.h. 'background' ist die universelle Anweisung, in der die Farbe, das Bild, die Wiederholung usw. zusammen angegeben werden kann.
Ok also mal lieber nicht in der css aufräumen und ordnen ^^
Ja eben bei firebug gesehen - schön, da kann man frei "rumschrauben"'
also bleibe ich gleich bei background

Talk19zehn hat geschrieben:Hi, das sind nur wenige Seiten; Sehr schön siehst du hier, was man u.U. momentan für Farbverläufe braucht, nutzt: http://www.colorzilla.com/gradient-editor/
....
Im Grunde kann man sich am QT von phpBB selbst orientieren.

Gruß
Ja ich hatte den code für die farbverläufe direkt aus dem prosilverstyle genommen und nur auf der seite verglichen, einzig eine zeile für älteren IE beigefügt
Antworten

Zurück zu „Styles, Templates und Grafiken“