Farbauswahl – 1 der 5 Button inaktiv

• 

  utasflow · Mitglied · Juli 17, 2013 at 10:33 am

  • Link kopieren
  • Thema zu Favoriten hinzufügen

  Hallo,
  Ich verwende Theme Able – Custom Design und möchte die Farbe in der Menueleiste ändern. Bei der Auswahl der Farben erscheint der letzte Button durchgestrichen/inaktiv. Ich weiß nicht ob dieser Button für die Menueleiste steht oder ob ich zwei Fehler habe.

  2. Den Rahmen um die einzelnen posts würde ich gerne deaktivieren.

  Liebe Grüße – Uta

  Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).

• 

  iqatrophie · Moderator · Juli 17, 2013 at 6:18 pm

  • Link kopieren

  1. Ich weiß leider nicht, was du mit „erscheint der letzte Button durchgestrichen/inaktiv.“ meinst. Hast du vielleicht einen Screenshot, der das Problem verdeutlicht?

  Was allerdings die Farben angeht, kannst du diese folgendermaßen ändern:

  Normale Schriftfarbe:

  .site-navigation a {
      color: #323232;
  }

  Schriftfarbe, wenn du mit dem Mauszeiger darüber schwebst:

  .site-navigation a:hover {
      color: #D42A2A;
  }

  Grauer Hintergrund, wenn du mit dem Mauszeiger darüber schwebst

  .main-navigation a:focus, .main-navigation li:hover > a, .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > a {
      background-color: #D7D7D7;
      background-image: linear-gradient(rgba(215, 215, 215, 0.8), rgba(180, 180, 180, 0.8));
      box-shadow: 0 1px 0 rgba(200, 200, 200, 0.8) inset, 0 2px 0 rgba(240, 240, 240, 0.8) inset, 0 -1px 0 rgba(165, 165, 165, 0.6) inset, 0 0 1px rgba(0, 0, 0, 0.19);
  }

  2. Den Rahmen entfernst du per

  .hentry { box-shadow: none; }

  Gruß
  Martin(IQ)

• 

  utasflow · Mitglied · Juli 17, 2013 at 7:17 pm

  • Link kopieren

  Screenshot:
  http://utasflow.files.wordpress.com/2013/07/farben.jpg
  Unten rechts der Button läßt sich nicht öffnen.

  Für die anderen Hinweise schon mal vielen Dank. Ich probiere sie gleich aus.

  LG Uta

• 

  iqatrophie · Moderator · Juli 17, 2013 at 8:14 pm

  • Link kopieren

  Jetzt verstehe ich, was du mit dem durchgestrichenen Button meinst. Das Able-Theme unterstützt nur 4 Farben bzw. vier Seitenelemente, die eingefärbt werden können. Aus diesem Grund wird der fünfte Kreis ausgegraut. Der letzte Kreis hat also nicht direkt etwas mit der Menüzeile zu tun. Das ist einfach nur Theme-bedingt.

  Mit Hilfe des Custom Design Upgrades (Benutzerdefiniertes Design) kannst du aber dennoch mit Hilfe von CSS Code jedes Seitenelement einfärben. Du musst die Änderungen nur im CSS-Bereich einfügen.

  Ich nehme an, es ist das Grau der Menüleiste, das dir missfällt. Wo du die dunkelgraue Hover-Farbe änderst, habe ich dir oben schon gezeigt. Das normale Grau der Menüzeile änderst du zusätzlich mittels

  .main-navigation, .menu-toggle { /* Small menu */
  	background-color: rgb( 240, 240, 240 ); /* #f0f0f0 */
  	background-image: -webkit-gradient( linear, left top, left bottom, from( rgba( 240, 240, 240, 0.8 ) ), to( rgba( 210, 210, 210, 0.8 ) ) );
  	background-image: -webkit-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  	background-image:    -moz-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  	background-image:     -ms-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  	background-image:      -o-linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  	background-image:         linear-gradient( rgba( 240, 240, 240, 0.8 ), rgba( 210, 210, 210, 0.8 ) );
  	filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#f0f0f0', endColorstr='#d2d2d2' );

  Die Farbe der Menüleiste setzt sich wie du sehen kannst, aus einer Hintergrundfarbe und zusätzlich einem Farbverlauf zusammen. Sofern du dich mit CSS-Farbverläufen nicht auskennst, könnte vielleicht diese Seite hilfreich sein. Die seltsamen Farbangaben kannst du z.B. mit diesem Online-Werkzeug ermitteln.

• 

  iqatrophie · Moderator · Juli 17, 2013 at 8:22 pm

  • Link kopieren

  Kleiner Nachtrag. Das weiter oben erwähnte dunkle Grau, dass du siehst, wenn du über einen Menüpunkt mit der Maus fährst (hover) war leider unvollständig, da der Farbverlauf für alle möglichen Browser unterschiedlich definiert ist.

  Korrekt wäre für die hover-Farbe also

  .main-navigation a:focus,
  .main-navigation li:hover > a,
  .main-navigation .current-menu-item > a,
  .main-navigation .current-menu-ancestor > a,
  .main-navigation .current_page_item > a,
  .main-navigation .current_page_ancestor > a {
  	background-color: rgb( 215, 215, 215 ); /* #d7d7d7 */
  	background-image: -webkit-gradient( linear, left top, left bottom, from( rgba( 215, 215, 215, 0.8 ) ), to( rgba( 180, 180, 180, 0.8 ) ) );
  	background-image: -webkit-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
  	background-image:    -moz-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
  	background-image:     -ms-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
  	background-image:      -o-linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
  	background-image:         linear-gradient( rgba( 215, 215, 215, 0.8 ), rgba( 180, 180, 180, 0.8 ) );
  	filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#d7d7d7', endColorstr='#b4b4b4' );
  }

  Um das Grau loszuwerden, musst du natürlich die aufgeführten Farben durch deine eigenen ersetzen.

• 

  utasflow · Mitglied · Juli 17, 2013 at 8:25 pm

  • Link kopieren

  Vielen Dank für die ausführlichen Erklärungen. Mit mehr Muße werde ich mit der Materie beschäftigen.
  Liebe Grüsse – Uta