Theme mit Superfish Menu und color-Module - Pixture Reloaded anpassen
Eingetragen von Xeto (209)am 07.09.2010 - 07:43 Uhr in
Hallo Freunde,
ich habe nun einige Zeit Basis-Themes and auch Themes mit erweiterten Features gesucht. Viele sind sicherlich interessant, jedoch keines entspricht voll meinen Wünschen...
Tests gingen bisher nicht in die Tiefe, aber haben mir schonmal einen ersten Eindruck vermittelt.
Als scheinbar brauchbare/ gute Basis hat sich das Theme basic gezeigt. Es bietet keine zusätzlichen Features, aber ein eine funktionierende Basis für das grundlegende Layout.
Nun war ich auf der Suche nach Themes mit Superfish Menu und vielleicht sogar mit color-Module Integration. Hier bin ich mit dem bisher besten/ interessantesten Theme Pixture Reloaded fündig geworden. Dieses bietet wirklich sehr interessante Konfigurationsmöglichkeiten (Primary Links oder Superfish in der Administration auswählbar, Anpassen der Farben über das Color-Module). Dieses Theme könnte meine Basis werden, WENN ich folgende beiden Punkte anpassen kann...
- Hintergrundfarbe/-bild einbinden
Gibt es da auch eine Möglichkeit den Hintergrund möglicherweise sogar per Color-Module zu setzen? Das wäre perfekt. Ansonsten könnte das auch per CSS in einer Datei gesetzt werden. Problematisch ist dieser Punkt besonders in Zusammenhang mit dem folgenden... - Runde Ecken entfernen
Zwar funktioniert dieses Theme ziemlich gut und über das Color-Module lässt sich vieles erreichen, aber mich stört der zuvor erwähnte weiße Hintergrund. Diesen zu Ändern führt bei den runden Ecken zu einem Problem. Die rundungen sind nicht transparent, sondern haben einen weißen Hintergrund. Ich würde lieber auf die runden Ecken verzichten und dies gegebenenfalls per CSS3 und/ oder Javascript lösen...
Gibt es hier einen einfachen und sauberen Weg das zu realisieren? Eine Möglichkeit wäre gewesen die runden Bilder zu bearbeiten und ersetzen durch normale eckige. Jedoch muss ich hier wohl nicht die Bilder in images bearbeiten, da trotz der neuen Bilder die runden Ecken erhalten geblieben sind (Ordner des color-Modules unter files/ gelöscht, neu gespeichert und Cache geleert) und sogar Bilder in einer anderen Farbe (als Test) wurden ignoriert?!? Ich schätze das color-Module habe ich noch gar nicht verstanden *g*
Ansonsten habe ich momentan eigentlich nichts auszusetzen. Und sollte ich nochmal ein eigenes Theme erstellen (z.B. aufbauend auf basic, so würde ich mal schauen, ob ich die Superfish-Implementierung auf Pixture Reloaded portiert bekomme :)
Grüße
Xeto
- Anmelden oder Registrieren um Kommentare zu schreiben
Hi Xeto, auch ich benutze
am 02.11.2010 - 22:53 Uhr
Hi Xeto,
auch ich benutze Pixture und Pixture Reload.
Die runden Ecken sind png Grafiken und gespeichert unter:
www.deineHomepage.de/sites/default/files/color/pixture_reloaded
(das letzte Verzeichnis ist gefolgt von Ziffern und Buchstaben)
Falls du mehrere Verzeichnisse davon hast, nimm das, was vom Datum/Uhrzeit am letzten verändert wurde.
Dort mußt du die PNG Grafiken mit einem Grafikprogramm laden (sollte sogar in Paint machbar sein)
und einfach die runden Ecken von Hand Eckig malen. (Also ein gleichfarbiges Quadrat drüber ziehen)
Anschließend speichern und wieder hochladen.
Viele Grüße Mike
Hi Mike, danke für deine
am 03.11.2010 - 18:27 Uhr
Hi Mike,
danke für deine Antwort :)
Damit werden aber nicht die Bilder des Themes an sich geändert, sondern die in der passenden Farbe generierten des Color-Modules, oder? Ich hätte die runden Ecken gerne raus aus dem Theme (unabhängig von der Farbgebung des Color-Modules), so das beim Ändern der Farben die runden Ecken nicht wieder erscheinen.
Eigentlich wäre es praktischer ohne. Vielleicht wird das auch mal im Theme an sich angepasst. Mit runden Ecken kann man jedenfalls nicht mit einem Huntergrundbild oder einer -farbe arbeiten.
Ich hab da seitdem nichts mehr gemacht, werde mir das aber nochmal anschauen. Optimal wäre ein Theme welches ohne Bilder auskommt und mit dem Color-Module funktioniert. So dass man Titelzeilen, Inhalte und Hintergrundfarben stylen kann... Aber sein Theme habe ich bisher noch nicht gefunden. Wird auch glaube vom Color-Module gar nicht ohne Bilder unterstützt glaube ich...
Ich habe Pixture Reloaded
am 01.01.2011 - 23:39 Uhr
Ich habe Pixture Reloaded unter Drupal 7 getestet und das sieht ziemlich gut aus. Zumindest macht eine Hintergrundfarbe hinter den runden Ecken keine Probleme. Dem Theme fehlt lediglich noch das die Inhalte (Profile, Nodes und besonders das Forum) passend der Farbeinstellungen gestylt wird.
Die Hintergrundfarben können problemlos in color.css geändert werden, sofern danach unter Files die generierten Dateien gelöscht und neu generiert werden...
pixture reloaded
am 04.08.2011 - 19:57 Uhr
Auch ich nutze pixture reloaded (Version 7.x-1.0 ). Ich habe superfisch ins Theme (Horizontale Navigation) eingebaut und habe an verschiedenen Stellen css Dateien angepasst.
Nun habe ich 2 Fragen:
1) Inzwischen gibt es eine Aktualisierung für pixture reloaded (Version 7.x-1.2). Beim Versuch diese Aktualisierung zu installieren war das Ergebniss, dass ich einen leeren Bildschirm hatte. Haben auch an dere User dieses Problem? Und wenn ja, wie habt ihr es gelöst?
2) Das Superfisch-Menü beinhaltet die Hauptnavigation meiner Seite. Es gibt einen Mouse-over Effekt. Dieser färbt den Link unter der Maus orange ein. Nun würde ich gerne, dass der jeweils aktive Link im Hauptmenü farblich hervorgehoben ist (entweder per Hintergrund oder durch Schritfarben-Änderung). Allerdings weiß ich nicht in welcher css-Datei ich da etwas ändern kann/muss :-(
Zum besseren Nachvollziehen, hier der Link zur Seite http://www.futur-zwei.org
spirit schrieb dass der
am 04.08.2011 - 20:04 Uhr
dass der jeweils aktive Link im Hauptmenü farblich hervorgehoben ist (entweder per Hintergrund oder durch Schritfarben-Änderung). Allerdings weiß ich nicht in welcher css-Datei ich da etwas ändern kann/muss :-(
Mein Firebug verrät mir, daß die Datei space-orange.css heisst!
space-orange.css
am 04.08.2011 - 21:44 Uhr
Okay, Danke! Die Datei habe ich gefundenen. Ein Blick in die Datei zeigt mir, dass das ganze sehr komplex ist. (Leider kenne ich mich nicht gut genug aus, um zu verstehen, wo genau ich den Aktiven Zustand manipulieren kann.
Ich poste einmal den Inhalt der Datei. Vielleicht kennt sich einer aus und kann mir sagen, an welcher Stelle ich eingreifen muss.
DANKE im Voraus!
.sf-menu.sf-style-space-orange {
float: left;
margin-bottom: 1em;
padding: 0;
}
.sf-menu.sf-style-space-orange.sf-navbar {
width: 100%;
}
.sf-menu.sf-style-space-orange ul {
padding-left: 0;
}
.sf-menu.sf-style-space-orange a {
border: 1px outset #000000;
color: #f1f1f1;
padding: 0.5em 10px;
white-space: nowrap;
}
.sf-menu.sf-style-space-orange a.sf-with-ul {
padding-right: 2.25em;
}
.sf-menu.sf-style-space-orange.rtl a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.sf-menu.sf-style-space-orange.sf-navbar a {
border: 0;
}
.sf-menu.sf-style-space-orange span.sf-description {
color: #13a;
display: block;
font-size: 0.8em;
line-height: 1.5em;
margin: 5px 0 0 5px;
padding: 0;
}
.sf-menu.sf-style-space-orange li,
.sf-menu.sf-style-space-orange li li,
.sf-menu.sf-style-space-orange li li li,
.sf-menu.sf-style-space-orange.sf-navbar {
/*Hintergrundfarbe für das ganze Mneü
Original: background: #333333 */
/* background: #BDD2FF; */
background: #82C3EB;
}
.sf-menu.sf-style-space-orange li:hover,
.sf-menu.sf-style-space-orange li.sfHover,
.sf-menu.sf-style-space-orange li.active a,
.sf-menu.sf-style-space-orange a:focus,
.sf-menu.sf-style-space-orange a:hover,
.sf-menu.sf-style-space-orange a:active,
.sf-menu.sf-style-space-orange.sf-navbar li li {
/* Hintergrund für Mouse over
original: background: #dc5300; */
background: #FD7708;
color: #ffffff;
}
.sf-menu.sf-style-space-orange.sf-navbar li ul {
background-color: #dc5300;
}
.sf-menu.sf-style-space-orange.sf-navbar li ul li ul {
background-color: transparent;
}
.sf-menu.sf-style-space-orange ul.sf-megamenu li.sf-megamenu-wrapper ol,
.sf-menu.sf-style-space-orange ul.sf-megamenu li.sf-megamenu-wrapper ol li {
margin: 0;
padding: 0;
}
.sf-menu.sf-style-space-orange ul.sf-megamenu li.sf-megamenu-wrapper a.menuparent {
font-weight: bold;
}
.sf-menu.sf-style-space-orange ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
display: inline;
float: left;
width: 12em;
}
.sf-menu.sf-style-space.rtl ul.sf-megamenu li.sf-megamenu-wrapper ol li.sf-megamenu-column {
float: right;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-1 ul.sf-megamenu {
width: 12em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-2 ul.sf-megamenu {
width: 24em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-3 ul.sf-megamenu {
width: 36em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-4 ul.sf-megamenu {
width: 48em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-5 ul.sf-megamenu {
width: 60em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-6 ul.sf-megamenu {
width: 72em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-7 ul.sf-megamenu {
width: 84em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-8 ul.sf-megamenu {
width: 96em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-9 ul.sf-megamenu {
width: 108em;
}
.sf-menu.sf-style-space-orange li.sf-parent-children-10 ul.sf-megamenu {
width: 120em;
}
spirit schriebOkay, Danke!
am 04.08.2011 - 22:00 Uhr
Okay, Danke! Die Datei habe ich gefundenen.
... Vielleicht kennt sich einer aus und kann mir sagen, an welcher Stelle ich eingreifen muss.
Ich hatte ja gehofft, dass Du auch dem Link folgst, um derartiges zukünftig selbst rauszufinden. Es ist nicht sehr kompliziert, derartige Befehle mit dem Firebug herauszufinden. Das Tool Firebug verrät Dir nicht nur die Datei, sondern sogar noch die Zeile, in der die CSS Anweisung steht!
Und wenn Du noch Tipps zu CSS generell benötigst, dann empfehle ich Dir http://www.css4you.de und http://de.selfhtml.org/css/
Firebug - css
am 05.08.2011 - 05:15 Uhr
Hy Thoor,
sorry, dass ich dem Link nicht nachgegangen bin! Aber beim ersten (zu schnellen) lesen habe ich es so interpretiert, dass es ein Link zu einem WIKI-Artikel, Glossar o.ä. ist (wie z.B. http://www.thoor.de/glossary/term/13). Da ich firebug aber eigentlich kenne und auch schon nutze, bin ich dann dem Link nicht gefolgt.Sorry!
Nicht zu letzt deine Tutorials haben mir den Einstieg in Firebug ermöglicht. Dafür (und für die vielen Video-Tutorials zu D7) herzlichen Dank. Das macht Newbies wie mir das Leben leichter und die Artikel/ Filme sind immer gut gemacht und leicht verständlich - prima!!
Mein Problem bleibt aber leider. :-(
Was ich erreichen möchte ist, dass Superfish den Link, der gerade aktiv ist, auch dann noch eingefärbt (enweder mit orangem Hintergrund, oder aber blauer Hintergrund mit oranger Schrift anzeigt.) wird, wenn die Maus nicht mehr über ihm ist. Das würde die Orientierung auf der Seite ändern.
Wenn ich in Firebug einen Link im Modus "Untersuchen der HTML Elemente" markiere/auswähle, dann erwische ich den Link nicht im aktiven Zustand sondern "nur" im Mouseover Zustand (oder?). Dadurch bleibt für mich das Problem: Die Datei space-orange.css scheint mir sehr Komplex. Zudem werden mir auch andere css-Dateien angezeigt, die herangezogen werden colors.css, pr.css,...
Vielleicht muss meine Frage genauer lauten: Wie finde ich mit firebug, die Stelle in der css-Datei, die den Zusatand regelt, den ein Link im Superfish Menü hat, der angeklickt ist und dessen Inhalt im Content angezeigt wird?
Da Dein Theme das nicht von
am 05.08.2011 - 07:19 Uhr
Da Dein Theme das nicht von Haus auf tut, musst Du das selbst als Anweisung hinterlegen.
Wenn du auf einem aktiven Menuepunkt bist und Dir mit unserem geschätzten Firebug einmal die Menuepunkte genauer ansiehst, dann wirst Du feststellen, dass die Listenzeichen des gerade aktiven Links im Gegensatz zu den anderen Menulinks
<li>durch Drupal eine Klasseactive-trailerhalten.Und dass ist genau der von Dir gesuchte Punkt! Du musst also in einer Deiner CSS Dateien die Anweisung
li.active-trail a { color: red;}unterbringen. Mehr ist es gar nicht, um den aktiven Menuepunkt hervorzuheben! Das kannst Du in jeder css-Datei einfügen, oder Du fügst Deinem Theme eine eigene CSS Datei hinzu ...Wer Augen hat zum Sehen ist klar im Vorteil ;-)
am 07.08.2011 - 06:36 Uhr
DANKE - Ja in der Tat. Ich bin überhaupt nicht auf die Idee gekommen, mit der Maus über die Links zu wechseln und den HTML-Code im Blick zu halten (obwohl die hinzugefügte Klasse bei mir schlicht "activ" heißt und nicht activ-trail). Ich habe immer einen Link angeklickt und dann versucht im styles-Reiter etwas zu entdecken.
Auch hilfreich:
Und dass ist genau der von Dir gesuchte Punkt! Du musst also in einer Deiner CSS Dateien die Anweisung li.active-trail a { color: red;} unterbringen. Mehr ist es gar nicht, um den aktiven Menuepunkt hervorzuheben! Das kannst Du in jeder css-Datei einfügen, oder Du fügst Deinem Theme eine eigene CSS Datei hinzu ...
Ich habe nämlich bisher einfach die css-Dateien in pixture reloades Überschrieben und hatte in der Tat nach einem Update des Themes das Problem, dass meine ganzen mühsam erarbeitet css.Definitionen überschrieben wurden. Okay, durch Fehler wird man klug und mühsam ernährt sich das Eichhörnchen ;-)
Danke für das unter die Arme greifen!
spirit schriebobwohl die
am 07.08.2011 - 07:38 Uhr
obwohl die hinzugefügte Klasse bei mir schlicht "activ" heißt und nicht activ-trail
Siehs Dir nochmal an! Das Listenelement des aktiven Links li hat die Klasse active-trail
Das Linkelement a hat die Klasse active!
Allerdings ist das Menu schlecht gemacht, denn die Klasse active-trail wird bei Menupunkten unterschlagen, die weitere Unterpunkte haben.
Vielleicht solltest Du Dir besser einmal das NICE MENU ansehen ... da stimmt die Zuordnung der aktiven Klassen. Ein Beispiel von mir: http://gratis-girokonto.eu ... Geh mal auf nen Unterpunkt und sieh Dir dort die Klassen bei li und a an ...
Jetzt geht es :-) Anpassen von superfish-Menü
am 27.08.2011 - 11:49 Uhr
Hallo zusammen,
war urlaubsbedingt eine Zeit lang Offline, deswegen erst jetzt noch einmal eine Reaktion.
Hab mich jetzt aber der Sache nochmal angenommen und jetzt herausgefunden, wie ich mein Problem lösen kann.
Zunächst Dank noch mal an "Thoor" !!
Ja, der Hinweis mit "active-trail" war natürlich richtig! Allerdings reicht es (bei mir?) nicht, ".active-trail a { irgendwas }" in meine css Datei einzutragen. Sondern ich musste in den superfish Einstellungen noch eine eigene css-Datei angeben, in der dann dieser Eintrag eingefügt wird.
Ich habe es bisher so verstanden, dass die Einträge in den css-Dateien des aktivierten Theme, die Standard css-Angaben überschreiben. Kann es sein, dass dies bei Modulen wie superfish ggf. anders ist und dass hier immer auch noch eine eigene (bzw. die) css-Datei (im aktuellen Theme) in der angegeben werden muss?
Wie auch immer es geht ;-)
DANKE
superfish vs. nice menu
am 30.08.2011 - 10:18 Uhr
Ich kann dir nur zustimmen! Das Nice Menü erscheint mir leichter zu handeln.
Pixture Reloaded und die Listen (Forum usw...)
am 05.05.2014 - 19:12 Uhr
Hi all,
Dies ist meine erste Anfrage hier im Forum. Abgesehen davon benutze ich drupal zum ersten mal. Das Buch "Webseiten erstellen mit Drupal 7" vom Franzis Verlag habe ich schon komplett durchgearbeitet (ist btw übrigends ein genialer Einstiegs-Leitfaden. Kann man nur empfehlen)
Im Grunde funktioniert auch alles so wie es soll...ABER...
Ich nutze Version 7.26 und habe das Pixture Reloaded 3.0 installiert (übrigends ein sehr cooles Theme) Das Problem ist, das alle Listen (zB Die Forenübersicht und einige andere Bereiche) vom Theme nicht erfasst werden. Da kann man einstellen was man will. Die Forenübersicht bleibt in den Standard-Farben und Optik.
Ich habe schon die Suchfunktion hier auf der Seite geschunden aber dennoch keine Lösung für mein Problem gefunden.
Mir scheint dieser Thread der Richtige dazu zu sein.
Mir ist klar, das Farben und Darstellungen per css-Dateien eingestellt werden können. Aber gibt es nicht eine Möglichkeit dies einfacher zu handhaben ?
Hier mal ein Link zu meiner Forenseite. Da wird das Problem deutlich: http://www.chiemgau-motorbike.de/?q=forum
Bei der Beitragserstellung und auch in der Beitragsansicht passt wieder alles. Siehe hier: http://www.chiemgau-motorbike.de/?q=node/26
Hat jemand nen Tipp wie man das lösen kann ?
Vielen Dank schonmal im Voraus!
Gruß,
Onkel
Onkel01 schrieb Mir ist klar,
am 06.05.2014 - 08:41 Uhr
Mir ist klar, das Farben und Darstellungen per css-Dateien eingestellt werden können. Aber gibt es nicht eine Möglichkeit dies einfacher zu handhaben ?
Wenn keine Klassen für das Forum hinterlegt worden sind, dann muss du es selber machen. Es gibt da vermutlich keinen einfacheren Weg.
Zu Not kannst du auch CSS Injector verwenden:
https://drupal.org/project/css_injector