Schriftart im Header: Fragen über Fragen.

phototobi

Hallo, ich möchte gerne in einem Theme für meine Frau, die jetzt auch bloggen will, die Schriftart im Header ändern.

Wie macht man das?

Welche kann man alles wählen, wenn ich das richtig verstanden habe, muss diese ja bei dem Pc, wo die Seite angezeigt wird auch installiert sein, oder?

Ach ja, das ist jetzt die "style.css" es gibt aber auch die style_ie.css sowie die style_ie6.css

Wofür soviele?

Hier ist die CSS Datei:

Code

/*
Theme Name: Vintage Paper Theme
Theme URI: [url=http://ophelianicholson.com]Web Design | Custom & Premium Wordpress Themes | Website Design[/url]
Description: Vintage wordpress theme
Version: 1.0
Author: Ophelia Nicholson
Author URI: [url=http://ophelianicholson.com]Web Design | Custom & Premium Wordpress Themes | Website Design[/url]
*/
 
/* General */
body {
 margin: 0;
 background: #350b0c;
}
h1, h2, h3, h4 {
 margin: 0;
}
img {
 border: 0;
}
.clear {
 clear: both;
 height: 0;
 overflow: hidden;
}


/* Page */
#page {
 margin: 0 auto;
 width: 990px;
 background: url("images/page_bg.jpg") repeat-y;
}
#page-in {
 background: url("images/page.jpg") no-repeat;
 width: 990px;
}


/* Header */
#header {
 width: 990px;
 height: 250px;
 position: relative;
}
 /* Header - Info */
 
 #header #header-info {
  position: absolute;
  top: 95px;
  left: 335px;
  width: 470px;
  text-align: center;
 }
 
 #header #header-info h1 {
  color: #000000;
  font: bold 40px Century Gothic, Helvetica, Arial, sans-serif;
  padding-bottom: 5px;
 }
 
 #header #header-info h1 a {
  color: #000000;
  text-decoration: none;
 }
 
 #header #header-info .description {
  color: #000000;
  font: bold 20px Century Gothic, Helvetica, Arial, sans-serif;
 }


/* Main */
#main {
 width: 990px;
}
 /* Main - Content */
 
 #content {
  float: left;
  width: 410px;
  padding: 0 25px 0 335px;
 }
 
 /* Main - Content - Post */
 
 #content .post {
  float: left;
  margin-bottom: 40px;
  width: 410px;
 }
 
  /* Post - Title */
  
  #content .post .post-title {
   width: 410px;
   color: #000000;
   font: bold 12px Century Gothic, Helvetica, Arial, sans-serif;
   text-align: center;
   background: url("images/post_title.png") no-repeat left bottom;
   padding-bottom: 10px;
  }
  
  #content .post .post-title a {
   color: #000000;
   text-decoration: none;
  }
  
  #content .post .post-title a:hover {
   text-decoration: underline;
  }
  
  #content .post .post-title h2 {
   color: #000000;
   font: bold 23px Century Gothic, Helvetica, Arial, sans-serif;
  }
  
  #content .post .post-title h2 a {
   color: #000000;
   text-decoration: none;
  }
  
  #content .post .post-title h2 a:hover {
   text-decoration: underline;
  }
  
  /* Post - Entry */
  
  #content .post .post-entry {
   font: normal 12px/18px Verdana;
   color: #000000;
   width: 400px;
   padding: 0 5px;
  }
  
  #content .post .post-entry a {
   color: #000000;
   text-decoration: underline;
  }
  
  #content .post .post-entry a:hover {
   text-decoration: underline;
  }
  
  #content .post .post-entry a.more-link {
   font-weight: bold;
  }
  
  #content .post .post-entry blockquote {
   border-left: 10px solid #d1a15e;
   margin: 0px 30px;
   padding-left: 15px;
  }
  
  /* Post - Info */
  
  #content .post .post-info {
   width: 410px;
   height: 25px;
   padding-top: 5px;
   clear: both;
   font: bold 12px Georgia, Verdana;
   color: #000000;
   text-align: center;
   background: url("images/post_info.png") no-repeat center bottom;
  }
  
  #content .post .post-info a {
   color: #000000;
   text-decoration: none;
  }
  
  #content .post .post-info a:hover {
   text-decoration: underline;
  }
  
  /* Post - Subtitle */
  
  #content .post h3 {
   color: #000000;
   font: bold 16px Georgia, Verdana;
   margin: 20px 0 5px 0;
  }
  
  /* Post - Comments */
  
  #content .post .comments {
   font: normal 12px/18px Verdana;
   color: #000000;
   width: 400px;
  }
  
  #content .post .comments ol {
   margin: 10px 0;
   padding-left: 25px;
  }
  
  #content .post .comments ol li {
   padding: 5px;
  }
  
  #content .post .comments ol li a {
   color: #000000;
   text-decoration: underline;
  }
  
  #content .post .comments ol li a:hover {
   text-decoration: underline;
  }
  
  #content .post .comments ol li.alt {
   background: #d1a15e;
  }
  
  #content .post .comments ol li cite {
   color: #000000;
   font-style: normal;
   font-weight: bold;
  }
  
  #content .post .comments ol li cite a {
   color: #000000;
   text-decoration: underline;
  }
  
  #content .post .comments ol li cite a:hover {
   text-decoration: underline;
  }
  
  #content .post .comments ol li .commentmetadata a {
   color: #000000;
   text-decoration: underline;
  }
  
  #content .post .comments ol li .commentmetadata a:hover {
   text-decoration: underline;
  }
  
  /* Post - Comment Form */
  
  #content .post #commentform {
   font: normal 12px/18px Verdana;
   color: #000000;
   width: 375px;
   margin: 0;
   padding-left: 25px;
  }
  
  #content .post #commentform a {
   color: #000000;
   text-decoration: underline;
  }
  
  #content .post #commentform a:hover {
   text-decoration: underline;
  }
 
 /* Main - Content - Navigation */
 
 #content .navigation {
  font: bold 12px Georgia, Verdana;
  color: #000000;
  float: left;
  margin-bottom: 40px;
  width: 400px;
  padding: 0 5px;
 }
 
 #content .navigation a {
  color: #000000;
  text-decoration: none;
 }
 
 #content .navigation a:hover {
  text-decoration: underline;
 }
 
  #content .navigation .navigation-previous {
   float: left;
  }
  
  #content .navigation .navigation-next {
   float: right;
  }
 
 /* Main - Sidebar */
 
 #sidebar {
  float: left;
  width: 200px;
  font: normal 12px/18px Century Gothic, Helvetica, Arial, sans-serif;
  color: #000000;
  margin-bottom: 20px;
 }
 
 #sidebar a {
  color: #000000;
  text-decoration: underline;
 }
 
 #sidebar a:hover {
  text-decoration: underline;
 }
 
 /* Sidebar - Boxes */
 
 #sidebar .sidebar-box {
  width: 200px;
  margin-bottom: 20px;
 }
 
  /* Sidebar - Titles */
  
  #sidebar h3 {
   font: bold 14px/25px Century Gothic, Helvetica, Arial, sans-serif;
   color: #000000;
   width: 200px;
   height: 25px;
   background: url("images/sidebar_title.png") no-repeat left bottom;
   text-align: center;
   padding-bottom: 7px;
  }
  
  /* Sidebar - Menus */
  
  #sidebar ul {
   margin: 0;
   padding: 5px 0 0 30px;
   list-style-type: none;
  }
  
  #sidebar ul li {
   color: #000000;
   font: bold 12px/24px Century Gothic, Helvetica, Arial, sans-serif;
   background: url("images/sidebar_menu.gif") no-repeat;
   padding-left: 20px;
  }
  
  #sidebar ul li a {
   color: #000000;
   text-decoration: none;
  }
  
  #sidebar ul li a:hover {
   text-decoration: underline;
  }
  
   /* Sidebar - Menus - Submenus */
   
   #sidebar ul li ul {
    padding: 0 0 0 10px;
   }
  
  /* Sidebar - Forms */
  
  #sidebar #searchform {
   margin: 0 auto;
   padding: 10px 0;
   width: 200px;
   text-align: center;
  }
  
  #sidebar #searchform #s {
   width: 150px;
  }
  
  /* Sidebar - Tables */
  
  #sidebar #calendar_wrap {
   margin: 0 auto;
   padding-top: 5px;
   width: 144px;
  }
  
  #sidebar #calendar_wrap caption {
   font-weight: bold;
  }
  
  #sidebar #calendar_wrap tbody {
   text-align: right;
  }
  
  #sidebar #calendar_wrap tfoot #next {
   text-align: right;
  }
  
  #sidebar #calendar_wrap #today {
   font-weight: bold;
  }
  
  /* Sidebar - Texts */
  
  #sidebar .textwidget {
   padding: 5px 5px 0 5px;
  }


/* Footer */
#footer {
 margin-left: 280px;
 width: 600px;
 height: 15px;
 padding-bottom: 20px;
 background: url("images/footer.png") no-repeat;
 color: #000000;
 font: bold 7px/25px Verdana;
 text-align: center;
}
#footer a {
 color: #000000;
 
}

Alles anzeigen

Ach ja, die neue schrift sollte etwas "geschwungen" sein.

Danke
Tobi

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

marX

Zitat von phototobi

Schriftart im Header ändern. Wie macht man das?

font: Schrift: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Zitat

Welche kann man alles wählen, wenn ich das richtig verstanden habe, muss diese ja bei dem Pc, wo die Seite angezeigt wird auch installiert sein, oder?

Richtig. Damit reduziert sich die Palette auf einige wenige. Für was ausgefallenes nimmst du besser Grafiken.

Zitat

Ach ja, das ist jetzt die "style.css" es gibt aber auch die style_ie.css sowie die style_ie6.css

IE = Internet Explorer. Der bekommt hier wohl einige Styleangaben, da er sich manchmal anders verhält als erwartet.

phototobi

[quote='marX','RE: Schriftart im Header: Fragen über Fragen.']

Richtig. Damit reduziert sich die Palette auf einige wenige. Für was ausgefallenes nimmst du besser Grafiken.

Und wie geb ich das ein, z.b. zu einer gif oder jpg Datei ?

harry22

hol dir folgendes firefox-addon:https://addons.mozilla.org/de/firefox/addon/60

gehe dann im browser auf extras-web developer-css und klick auf "view style information". wenn du dann mit dem cursor über den bildschirm fährst, zeigt dir der browser die css-infos oben in der leiste. so kannst du die elemente finden, die du brauchst. dann schaust du in den css dateien nach diesen elementen. meistens sind alle in der stylesheet.css datei.

Blogga

Zitat von phototobi

...Und wie geb ich das ein, z.b. zu einer gif oder jpg Datei ?

1. Lade dir ein Garfikprogramm (Gimp oder Paint.net) herunter, falls du noch keines hast und installiere es.
2. Lade dir deine gewünschte Schriftart herunter (dafont.com/) und installiere diese durch einen Doppelklick.
3. Öffne dein Grafikprogramm, erstelle eine Grafik in deiner gewünschten Größe (Größe des Headers) und Farbe, wähle die heruntergeladene Schriftart im Grafikprogramm aus und schreibe deinen gewünschten Text.

marX

Zitat von phototobi

Und wie geb ich das ein, z.b. zu einer gif oder jpg Datei ?

Ergänzend zu Blogga: ganz normal wie jede andere Grafik auch - also entweder als CSS-Hintergrundbild oder per HTML-<img>-Element. Falls dein Theme bereits eine Headergrafik hat kannst du auch einfach diese bearbeiten.

phototobi

Hallo, leider ist dort keine "extra" Headergrafik. Sondern die Grafik ist durchgehend. Wenn ich oben was "reinschreibe" wird es ja dann später wiederholt... was ja auch doof ist.

Ich müßte also im grunde, wenn ich es verstanden habe, geht es das man eine extra Grafik, in dem fall also nur die Schrift als Head über die andere Grafik legt. Dabei müßtte dann allerdings alles was um die Schrift rum ist, durchsichtig sein...

Hmm... Wohl nicht wirklich einfach, oder?

Gruss
Tobi

marX

Zitat von phototobi

Hallo, leider ist dort keine "extra" Headergrafik. Sondern die Grafik ist durchgehend. Wenn ich oben was "reinschreibe" wird es ja dann später wiederholt... was ja auch doof ist.

Ja, schade.

Zitat

Ich müßte also im grunde, wenn ich es verstanden habe, geht es das man eine extra Grafik, in dem fall also nur die Schrift als Head über die andere Grafik legt.

Genau.

Zitat

Dabei müßtte dann allerdings alles was um die Schrift rum ist, durchsichtig sein...

Ebenfalls richtig. GIF kann einfache Transparenz (1 Farbe wird als transparent deklariert), PNG sogar Alphatransparenz, d.h. Transparenzverläufe. Damit kannst du dann auch Schatteneffekte etc. problemlos erstellen.
Der IE6 benötigt zwar bei PNG einen kleinen CSS-Hack, aber prinzipiell ist das kein Problem.

phototobi

ok, und wir fügt man das ganze dann ein??

Könntest du es mir kurz erklären? oder ist das zu umfangreich?

Wenn dann sollte es schon vernüftig sein, also als PNG Datei

Gruss
Tobi

marX

Dazu müsste ich das Theme sehen, am besten wäre ein Link zu deiner Seite. Oder zur Theme-Demo falls verfügbar (und du nichts weiter am Header geändert hast).

phototobi

Hi, das hier ist das Theme --> Vintage Paper | Wordpress Themes

Bislang habe ich noch nichts geändert. Nur das Theme installiert.

marX

Schau mal in der header.php, dort solltest du folgenden Code finden:

HTML

<div id="header-info">
  <h1>
    <a href="<?php bloginfo('url') ?>">
      <?php bloginfo('name') ?>
    </a>
  </h1>
  <div class="description">
    <?php bloginfo('description') ?>
  </div>
</div>

Dieser Teil ist für den Blogtitel und die Beschreibung im Header verantwortlich. Hier kannst du per <img>-Element deine Schriftgrafik drüber legen (idealerweise mit den Texten im alt-Attribut).

Da du ein Fotoblog hast gehe ich mal davon aus dass du weißt wie man Grafiken per HTML einbindet? Falls nicht, schau mal hier:
SELFHTML: HTML/XHTML / Grafiken / Grafiken einbinden

Beim "src"-Attribut kannst du mit dem Template-Tag bloginfo() nachhelfen, bloginfo('template_url') liefert die die URL deines Templates.

Ein Beispiel:

HTML

<img src="<?php bloginfo('template_url') ?>/img/blog-title.png" alt="<?php bloginfo('name') ?>" />

phototobi

Hallo, hmm, die "header.php" sieht so aus, irgedwie anders als deine...

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
 <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
 
 <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
 
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
 
 <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style_ie.css" />
 <![endif]-->
 
 <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style_ie6.css" />
 <![endif]-->
 
<?php wp_head(); ?>
</head>
<body>
<!-- Page -->
<div id="page"><div id="page-in">
 <!-- Header -->
 <div id="header">
 
  <!-- Title -->
  <div id="header-info">
   <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div class="description"><?php bloginfo('description'); ?></div>
  </div>
  <!-- /Title -->
 
 </div>
 <!-- /Header -->
 
 <!-- Main -->
 <div id="main">

Alles anzeigen

Meine png Datei leg ich also in den Ordner Images, wo auch die anderen vom Theme liegen.

Wie und wo muss ich das dann einfügen?

Bahnhof...

marX

Zitat von phototobi

Hallo, hmm, die "header.php" sieht so aus, irgedwie anders als deine...

mmh, der Code ist doch da:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
 <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
 
 <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
 
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style.css" />
 
 <!--[if IE]>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style_ie.css" />
 <![endif]-->
 
 <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/style_ie6.css" />
 <![endif]-->
 
<?php wp_head(); ?>
</head>
<body>
<!-- Page -->
<div id="page"><div id="page-in">
 <!-- Header -->
 <div id="header">
 
  [COLOR="#ff0000"]<!-- Title -->
  <div id="header-info">
   <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
   <div class="description"><?php bloginfo('description'); ?></div>
  </div>
  <!-- /Title -->[/COLOR]
 
 </div>
 <!-- /Header -->
 
 <!-- Main -->
 <div id="main">

Alles anzeigen

phototobi

wie jetzzt?

marX

Habs doch extra rot markiert... :-D Scroll mal in dem Code-Block etwas nach unten, dann findest du die entsprechende Stelle schon.

phototobi

stimmt, aber was muss ich da einfügen, ändern?

marX

Ich hab doch schon fast alles nötige gepostet, wo klemmts denn noch?

HTML

<!-- Title -->
  <div id="header-info">
   <h1><a href="<?php echo get_option('home'); ?>/"><img src="<?php bloginfo('template_url') ?>/img/blog-title.png" alt="<?php bloginfo('name') ?>" /> </a></h1>
  </div>
  <!-- /Title -->

phototobi

Es hängt zwischen den Ohren.

Also eingefügt wird es jetzt, aber wie bekomm ich jetzt den weißen hintergrund, das .png bildes... durchsichtig??

marX

Zitat von phototobi

Also eingefügt wird es jetzt, aber wie bekomm ich jetzt den weißen hintergrund, das .png bildes... durchsichtig??

Mit einem geeigneten Grafikprogramm, welche PNGs mit Alphatransparenz unterstützt. Photoshop kann das natürlich, als freie Software würde mir GIMP einfallen. Unter Windows auch noch Paint.NET

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftart im Header: Fragen über Fragen.

Jetzt mitmachen!