Layout box category ändern oder separate Boxen anlegen?

[JanineB]

Hallo zusammen,
ich schon wieder
Diesmal möchte ich die Kategorie-Box bearbeiten. Im Endeffekt soll es für den Besucher des Shops so aussehen, als gäbe es mehrere Buttons, die zu der jeweiligen Kategorie führen (Bzw wie auf der rechten Seite zum Login, Warenkorb, ...).
Zum besseren Verständnis habe ich mal ein Bild gemacht, dass zeigt, wie ich mir das vorstelle.

Meine Frage ist, kann ich das Layout der bestehenden Box categories entsprechend verändern (im stylesheet?) oder müßte ich für jede Kategorie separate Boxen anlegen?

Vielen Dank schonmal und liebe Grüße
Janine

Linkback: https://www.modified-shop.org/forum/index.php?topic=36560.0

[flip]

So wie es im entwurf aussieht solltes das eigentlich mit css-only funktionieren.

Eventuell benötigst du einmal eine Umstrukturierung der html-struktur der box_categories.
Ein backup der alten box wäre sinnvoll.

Wie stellst du dir denn das 2. Level der Kategorien vor ? Oder bleibt es bei erster Ebene ?

[JanineB]

Hallo flip,
danke für deine schnelle Antwort.
Backup habe ich gemacht- so viel wie ich da dran rumexperimentiere (trial-and-error-Prinzip) ist das echt sinnvoll.
Ich wüßte schon nicht , wo und wie ich am Besten ansetzen sollte, wenn ich die Struktur umarbeiten wollte...
Nein, es gibt weitere Ebenen,. Optimalerweise "rutschen" die anderen Hauptkategorien dann weiter runter, so dass Platz für die Unterkategorien gemacht wird. Diese sollen im gleichen Prinzip wie die Hauptkategorien erscheinen, nur etwas eingerückt. (War das verständlich, was ich meine? Dazu habe ich noch keinen entwurf gemacht- außer im Kopp)

LG
Janine

[flip]

Ohne jetzt die schöne <ul> Struktur der box_categories.html zu zerreißen habe ich hier mal eine reine css-lösung als Denkanstoß für dich  => http://codepen.io/flues/pen/apYZOd

Du brauchst also nur das CSS der Box zu verändern wenn es am ende so aussehen soll.
Für das Beispiel habe ich die Box-Struktur aus dem tpl_modified verwendet (ohne boxtitel und trennlinie)

[JanineB]

Hallo Flip,
wow, 1000 Dank!
Das nenne ich schon Lösung- nicht nur Denkanstoß!
Jetzt noch ein paar Details ändern und dann ist's perfekt!

Mal gucken, ob ich das auch an anderen Stellen weiterverwurschtelt kriege.

Merci und LG
Janine

[JanineB]

N'abend nochmal,

Wenn ich den Code so einbaue, klappt das zwar mit dem Abstand und auch die Unterkategorien sind eingerückt, aber die weißen "Pseudo-Buttons" sind alle unterschiedlich lang. Das wirkt sehr unruhig- ich hätte die gerne gleich.

Nach einigem googlen und rumdoktern (ohne genau zu wissen, was ich da wie und warum eigentlich tu), bin ich jetzt zu folgendem Code gekommen, mit dem es funzt (nur falls noch ein Neuling ein ähnliches Vorhaben hat und in diesem Thread landet):
/* 12. START categories */
.box_category {
  background-color:#transparent;
  border-bottom:1px solid #transparent;
  margin-bottom:20px;
}
.box_category_line {
  height:1px;
  background-color:#transparent;
  margin: 0px 10px;
  border-top: 1px solid #transparent; 
}
ul#categorymenu {
}
ul#categorymenu li {
  list-style-type:none;
 }
ul#categorymenu li a {
 text-decoration:none;
  outline:none;
  display:block;
} 
ul#categorymenu li a:hover {
  text-decoration:none;
}
/* 1st TIER */
ul#categorymenu li.level1 a {
  color:#862633;
  font-size:15px;
  padding:8px 10px 8px 10px;
  background:#ffffff;
  border-bottom: 1px dotted #656565;
  margin-bottom:3em;
  position:relative;
  left:-10px;
  top:150px;
}
ul#categorymenu li.level1 a:hover {
  color:#fff;
  background: #862633;
}
ul#categorymenu li.activeparent1 a  { color:#7b3c62; background:#d7c9d1; }
ul#categorymenu li.active1 a  {   color:#7b3c62; background: #d7c9d1;}

/* 2nd TIER */
ul#categorymenu li.level2 a {
  color:#862633;
  background:#ffffff;
  padding:6px 0 6px 20px;
  border-bottom: 1px dotted #767676;
  font-size:13px;
  position:relative;
  left:30px;
 }
ul#categorymenu li.level2 a:hover {
  color:#ffffff;
  background:#862633;
}
ul#categorymenu li.activeparent2 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 10px 12px #d7c9d1; }
ul#categorymenu li.active2 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 10px 12px #d7c9d1; }

/* 3rd TIER */
ul#categorymenu li.level3 a {
  color:#ffffff;
  background:862633;
  padding:4px 0 4px 32px;
  border-bottom: 1px dotted #767676;
  font-size:13px;
  position:relative;
  left:50px;
}
ul#categorymenu li.level3 a:hover {
  color:#ffffff;
  background:#862633;
}
ul#categorymenu li.activeparent3 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 22px 11px #d7c9d1; }
ul#categorymenu li.active3 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 22px 11px #d7c9d1; }

/* 4th TIER */
ul#categorymenu li.level4 a {
  color:#862633;
  background:#ffffff;
  padding:4px 0 4px 46px;
  border-bottom: 1px dotted #767676;
  font-size:13px;
  position:relative;
  left:70px;
}
ul#categorymenu li.level4 a:hover {
  color:#ffffff;
  background:#862633;
}
ul#categorymenu li.activeparent4 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 34px 11px #d7c9d1; }
ul#categorymenu li.active4 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 34px 11px #d7c9d1; }

/* 5th TIER */
ul#categorymenu li.level5 a {
  color:#862633;
  background:#ffffff;
  padding:4px 0 4px 58px;
  border-bottom: 1px dotted #767676;
  font-size:13px;
  position:relative;
  left:90px;
}
ul#categorymenu li.level5 a:hover {
  color:#ffffff;
  background:#862633;
}
ul#categorymenu li.activeparent5 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 46px 11px #d7c9d1; }
ul#categorymenu li.active5 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 46px 11px #d7c9d1; }
/* 12. END categories */

Dazu muß ich sagen: ich habe bisher nur eine Unterkategorie, ich weiß nicht, ob das in der 6. auch noch wirkt...

Eine Anfängerin, die verdammt stolz auf Ihre ersten drei SChritte ist wünscht einen angenehmen Abend.
 

P.S.: Ihr bindet immer so hübsche Fenster mit den Codes ein- wie macht man das?

[Buggyboy]

Moin!

So meinst Du:

Code: PHP  [Auswählen]

/* 12. START categories */
.box_category {
  background-color:#transparent;
 border-bottom:1px solid #transparent;
 margin-bottom:20px;
}
.box_category_line {
  height:1px;
  background-color:#transparent;
 margin: 0px 10px;
  border-top: 1px solid #transparent;  
}
ul#categorymenu {
}
ul#categorymenu li {
 list-style-type:none;
 }
ul#categorymenu li a {
text-decoration:none;
  outline:none;
  display:block;
}  
ul#categorymenu li a:hover {
 text-decoration:none;
}
/* 1st TIER */
ul#categorymenu li.level1 a {
 color:#862633;
 font-size:15px;
  padding:8px 10px 8px 10px;
  background:#ffffff;
 border-bottom: 1px dotted #656565;
 margin-bottom:3em;
  position:relative;
  left:-10px;
  top:150px;
}
ul#categorymenu li.level1 a:hover {
 color:#fff;
 background: #862633;
}
ul#categorymenu li.activeparent1 a  { color:#7b3c62; background:#d7c9d1; }
ul#categorymenu li.active1 a  {   color:#7b3c62; background: #d7c9d1;}

/* 2nd TIER */
ul#categorymenu li.level2 a {
 color:#862633;
 background:#ffffff;
 padding:6px 0 6px 20px;
  border-bottom: 1px dotted #767676;
 font-size:13px;
  position:relative;
  left:30px;
 }
ul#categorymenu li.level2 a:hover {
 color:#ffffff;
 background:#862633;
}
ul#categorymenu li.activeparent2 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 10px 12px #d7c9d1; }
ul#categorymenu li.active2 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 10px 12px #d7c9d1; }

/* 3rd TIER */
ul#categorymenu li.level3 a {
 color:#ffffff;
 background:862633;
  padding:4px 0 4px 32px;
  border-bottom: 1px dotted #767676;
 font-size:13px;
  position:relative;
  left:50px;
}
ul#categorymenu li.level3 a:hover {
 color:#ffffff;
 background:#862633;
}
ul#categorymenu li.activeparent3 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 22px 11px #d7c9d1; }
ul#categorymenu li.active3 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 22px 11px #d7c9d1; }

/* 4th TIER */
ul#categorymenu li.level4 a {
 color:#862633;
 background:#ffffff;
 padding:4px 0 4px 46px;
  border-bottom: 1px dotted #767676;
 font-size:13px;
  position:relative;
  left:70px;
}
ul#categorymenu li.level4 a:hover {
 color:#ffffff;
 background:#862633;
}
ul#categorymenu li.activeparent4 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 34px 11px #d7c9d1; }
ul#categorymenu li.active4 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 34px 11px #d7c9d1; }

/* 5th TIER */
ul#categorymenu li.level5 a {
 color:#862633;
 background:#ffffff;
 padding:4px 0 4px 58px;
  border-bottom: 1px dotted #767676;
 font-size:13px;
  position:relative;
  left:90px;
}
ul#categorymenu li.level5 a:hover {
 color:#ffffff;
 background:#862633;
}
ul#categorymenu li.activeparent5 a  { color:#7b3c62; background:url(img/dotted1.gif) no-repeat 46px 11px #d7c9d1; }
ul#categorymenu li.active5 a  {color:#7b3c62; background:url(img/dotted1.gif) no-repeat 46px 11px #d7c9d1; }
/* 12. END categories */
 

Indem Du in der Bearbeiten-Leiste den PHP-Button drückst und Deinen Code zwischen die beiden php-Code Klammern setzt.

Mit verspielten Grüßen
Peter

[JanineB]

Moin,
genau so. Dankeschön.