Weiterlesen als Button | WordPress.org Deutsch

Gelöst docb7
(@docb7)

vor 4 Jahren
Hallo zusammen,
ich nutze das Twenty-Seventeen Theme und würde gerne den „More“-Tag verändern. Durch googeln und viel Try and Error habe ich einige CSS Lösungen gefunden, aber sobald ich einen Button draus bauen möchte, z.B. durch border: 1px solid #0f3647 or padding: 10px, erscheint eine zweite Box oberhalb des „Weiterlesen“ Eintrags. Ich vermute, das liegt an der screen-reader-text Zeile, bin mir aber nicht sicher. Hat jemand eine Idee, wie ich das hinbekommen kann?
Viele Grüße

CSS:
```
a.more-link {
		font-weight: bold;
		font-size: 1.3em;
		color : #fff;
		font-variant: small-caps;
		box-shadow: none!important;
		background-color: #21759B;
		border-radius: 3px;;
}
a.more-link:hover {
	background-color : #008800;
}
```
HTML:
```
<a class="more-link" href="https:...">
::before
<span class="screen-reader-text">„Page Title“</span> 
</span>
read more
</a>
::after
```
- Dieses Thema wurde geändert vor 4 Jahren von docb7.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)

Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren

Gibst du uns auch eine URL zur Webseite oder sollen wir das jetzt selber nachbauen? 🙂

Thread-Starter docb7
(@docb7)

vor 4 Jahren

Lol, sorry, natürlich nicht. Die Seite wäre docbb.de. Da sieht man auch schon die ersten (noch nich schönen) Gehversuche mit dem Button – padding etc. sind leider eben nicht möglich.
Viele Grüße
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren
Füg mal
```
.entry-content .more-link::before {
    display: inline;
}

.entry-content a.more-link {
  font-weight: bold;
  font-size: 1.3em;
  color : #fff;
  font-variant: small-caps;
  box-shadow: none;
  background-color: #21759B;
  border-radius: 3px;
  padding: 10px;
}
```
hinzu.

Wenn du beim Bearbeiten schon einen Cache verwendest, lässt sich die Herkunft der vorhandenen CSS-Regeln schlechter nachvollziehen. Besser immer erst mal ohne Cache arbeiten.

Du bekommst übrigens die Themes so wie sie sind zur Verfügung gestellt und kannst sie gerne nach deinen Wünschen anpassen. Das setzt aber CSS-Grundkenntnisse (wie z.B. die Gewichtung von Selektoren) voraus, die wir hier nicht vermitteln können. Support heißt auch nicht, dass wir auf Zuruf Themes nach deinen Wünschen anpassen. Nur so als freundlicher Hinweis. 😉
Thread-Starter docb7
(@docb7)

vor 4 Jahren
Mille, mille Grazie! Mega! Danke für den Hinweis zum Cache und auch den anderen Hinweis habe ich verstanden 😉 Grundkenntnisse kann man aber offensichtlich unterschiedlich definieren – ich war schon ganz stolz, überhaupt den a.more-link Selektor gefunden zu haben. Die Selektoren und ich waren schon immer wenig befreundet, obwohl ich da eigentlich schon mal ’nen Udemy Kurs gemacht habe. Aber gut, jetzt habe ich es wieder kapiert und kann auch die Lösung nachvollziehen. Von daher war das auf alle Hilfe zur weiteren Selbsthilfe 😉
Beste Grüße und herzlichen Dank nochmals!
- Diese Antwort wurde geändert vor 4 Jahren von docb7.
Moderator Bego Mario Garde
(@pixolin)

vor 4 Jahren

Gern geschehen und Danke für die Rückmeldung.

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)

Das Thema „Weiterlesen als Button“ ist für neue Antworten geschlossen.

Ansichten