Beiträge von danielgoehr

Zitat von immaterial

Allerdings gibt es noch ein (zweitrangiges) Problem mit der Vorschau im Editor: Dort wird die Fettschrift nämlich nach wie vor nicht angezeigt. Das ist beim Verfassen eines Artikels natürlich nicht ganz so bequem. Lässt sich dort auch was machen?

Ah, vergessen! Ja, es gibt dasselbe auch nochmal in der editor-style.css in Zeile 158. Da auch einfach den Wert von "font-weight" von "400" auf "bold" ändern.

Viele Grüße,
Daniel

Ah, gerade gesehen, dass die Theme Demo vom Twenty Sixteen ein Blockquote enthält. Abgesehen davon ist es natürlich trotzdem immer schöner, wenn man direkt einen Link hat.

Das was du suchst, steht in Zeile 385 in der style.css.

Du musst nur folgende Definition ändern:

blockquote strong, blockquote b {
    font-weight: [B]bold[/B];
}

Das lässt sich bestimmt ändern. Hast du mal einen Link zu einer Seite wo man sich das angucken kann (also Twenty Sixteen aktiviert und einem Blockqoute mit b oder strong Tag)?

Twenty Sixteen ist zwar ein Standard-Theme, aber ich hab es trotzdem gerade nirgendwo laufen und du beziehst dich ja vermutlich auf eine Seite, wo du das schon so einsetzt...

Das ist leider schwer zu sagen, weil man sich in Javascript die Funktionsnamen frei ausdenken kann/darf.

Wahrscheinlich findest du die entsprechende Funktion in einer der js-Dateien im Theme Verzeichnis. Im grunde lässt sich auch die Funktion selbst auf unterschiedliche Wege umsetzen, so dass ich nicht ganz genau weiß, wie die aussehen müsste/könnte. Aber vermutlich enthält sie irgendwas mit "offset", „navbar-transparent“ und wahrscheinlich „addClass“ und „removeclass“.

Sehr gern.

Das mit dem Javascript ist ansich auch keine große Sache, aber man muss halt mal in den Dateien nach der Funktion suchen und die dann entsprechend anpassen.

Zum Submenü:

Ich weiß gerade nicht genau, wie du es nach links gerückt hast. Aber ich vermute mal, hiermit:

.sub-menu .menu-item {

left: 20px !important;

position: relative;

}

Das passt von der Hierarchie nicht, weil du damit auch das Overlay (also das weiße halbstransparente, was erscheint, wenn man mit der Maus darüber geht) mit einrückst.

Nimm mal die left: 20px !important oben wieder raus und ergänz mal folgende Klassendefinition:

.navbar-custom .sub-menu > li > a, .navbar-custom .children > li > a {
padding-left: 38px;

}

Die rückt nur Bild und Text ein und lässt den Menüpunkt ansich an seiner ursprünglichen Position. Die 38px musst du ggf. noch ein bisschen "feintunen", bis es mittig ist.

Hallo Miriam,

das ist ein bisschen kniffelig.

Also generell würde ich erstmal das "!important" rausnehmen. Wenn ich das richtig sehe, hat das in dem Fall eigentlich keinen Vorteil und erschwert nur das jeweilige Überschreiben.
Warum hast du es denn überhaupt auf !important gesetzt? Wenn ich es rausnehme funktioniert hier trotzdem alles korrekt (schient zumindest erstmal so).

Zu Punkt 1)
Du kannst die einzelnen Seite über die Body-Class ansprechen. Beim Warenkorb ist das "woocommerce-cart".
Die Klassendefintion wäre also:

.woocommerce-cart .navbar-custom {
background-color: rgba(10, 10, 10, 0.9)
}

Für die Seite "Kasse" müsste es "woocommerce-checkout" sein (kann ich bei dir gerade nicht prüfen, weil man keine Produkte in den Warenkorb legen kann).
Aber vermutlich müsste es folgendermaßen funktionieren:

.woocommerce-checkout .navbar-custom {
background-color: rgba(10, 10, 10, 0.9)
}

Zu Punkt 2)
Das ist leider nicht so einfach machbar. Das ein/ausblenden ist nicht direkt über CSS gelöst, sondern über Javascript. Das heißt, man müsste die entsprechende Funktion in den Javascript Dateien suchen und umschreiben (oder eine zweite FUnktion für die Unterseiten ergänzen). Das dürfte nicht so wahnsinnig kompliziert sein, kann ich aber so nicht wirklich simulieren...

Ich hoffe, es hilft dir trotzdem ein bisschen.

Viele Grüße,
Daniel

Hallo,

du versuchst ein Element anzusprechen, dass es nicht gibt. Im CSS schreibst du #pgc-27-1. In deinem HTML Teil heißt es aber pg-27-1 (ohne das c).

Du musst außerdem die Größe des Elements festlegen, da es ansich ja leer ist und nur genauso groß sein soll, wie das Hintergrund-Bild.

Dazu kommt, dass "no-repeat" für "background-image" so nicht erlaubt bzw. nicht möglich ist. Wenn du es kombinieren willst, musst du entweder "background" verwenden oder es in zwei Eigenschaften aufteilen (wie in dem Beispiel unten).

Versuch es mal so:

<div class="panel-grid" id="pg-27-1">

<div class="panel-row-style-so-widget-sow-image-default-3f547a15eaaasow-image-containerso-widget-image so-widget-sow-image-default-3f547a15eaaa sow-image-container so-widget-image panel-row-style" style="width: 964px;position: center;margin-left: 150px;bottom: 0;padding: 0px 0px 0px 0px;"></div>

</div>

Und für den CSS Teil:

#pg-27-1 {
background-image: url("http://tamuc.de/wp-content/upl…lbkreis-wer.png");
background-repeat: no-repeat;
height: 57px;
width: 124px;
}

#pg-27-1:hover {
background-image:url("http://tamuc.de/wp-content/upl…lbkreis-wer.png");

}

Das ist jetzt nur Beispielhaft für eins der Elemente. Das kannst du aber so auch für die anderen Elemente übernehmen.

Viele Grüße,
Daniel

PS: Ich würde dir auch empfehlen, keine inline-styles zu verwenden (also das style="" Attribut). Schreib die stattdessen auch lieber in die style.css

Hallo DocMorris,

versuch mal folgendes:

Dies ist die Klasse, die für den Abstand über und unter dem Logo zuständig ist:

.header-inner-site-branding.header-logo-wrap-single {
padding: 94px 0;
}

Durch verändern des ersten Werts (aktuell 94px) kannst du den Abstand verringern.
Du kannst das entweder direkt in der style.css ändern (Zeile 2497) oder du kopierst die ganze Klasse und fügst sie ans Ende der style.css (oder im Child-Theme oder in eine andere css Datei, die nach der style.css im Theme eingebunden wird). Zu beachten ist, dass der Abstand in der Desktop und der Mobil-Variante an unterschiedlichen Stellen definiert ist. Die Definition für die Mobil-Version findest du in Zeile 1845.

Für den Abstand zwischen Header und Content musst du folgende Klassendefiniton (in Zeile 2830 in der style.css) ändern:

.page-main-header {
padding: 90px 0 0;
}

Wenn du die 90px verringerst, verringert sich auch der Abstand.
Auch hier ist der Abstand für die Mobil-Version separat definiert (in Zeile 1288 ).

Wenn du diesen Abstand noch weiter verringern möchtest, gibt es noch eine zweite Klasse (in Zeile 3087), die für diesen Abstand zuständig ist:

.content-wrap {
padding: 90px 0 30px;
}

Hier auch entsprechend die 90px verringern.
Auch hier gibt es für die Mobilversion eine zweite Klasse in Zeile 1158.
Hier kannst du den Abstand auch über den ersten Wert von "padding" verändern.

Ich hoffe, es hilft :-)

Viele Grüße,
Daniel

edit: Die Zahlen in Klammern wurden irgendwie in Smileys umgewandetlt Habe es noch nachträglich angepasst...