Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 3
Kategorien Style Frage
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Hi

Meine Frage ich würde gerne meine Kategorien Links genauso wie auf dem Bild das ich mit angehangen habe aussehen lassen.
Hab die extension von Hr.Neitzel installiert bloss passt das aussehen nicht.

Also meine Frage wie könnte ich es so aussehen wie auf dem Bild ?

Image Attachments
g.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Kann mir denn keiner helfen :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Hallo,

ich selbst habe bisher noch keine Navigation links gemacht und auch die Erweiterung nicht installiert.
Schaue Dir doch mal den Quelltext an. Dort findest Du in der Navigation die ID’s bzw. Klassen der CSS.

Dann kannst Du das CSS in Deinem Template ändern. Also so würde ich vorgehen.

... ab und zu muss man sich in Geduld üben bis man im Forum eine Antwort bekommt. Aber dies ist
ja auch kostenfrei und immer noch besser als bei anderen Shopsystemen. Alternativ kann man sich
immer noch einen Magento Professionals wenden.

Grüße
Dscho

 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Hab ja jetzt ein wenig versucht mit der extension von Hr.Neitzel . jedoch sieht es trotzdem nicht so aus wie die.
Wo finde ich den die style class css der boxen wie zb warenkorb etc? da könnte ich es ja irgendwie in die css von Hr.Neitzel einfügen

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Werde dich da mal versuchen zu unterstützen. Dazu zunächst noch die wichtigste aller Fragen:
Welches Theme verwendest du? Muss ich wissen, da ich selbst in meinem aktuellen Projekt schon 2 komplett individuelle Layouts umgesetzt habe & eben die Namen der Klassen + IDs in den Themes teilweise komplett unterschiedlich heißen.

Wenn du noch kein Theme nachinstalliert hast, bitte mal eine Info - dann weiß ich bescheid.
Was die Navigation angeht, sehe ich da auf dem ersten Blick keinerlei Bedenken was die Umsetzung angeht.

Da wo “Herren” steht wird in dem Fall mit der Ausgabe des Storenamens gearbeitet und nicht direkt mit der Navi selbst. Auf die entsprechende CSS-Klasse wird dann per “background-image Anweisung” das kleine Icon zugeordnet und eben somit auch korrekt mit ausgegeben.

Liebe Grüße - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
Dscho
Sr. Member
 
Avatar
Total Posts:  236
Joined:  2007-10-05
Singen, Germany
 

Ich musste mich ja selbst dem Thema left navigation noch nicht stellen. Aber es gibt hier in den Foren eine Menge an Einträgen.

http://www.magentocommerce.com/search/results/?q=nav+left

Eventuell findest Du da etwas für Dich.

Viele Grüße
Dscho

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Was die Navigation auf der linken Seite angeht kannst du auch den folgenden Beitrag lesen. Da habe ich kürzlich was geschrieben.
http://www.magentocommerce.com/boards/viewthread/32721/#t109122

Liebe Grüße - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Hey danke für die hilfe.
Template ist das default template was dabei war.

Hab mich schon hier wochen lang schlau gemacht, und dank eurer hilfe hab ich ja schon die navi links.
Fragt mich nicht wie ich es hinbekommen habe smile aufjedenfall ist es jetzt da.

Bloss will ich halt den Kasten genauso haben wie zb bei newsletter.

Mit CSS hab ich so halbwegs erfahrung dankt xt aber hier komm ich net weiter :(

Hier ein bild wie es mom aussieht.

Image Attachments
kat.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Freut mich das du schon einmal CSS-Code gesehen hast, dass sollte die Sache erleichtern.  grin

Wenn du in der Datei boxes.css bist dann schau dir mal die folgenden Klassen an:

.base-mini - Das sind derartige Boxen selbst wie du sie auch beim Newsletter Box vorfindest
und
.base-mini .head - Das ist die Box die samt Grafik den Kopf der Box darstellt.

Darunter findest du in der gleichen CSS-Datei den gekennzeichneten Bereich “Sidebar Blocks”.
Darin auch die Klassen:

.mini-newsletter h4 { background-image:url(../images/icon_newspaper.gif); }
.mini-newsletter input.input-text { display:blockmargin:3px 0width:167px}

Diese stellen eben die Ausgaben innerhalb der jeweiligen Boxen da. Am Beispiel siehst du auch schon wie da die Grafik eingebunden ist.
Du findest alle genannten Klassen ab Zeile 459. Alternativ per Tastaturkürzel STRG+F im Editor suchen. (Auf einem Mac eben Apfel+F)

In Zeile 356 findest du die gesamte Spalte .col-left - außer für Anwendungen die die geasamte linke Seite betreffen eher unspannend.
Interessanter ist für dich die menu.css. Für dein aktuelles Vorhaben sind hier die Zeilen bis Nummer 39 interessant. Der Rest sind die Effekte wenn du noch Unterkategorien hast.

Auf .nav + folgende wendest du einfach die Eigenschaften der anderen Boxen an und deine Navi sollte dann so aussehen wie diese.

Bitte mal eine Rückinfo ob es klappt - es ist möglich das die Klassen durch die Nutzung der Navi links Erweiterung anders heißen, dazu kann ich nichts sagen, da ich die noch nie installiert habe.

Liebe Grüße - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

super danke das du dich so ins zeugs legst.
Bloss was ich nicht verstehe ist, welche sind für die Kategorien ? in der menu.css?

Die boxen haben folgendes ab 463 laut firebug

.base-mini {boxes.css (Linie 463)
background:#FFFFFF none repeat scroll 0 0;
border:1px solid #C4C1BC;
font-size:0.95em;
line-height:1.3em;

Was soll ich damit anfangen ich weiss ja nicht wo was hingehört :(

zuerst hab ich vermutet hier rein bei der menu.css

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:999; } { background:#f4f3f3; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

hat aber auch nichts gebracht

Firebug zeigt beim drüber gehen von den kategorien reset.css an ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

.base-mini - Mit dieser Klasse war gemeint das sie die Stile für eine solche Box enthält, damit du diese auf die #nav anwenden kannst.

Info zu Firebug: Es ist mögich das es Verschiebungen in den Zeilenangaben gibt, da Firebug wenn aktiviert temporär in das Dokument seine eigenen Style mit lädt. Damit man etwa bei klick auf “Untersuchen” über die einzelnen Bereiche in der Seite fahren kann und eben diese Rahmen usw. sieht.

Es geht um genau zu sagen um den folgenden Bereich in der menu.css wo du halt die gewünschten Style aus der boxes.css anwendest:

#nav { padding:0 20px; font-size:1.1em; }  /* Das ist die Box die einzelne Naviagtionspunkte bzw. Kategorien enthällt */

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels - Die einzelnen Kategorien */
#nav li { position:relative; text-align:left; } 
#nav li.over { z-index:999; }
#nav a, 
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; } 
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav li { float:left; }
#nav li.active a { color:#d96708; }
#nav a { float:left; padding:5px 12px 6px 8px; color:#a7c6dd; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#d96708; } /* Ende der Kategorien */

Die Katgorien sind somit alles was mit li also Listen und eben deren verschiedenen Zuständen wie etwa a:hover deklariert sind.

Beispiel: Die ID “#nav li.active a” ist die Kategorie wo du dich gerade befindest. 

Ganz wichtig, bei der Bearbeitung von Designs für Magento:
Schalte bitte auf jeden Fall den Cache aus! Sonst wirst du auch nach einer Bearbeitung der CSS eine alte Version der Seite ausgeliefert bekommen und siehst somit garnicht ob sich da etwas tut.

Bitte mal Info ob du es hin bekommst, ansonsten könnte ich das so bauen das es so in etwa aussieht wie auf deinem Bild oben.
Würde dir dann die Datei hier als Anhang mitschicken.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Ne schaff ich irgendwie nicht :( krieg noch herpes hier :D

Lieb von dir hab die mal drauf geladen

File Attachments
boxes.css  (File Size: 65KB - Downloads: 60)
 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Was soll ich denn mit der boxes.css? Das was gemacht wird, werde ich in der menu.css machen.

Was die CSS in Magento angeht: Hier waren Leute dran, die davon etwas verstehen und sich eben nicht etwa 3 Jahre unter dem bewegen was technologisch machbar ist wie es bei vergleichbaren Lösungen gegenwärtig der Fall ist.

Ich weiß das in der CSS wirkt als ziemlich viel und unübersichtlich aber glaube mir aufgrund der Design-Architektur
(mit der weitaus mehr möglich ist wie anderswo) hat das seinen Grund.

Bei Magento liegt im Direktvergleich mit weit verbreiteten Systemen eben nicht der absolute Schwerpunkt auf einfachste Bedienung, sondern eben auf ein Höchtmaß an Skalierbarkeit, die sprechen auch eine ganz andere Zielgruppe an.

Werde dir das machen und dann die Datei posten.

Liebe Grüße - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
LAZKOPAT
Jr. Member
 
Total Posts:  20
Joined:  2009-02-25
 

Verstehe. Ne ich bin begeister von magento ist nur gewöhnungsbedürftigt.
Das währe super. Freuuuuuuuuu

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

Hallöchen, hatte da einen kleinen Denkfehler drin. Da du ja diese vertikale Navigation Extension installiert hast - geht es um eine völlig andere Datei. Das wußte ich aber nicht weil ich ohne diese Extension arbeite.

Kein Wunder also, dass sich bei dir nichts getan hat. Durch die Erweiterung bekommst du eine weitere CSS-Datei hinzu nämlich “vertnav.css” - also nicht wundern, diese werde ich posten.

LG - Daniel

 
Magento Community Magento Community
Magento Community
Magento Community
 
ds_1984
Mentor
 
Avatar
Total Posts:  3116
Joined:  2008-12-09
Potsdam, Germany
 

@Rico: Ja, im Moment sehe ich da keinerlei Schwierigkeiten - trotzdem danke.

So es ist soweit - im Anhang die Datei (aktueller Stand).
Die Box ist ähnlich der Newsletter-Box. In Zeile 5 entscheidest du welches kleine Icon da angezeigt werden soll.
Zur Zeit das “icon_newspaper.gif”.

Ich habe die folgenden Klassen & IDs bisher dafür angefasst:
.vertnav-container (Die Navibox selbst)
#vertnav li a (ein normaler Navigationspunkt / Kategorie)
#vertnav .first a (der erste Link in der Navigation)

Anmerkung: Die restlichen CSS-Anweisungen wurden vorerst nicht berührt (zum Beispiel ein besuchter Link oder so).
Daher sind sie vorerst auskommentiert worden.

Was eben noch oben fehlt ist eine Ausgabe. Da sehe ich spontan 2 mögliche Wege.
1. Direkt ins Template rein und eben an entsprechender Stelle die Ausgabe des Shopnamens oder auch Wunschnamen erzwingen, oder
2. Eine Grafik bauen die sowohl das Icon wie auch die Hintergrundfarbe und den gewünschten Schriftzug trägt.

Kommentare in der CSS-Datei: Die zur Zeit deaktivierten CSS-Anweisungen sind mit /* (Anfang) und */ (Ende) gekennzeichnet.

Mache dir am besten ein BackUp der Original vertnav.css und probiere meine Datei mal aus & melde dich dann zurück.

LG - Daniel

File Attachments
vertnav.css  (File Size: 2KB - Downloads: 68)
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 3