[gelöst] Anpassung von Shoutbox
Eingetragen von fraweg (230)
am 24.01.2012 - 13:08 Uhr in
am 24.01.2012 - 13:08 Uhr in
Hallo zusammen,
ich bin noch etwas neu in diesen Dingen deswegen bitte ich um ein wenig Nachsicht bei mier vielleicht naiven Frage.
Ich habe Shoutbox im Einsatz und habe es mit Panel-Page (Two column) eingebunden. Nun siht da Ding etwas komisch aus (siehe Anhang). Nun weiß ich nicht genau wie und wo ich es anpassen kann.
Wäre über etwas Hilfe sehr Dankbar!
Viele Grüße
Anhang | Größe |
---|---|
Shout.jpg | 11.87 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
CSS
am 24.01.2012 - 13:48 Uhr
Hallo,
einfach mit CSS formatieren (firebug im firefox ist da Dein Freund). :)))
Hallo,danke für die schnelle
am 24.01.2012 - 15:03 Uhr
Hallo,
danke für die schnelle Antwort! Ja dort habe ich es gefunden. Nur wenn ich es richtig verstehe, muss ich es dann anch jedem Update von shoutbox neu machen? Gibt es da eine galantere Lösung über die template.php und wenn wie setze ich es um.. da fehlt es mir noch an wissen.
##############
"Habe gerade noch einn Problem festgestellt. Wenn ich das ganze im firebug mach klappt es. Wenn ich es direkt in der css-Datei mache klappt es nicht. Muss ich da wenn es um das Userprofil geht noch etwas besonderes beachten?"
Hat sich erledigt, war ein Fehler meinerseits...
##############
Beste Grüße
Die Shoutbox wird ja wohl
am 24.01.2012 - 14:43 Uhr
Die Shoutbox wird ja wohl nicht bei jedem Update ihre Ausgabe ändern und die Änderungen im CSS werden natürlich nie im Modul sondern immer nur in einem CSS-File in Deinem Theme eingetragen (sprich überschrieben). Dadurch überleben die auch einen Modul-Update.
Beste Grüße
Werner
Hallo und Danke für deine
am 24.01.2012 - 15:37 Uhr
Hallo und Danke für deine Antwort.
ich brauche da noch ein wenig Hilfe.
.shoutbox-add-form input#edit-message {
width: 80%;
height: 22px;
}
Das ist der entsprechende Code in der shoutbox.css des Modules. Ich habe dort den Wert "width: 80%;" von 99 auf 80% geändert.
Das ist ja nun so nicht gut. Wie ändere ich es in der CSS-file des Themes? Einfach den code von da oben so rein?
Auch ist bei mir im theme ein ganzer Ordner für CSS-Dateien. Wo und wie finde ich die richtige CSS Datei?
Danke nochmals für die Geduld bezüglich meiner naiven Fragen...
Kirsten1965 hat es doch schon
am 24.01.2012 - 15:39 Uhr
Kirsten1965 hat es doch schon geschrieben: Firebug oder auch jedes andere Programm, welches die CSS-Details anzeigt, ist dein Freund.
Suche nicht nach der "richtigen CSS-Datei", sondern lege auf jeden Fall eine neue CSS-Datei an und schreibe dort die Selektoren hinein, sonst bekommst du bei einem Update des Moduls Probleme, denn da werden ja deine Änderungen überschrieben. Die richtigen Selektoren zu finden ist manchmal gar nicht so einfach und erfordert ein bisschen Erfahrung, aber mit Firebug oder auch Dragonfly (so heißt es bei Opera) findest du sicherlich heraus, welche Selektoren zu ändern sind.
Ganz allgmein:
Am besten du änderst nie irgendwelche Dateien, die von Modulen kommen. Es ist immer ratsam, eigene Dateien anzulegen und dort die Änderungen zu machen.
lieben Gruß
Berthold
Hallo,das mit dem Firebug
am 24.01.2012 - 16:08 Uhr
Hallo,
das mit dem Firebug habe ich schon grundsätzlich verstanden. Aber dieser zeigt mir natürlich die shoutbox.css an was ich ja auch beschrieben habe. Auch das es nicht ratsam ist diese zu ändern habe ich schon auch verstanden.
Meine Fragen waren ja eher:
-
Wie ändere ich es in der CSS-file des Themes?
(Also wie bzw. in welcher Form und nicht womit).
- Diesbezuglich dann die Frage
"Einfach den code von da oben so rein?"
- Dann noch die Frage nach dem "wo"
Auch ist bei mir im theme ein ganzer Ordner für CSS-Dateien. Wo und wie finde ich die richtige CSS Datei?"
Jetzt verstehe ich dich so, dass ich eine eigene CSS-Dateie anlegen soll welche auf die shoutbox.css verweist?
Wenn das so ist wie mache ich es am besten. So wie hier beschrieben http://www.thoor.de/drupal/css-kniffe/eigene-css-datei-drupal-einbinden , oder gibt es da noch einen besseren Weg. Und ich verstehe auch in deschreibung nicht wie ein Verweis auf die shoutbox.css funktionieren würde.
Wenn ich das nun gemacht habe, kommt dann in die CSS-Datei einfach ein zu eins der oben beschriebene code rein also das hier ?
.shoutbox-add-form input#edit-message {
width: 80%;
height: 22px;
}
Danke nochmals
CSS bedeutet Cascading Style
am 24.01.2012 - 16:25 Uhr
CSS bedeutet Cascading Style Sheets...
also braucht es keinen Bezug oder so etwas zu deiner shoutbox.css
Wenn in der shotubox.css ein Selektor formatiert ist und du eine neue CSS-Datei anlegt, z.B. fraweg_shoutbox.css, die später geladen wird als die shoutbox.css (das kann man im Quellcode nachschauen), und du dort denselben Selektor anders formatierst, dann wird die zweite Formatierung des Selektor die erste in der Regel überschreiben (deshalb ja cascading).
Ich würde mal vermuten, dass dir noch gehörig Grundlagen fehlen, daran solltest du arbeiten.
lieben Gruß
Berthold Lausch
Bitte besorge Dir ein
am 24.01.2012 - 16:31 Uhr
Bitte besorge Dir ein Einführungsbuch zu CSS. Das ist nun mal Basiswissen beim Umgang mit einem CMS wie Drupal.
In Deinen eigenen CSS-File kommen die Selektoren
.shoutbox-add-form input#edit-message
und Deine Änderung. Alles andere bleibt wo es ist. Damit überscheibst Du genau diese eine Anweisung für das Input-Feld mit der ID "edit-message" die irgendwo in einem HTML-Codeblock mit der Klasse shoutbox-add-form vorkommt (das ist vermutlich die Form selbst). Also sieht die Anweisung in Deinem CSS-File so aus:.shoutbox-add-form input#edit-message {
width: 80%;
}
Beste Grüße
Werner
Danke für eure Antworten,ja
am 24.01.2012 - 16:52 Uhr
Danke für eure Antworten,
ja in der Tat fehlen mir noch einige Grundlage im CSS genau wie im PHP oder im Drupal an sich. Auch wäre es sinnvoll sich noch gut mit apache und mysql auszukennen......es geht letztlich um die veknüfungen der verschiedenen Themen. Und das kommt sicher auch alles noch...
Trotzdem ist "lerning by doing" und das Fragen neben RTFM auch ein adäquates Mittel um Zusammenhänge zu verstehen und das Studium etwas gezielter zu gestalten. IMHO
Ich werde mich mal mit euren Hinweisen diesem Problem widmen und dabei sicher ne Menge lernen...
Beste Grüße und Danke,
Frank
Sooo...ich habe mal ganz
am 26.01.2012 - 20:18 Uhr
Sooo...
ich habe mal ganz brav gelesen und mit nach der Empfehlung ein Subtheme erstellt in welchem ich die Änderungen in eine xyz.ccs eintrage.
Nun eine weitere Frage:
Wie mache ich es wenn ich php-code in einem Modul ändern möchte? Gibt es da auch eine galante Möglichkeit die mir jemand verraten mag?
Viele Grüße
Frank
Zunächst mal sollte man nie
am 26.01.2012 - 20:40 Uhr
Zunächst mal sollte man nie im originalen Modul ändern, sonst ist mit dem nächsten Update Deine Änderung weg. Dann kommt es darauf an, was Du ändern willst. Wenn es sich um Änderungen im Theming-Bereich handelt, stellen die Module oft Funktionen bereit, die man in der template.php im eigenen Theme überschreiben kann. Will man etwa an Formularen ändern, dann macht man das über ein eigenes Modul, in dem man dann hook_form_alter implementiert (oder hook_form_FORMID_alter). Da muß man immer individuell entscheiden, wie man vorgeht.
Beste Grüße
Werner
Hallo Werner, danke nochmals
am 27.01.2012 - 13:50 Uhr
Hallo Werner,
danke nochmals für deine ausführliche Antwort. Ich weiß noch nicht so genau was alter hook und form zu bedeuten hat. Mal sehen wann ich dahinter komme :-).
Ich will es mal an eine konreten Beispiel darstellen:
Ich habe ein feld als FieldGroup mit dem Modul Fieldgroup als vertokale Tabs dargestellt. Nun hat das Ding keine Überschrift (Zumindest habe ich nichts gefunden wo ich es hätte einstellen können). Nur die einzelnen Tabs haben eine Beschriftung.
Nun habe ich es mir mit Firebug angesehen und die Verantwortliche Zeile gefunden:
<div class="field-group-tabs-wrapper field-group-tabs group-test ">
<h2 class="element-invisible">Vertical Tabs</h2>
Nun habe ich zwei Probleme. Zum einen ist mir noch nicht klar wie ich im Firebug die dazugehörige Datei finde also wo der Code liegt. Und zum anderen wie ich das am Besten zu so etwas verwandle:
<div class="field-group-tabs-wrapper field-group-tabs group-test ">
<h2 class="visible">Interessen Tabs</h2>
Ach ja.. ich sollte noch hinzufügen, dass es sich um eine Seite des Useraccount handelt.
Ich bitte nochmals meine naiven Fragen zu entschuldigen...
Viele Grüße,
Frank
Hallo,hier nochmal eine
am 01.02.2012 - 12:34 Uhr
Hallo,
hier nochmal eine Frage:
Würde mit dem Oben genannaten PHP-Code dieser CSS code folgen um den Header wieder sichtbar zu machen?
div.field-group-tabs-wrapper,
.field-group-tabs group-test h2 {
visibility:visible;
}
Danke nochmals!
Frank
Hallo,ich denkeich sollte
am 01.02.2012 - 14:00 Uhr
Hallo,
ich denkeich sollte hier auch mal umziehen. Im Grunde ist das Problem mit der Shoutbox ja gelößt.
Hier ist der Link zu dem neuen Thread:
http://www.drupalcenter.de/node/39628
Danke nochmals für die geleistete Hilfe!
Viele Grüße,
Frank