Schriftgröße und Font ändern

Persephone

Hallo,

Die Überschrift der Widgets ist zu groß und muss geändert werden, auch möchte ich eine andere Schriftart benutzen.
In welcher php kann ich das bitte tun und an welcher Stelle muss die Änderung vorgenommen werden?

Danke für euer Hilfe.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

das läuft i.d.R. über die style.css deines (Child-)Themes.

Edi

Nichts PHP, CSS heisst das Zauberwort. Aber ohne zu wissen, welches Theme und welche Widgets beziehungsweise Plugins Du verwendest, oder einfacher: einen Link zu Deiner Website, ist es schwierig, Hilfe zu leisten.

Persephone

Zitat von Edi

Nichts PHP, CSS heisst das Zauberwort. Aber ohne zu wissen, welches Theme und welche Widgets beziehungsweise Plugins Du verwendest, oder einfacher: einen Link zu Deiner Website, ist es schwierig, Hilfe zu leisten.

Danke für eure Antworten.
Ich habe meine Website bereits einige male hier verlinkt, und auch auf meinem Profil. Was kann man vom anschauen davon ablesen? Ich gehe davon aus, dass die Vorgehensweise dafür immer die Gleiche ist.
Okay, also Stylesheet -Style CSS.
Ich weiß, es gibt ein Plugin WP Edit, aber ich möchte kein weiteres Plugin dafür installieren.

Gruß

helix

Kurzversion: F12.

Langversion (sorry, kann ich mir nicht verkneifen, braucht ja aber niemand zu lesen):
[Offtopic] Ach Per-Se-Fo-Neeeee …
Schau doch mal, wieviele User hier täglich ihre Fragen stellen. Und im Moment sind es noch wenige, weil Sommer ist und doch einige vernünftig genug zu sein scheinen, dass sie sich lieber an den Strand oder in den Biergarten begeben, als vor dem Rechner zu hocken …
… also, wenn du Hilfe haben willst, bist du gut beraten, es denen, die dir helfen sollen, so einfach wie möglich zu machen.
(Und sei doch froh, dass sich nicht jeder gleich an die Forenuserin mit dem Sauton erinnert.)
[/Offtopic]

Man kann sich vom Browser nicht (außer über PlugIns) das zugrundeliegende PHP anzeigen lassen, weil das bereits vom Server verarbeitet und dem Browser nur noch als HTML zur Verfügung gestellt wird. Aber man kann sich vom Browser den Quelltext als HTML und das CSS anzeigen lassen.
Praktischerweise gibt es Werkzeuge – Webentwicklerwerkzeuge / Webdeveloper-Tools –, mit denen sich die Kombination von HTML und CSS an der gewünschten Stelle anzeigen lässt. Das kannst du auch selber. Mit großer Wahrscheinlichkeit gibt es so ein Werkzeug auch in deinem Browser, versteckt hinter der F12-Taste …

Gruß
helix

maxe

ergänzend zu helix: um die Widget-Überschriften formatieren zu können, musst du über css die class .widget h2.widget-title ansprechen.
Child-Theme oder custom css plugin etc. musst du dann selber für dich entscheiden.

Edi

Zitat von Persephone

Was kann man vom anschauen davon ablesen?

Mit CSS können Elementen Eigenschaften zugewiesen werden. Das geht "kaskadierend" (CSS = Cascading Style Sheets). Was bedeutet, dass beispielsweise für alle Überschriften eine Farbe definiert ist, für Überschriften in einem Widget oder auch in einem einzelnen Widget davon abweichend zusätzlich eine bestimmte Grösse. Was man ablesen kann: Wie die verschiedenen Definitionen verschachtelt sind.

Die Titel der Widgets sind derzeit so definiert:

Code

.widget h2 {
    border-bottom: 1px solid #ebebeb;
    color: #6d7893;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 0;
    padding: 0 0 20px;
    text-align: center;
    text-transform: uppercase;
}

Alles anzeigen

Um die Schriftgrösse zu ändern, kannst Du somit den Wert für font-size anpassen.

Damit Anpassungen bei einer Aktualisierung des Themes nicht verloren gehen, empfiehlt sich entweder ein Child Theme (das Du möglicherweise auch für die Definition einer zusätzlichen Schriftart benötigst) oder eben doch ein Plugin wie Simple Custom CSS.

Persephone

Herzlichen Dank für eure Informationen.
Ich habe hier mal ab den Punkt: 9.0 Widgets die Daten von Style sheet kopiert, darin stehen die Widgets unter 12.2 Galleries, ist das vielleicht ein Fehler?

Code

/*--------------------------------------------------------------
9.0 Widgets
--------------------------------------------------------------*/






/*--------------------------------------------------------------
10.2 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}


/*--------------------------------------------------------------
10.3 Comments
--------------------------------------------------------------*/
.comment-content a {
    word-wrap: break-word;
}
.bypostauthor {
}


/*--------------------------------------------------------------
11.0 Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .paging-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
    display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */
.infinity-end.neverending .site-footer {
    display: block;
}


/*--------------------------------------------------------------
12.0 Media
--------------------------------------------------------------*/
.page-content img.wp-smiley,
.entry-content img.wp-smiley,
.comment-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
    max-width: 100%;
}


/*--------------------------------------------------------------
12.1 Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}


/*--------------------------------------------------------------
12.2 Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}
.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}
.gallery-columns-2 .gallery-item {
    max-width: 50%;
}
.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
    max-width: 25%;
}
.gallery-columns-5 .gallery-item {
    max-width: 20%;
}
.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}
.gallery-caption {}

Alles anzeigen

maxe

Zitat von Persephone

, ist das vielleicht ein Fehler?

Warum redest du von Fehler? Edi und ich haben dir doch Lösungen für deine Wünsche genannt.

Persephone

Zitat von maxe

Warum redest du von Fehler? Edi und ich haben dir doch Lösungen für deine Wünsche genannt.

Damit habe ich den Punkt: 9.0 Widgets gemeint, weil die im Style Sheet unter 12.2 Galleries stehen.

SirEctor

Dem Stylesheet ist in dem Fall egal wo das steht. Alles was mit /* bla bla */ da steht sind nur Kommentare und nicht wichtig. Die Gliederung trägt also nichts zur Sache bei.

Persephone

Zitat von Edi
Mit CSS können Elementen Eigenschaften zugewiesen werden. Das geht "kaskadierend" (CSS = Cascading Style Sheets). Was bedeutet, dass beispielsweise für alle Überschriften eine Farbe definiert ist, für Überschriften in einem Widget oder auch in einem einzelnen Widget davon abweichend zusätzlich eine bestimmte Grösse. Was man ablesen kann: Wie die verschiedenen Definitionen verschachtelt sind.
Die Titel der Widgets sind derzeit so definiert:
Code
.widget h2 {
    border-bottom: 1px solid #ebebeb;
    color: #6d7893;
    font-family: "Roboto Condensed",sans-serif;
    font-size: 30px;
    font-weight: 300;
    margin-bottom: 0;
    padding: 0 0 20px;
    text-align: center;
    text-transform: uppercase;
}
Alles anzeigen
Um die Schriftgrösse zu ändern, kannst Du somit den Wert für font-size anpassen.
Damit Anpassungen bei einer Aktualisierung des Themes nicht verloren gehen, empfiehlt sich entweder ein Child Theme (das Du möglicherweise auch für die Definition einer zusätzlichen Schriftart benötigst) oder eben doch ein Plugin wie Simple Custom CSS.

Ich habe das Plugin Simple Custom CSS installiert, gebe ich jetzt einfach den Code für Widget hier ein /* Füge hier Dein eigenes CSS ein */ ???

Dankeschön

Edi

Es reicht, wenn Du das eingibst, was Du anpassen möchtest. Also beispielsweise:

Code

.widget h2 {
   font-size: 20px;
}

Dein eigenes CSS überschreibt dann die vorgegebenen Definitionen.

Persephone

Zitat von Edi
Es reicht, wenn Du das eingibst, was Du anpassen möchtest. Also beispielsweise:
Code
.widget h2 {
   font-size: 20px;
}
Dein eigenes CSS überschreibt dann die vorgegebenen Definitionen.

Ich habe das jetzt so eingegeben aber es hat sich nichts verändert.

Edi

Dann versuche einmal folgendes:

CSS

.widget h2 {
   font-size: 20px !important;
}

Persephone

Zitat von Edi
Dann versuche einmal folgendes:
CSS
.widget h2 {
   font-size: 20px !important;
}

Klasse, du bist ein Goldstück, es hat funktioniert! (y)
Falls ich darf, möchte ich noch fragen, ob es hierfür auch so eine passende Regel gibt?

Herzlichen Dank für die Hilfe :!: <3

Persephone

Kann ich hiervon vielleicht eine eingeben und wenn ja, welche von den beiden?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
oder:
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no">

Danke!

Edi

Du müsstest schauen, ob das CSS des Themes Media Queries verwendet:

http://www.w3schools.com/css/css3_mediaqueries.asp

Und die dann entsprechend ergänzen.

Persephone

Schade, dass es alle guten Beschreibungen scheinbar nur in Englisch gibt. Nix gegen die deutschen Blogs aber die meisten schreiben über Sachen, von denen sie keine Ahnung haben.

Danke und einen schönen Sonntag

Edi

Dann hast Du nicht richtig gesucht. ;-)

Zwei gute Links:

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

http://www.intensivstation.ch/css3/media-queries/

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftgröße und Font ändern

Jetzt mitmachen!

Benutzer online in diesem Thema