Tutorial für eigenes Theme Design?

tapete

Hallo,

ich bin absoluter WP Neuling und meine CSS Kenntnisse sind auch eher rudimentär aber reichten immerhin mal für eine kleine, feine HP.

Nun habe ich mich ein wenig mit WP beschäftigt und mit Hilfe von http://wordpress.lernenhoch2.de/ ein eigenes WP Template gebaut. Das ist nun eben ein Standardtemplate mit einem body.

Nun möchte ich gerne selbst designen. Zum Beispiel eine Navigationsleiste die am oberen Bildschirmrand klebt und über die volle Breite geht.

Stümperhafte versuche in meinem CSS führten aber nicht recht zum Erfolg. Kann mir jemand Tipps geben, wo ich Hilfe bekomme? Über google habe ich bis jetzt nur englische Seiten gefunden.

Danke.

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

mfitzen

Vielleicht als Anregung: http://www.elmastudio.de/tag/coffeelove/

Shadow

nimm dir eines der tausend freien Design, oder zb das Standad Design Template twenty eleven und schau dir dort ab, was du brauchst,

mit google Suchbegriff wie "wordpress design erstellen" komme viele Anleitung sogar auf Deutsch.

Allgemein so nebenbei, um ein Wordpress Portal zu aktivieren, braucht man voerst kaum ein eigenes Design, denn es gibt einige tausend freie Design Themen, viele davon kann man entweder per CSS oder sogar Benutzergeführte Optionseinstellungen verändern.
mit Wordpress ist es viel einfacher als manche vermuten,

tapete

Danke, die elmastudioseite werde ich mir gleich mal zu Gemüte führen.

Ein vorgefertigtes Template möchte ich nicht nutzen. Das geht bestimmt aber ich möchte das unbedingt ganz individuell machen egal wie lange es dauert. :mrgreen:

Kann ich zwischendrin einmal eure Hilfe bekommen?

Meine header Datei:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head profile="http://gmpg.org/xfn/11">
 
   <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 
   <title><?php wp_title(' - ', true, 'right'); ?> <?php bloginfo('name'); ?></title>
   
   <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/screen.css" type="text/css" media="screen, projection">
   <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/print.css" type="text/css" media="print">
   <!--[if lt IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
 
 
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
   <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 
   <?php wp_head(); ?>
 
</head>
<body>
 
<div id="wrapper">
 
   <div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(’home’); ?>/”><?php bloginfo(’name’); ?></a></h1>
<div class=”description”><?php bloginfo(’description’); ?></div>
</div>
</div>
   
   
  <div id=”menulinks”>
<ul id=”navlist”>
<li><a href=”<?php echo get_settings(’home’); ?>”>Home</a></li>
<?php wp_list_pages(’title_li’); ?>
</ul>
</div>
   
   
   <div id=”menulinks”>
<ul id=”navlist”>
<li><a href=”http://weblog-abc.de/wordpress-themes”>WordPress Themes</a></li>
<li><a href=”http://weblog-abc.de/blogg-tipps-tricks/die-besten-wordpress-plugins-696.html”>WordPress Plugins</a></li>
<li><a href=”http://weblog-abc.de/category/geld-verdienen”>Geld verdienen im Internet</a></li>
<li><a href=”http://weblog-abc.de/blogg-tipps-tricks/liste-der-besten-seo-tools-110.html”>Die besten SEO-Tools</a></li>
<li><a href=”http://weblog-abc.de/category/seo-tipps”>SEO Tipps & Tricks</a></li>
</ul>
</div>


</body>

Alles anzeigen

Das CSS:

PHP

/*
Theme Name: Tutorial
Theme URI: http://wordpress.lernenhoch2.de
Description: Template zum WordPress Tutorial auf http://wordpress.lernenhoch2.de
Author: Christian Strang
Author URI: http://lernenhoch2.de
*/




 
body        {margin: 0px; padding: 0px; color: #333; background: #e5e5e5;}
 
#wrapper    {width: 850px; margin: auto; text-align: left; background: #fff;}
#header        {height: 160px; padding: 20px; border-bottom: 1px solid #ccc;}
#main       {width: 520px; padding: 20px; float: left;}
#sidebar    {width: 270px; padding: 10px; padding-top: 20px; float: left;}
#footer        {clear: both; height: 100px; padding: 20px; }


#menulinks {
height:340px;
width:95%;
margin-top:10px;
margin-left:20px;
margin-right:10px;
clear:both;
background-color:#73a0c5;
text-align:left;
}


ul#navlist {
margin: 0;
padding: 0;
white-space: nowrap;
float:left;
width:100%;
}


ul#navlist li {
font-size:10pt;
display:inline;
list-style-type: none;
}


ul#navlist li a {
font-family:Arial;
font-size:14px;
font-weight:bold;
text-align:center;
color: #FFFFFF;
height:33px;
padding-top:17px;
padding-left:15px;
padding-right:15px;
background:none;
display:block;
float:left;
text-decoration: none;
}


ul#navlist li a:hover {
background-color:#f60;


}

Alles anzeigen

Könnt ihr mir sagen, wieso das CSS die Links nicht anspricht/formatiert? Und warum zeigt er außer der Tutorial Links auch noch die im Backend erstellten WP-Seiten?

Shadow

Zitat von tapete

Könnt ihr mir sagen, wieso das CSS die Links nicht anspricht/formatiert? Und warum zeigt er außer der Tutorial Links auch noch die im Backend erstellten WP-Seiten?

und hast du auch die css Datei richtig eingehängt?
wenn du bei link auch den Home Link meinst, fehlt das CSS dazu?

tapete

Ich bin wie gesagt noch Anfänger, bzw. ist das coden schon ewig her, deswegen entschuldigt bitte, dass ich keine Ahnung habe. Ich möchte es von Grund auf lernen, deswegen das eigene Theme. Das vorgefertigte überfordert mich. :roll:

So sieht es grade aus:

[Blockierte Grafik: http://i44.tinypic.com/wlvxiw.png]

Ich möchte dass nur die Links die unter Seiten stehen also:

Angebot
Home
Kontakt
Portfolio
Profil

ganz oben nebeinander angezeigt werden und sich via css formatieren lassen.

Shadow

ich bezweifle, das dich grundlagen CSS überfordern, wenn du es nicht schaffst zb dir CSS Ideen aus zb Standard Thema rauszulesen oder auch nur zu kopieren
daher mein Tip, dass dir mal die Basics anschaust: http://de.selfhtml.org/

tapete

selfhtml ist immer nebenbei geöffnet. Das Problem liegt wohl doch eher beim Grundverständnis von php als bei css. Meine css Ideen scheinen gar nicht so unsinnig zu sein, sie sprechen nur nicht richtig mit der header.php.

Macht es Sinn das Design und so erstmal als reinen html / css Code zu schreiben und dann die html Datei in eine wordpressfähige php umzumodelieren?

Shadow

Zitat von tapete

Macht es Sinn das Design und so erstmal als reinen html / css Code zu schreiben und dann die html Datei in eine wordpressfähige php umzumodelieren?

ansich ist es egal ob der HTML output aus einer PHP Datei erstellt wird, oder ob es rein HTML ist,

um Wordpress Templates auch interessant aufzubauen, und für Wordpress interessant nutzbar zu machen, sollte die Grundsätze für Templateerstellung für Wordpress gut beachtet werden,

nimm den TIP an, und schau dir bestehende Templates an zb besonders das Twenty Eleven (Standard von Wordpress) dort sind alle wichtigen PHP Codes drin, die ein Template gut arbeiten lassen und alles Möglichkeiten für Wordpress bieten.
und ein umbauen von solch template, idealer weise sogar mit Child templates, ist sicher einfacher als zu glauben man muss HTML(CSS) neu erfinden.

tapete

Ok, da hast du wahrscheinlich Recht. Mir erschien es erstmal einfacher das Beispieltemplate nebenbei zu öffnen und entsprechende Codes rüber zu kopieren.

So ist das Beispiel CSS ja extreeeem lang und unübersichtlich und so.

Gibt es denn gute Tutorials, die zeigen, wie man es am besten umbaut? Ich möchte eben ein deutlich anderes Design.

Shadow

wenn CSS datei von Beispiel zu lange ist, scheitert es am grundsätzliche know How,
denn wenn du ein halbwegs design, nochdazu eigenes bauen willst das sich von zb Standard Thema abhebt, wird dein CSS wahrscheinlich noch länger,

google hilft sicher beim finden von Tutorials,
ich kann nicht helfen, da ich noch nie ein eigenes Design gebaut habe, selten nur leicht angepasst.
ich beschäftige mich mit der Anwendung bzw mit Pluginprogrammierung

tapete

Ok. Ja ich hab schon längere CSS Codes geschrieben aber eben langsam Stück für Stück und wusste genau welcher Befehl wozu ist. Das klemmt beim Beispiel noch.

Ich dachte ich versuche mich daher mal an diesem Tutorial:

http://www.elmastudio.de/wordpress/word…ox-blank-theme/

Leider kann ich das Theme toolbox nicht wie beschrieben installieren. WP fragt mich nach Verbindungsinformationen… Hostname, FTP-Benutzername, FTP-Passwort und Verbindungstyp. Weiß jemand warum und was ich da machen kann? Ich bin genau so vorgegangen wie im Video gezeigt.

tapete

PS: Hat sich erledigt, habe es einfach via download gemacht.

Shadow

hat nix mit CSS zu tun:

FTP zugang hast du bei deinem Webspace, und das du zb von dir zuhause ZIP File oder von anderen Repositrys themen oder Plugins auf deinen Webspace zugang laden kannst, musst du den Zugang durch eingabe der FTP Zugangsdaten gewähren. sonst könnte dir jeder etwas aufladen.

tapete

Ja das ist mir schon klar aber ich arbeite ja momentan noch komplett auf localhost. So ist es auch im Tutorial gezeigt und beschrieben. Hochladen möchte ich es so erstens nicht und zweitens dauert das dann alles länger, daher finde ich localhost super.

Das Problem ist nur, dass im Tutorial Plugins etc. installiert werden (Sie ist ebenfalls nur auf localhost) und das alles mit einem Klick geht.
Bei mir funktioniert das trotz absolut gleicher Vorgehensweise nicht. Ich muss mich anmelden, was ich ja nicht kann, wenn ich auf localhost arbeite?

Shadow

im Localhost kannst du ja direkt per Dateimanger in deinem www ordner zugreifen und dorthin kopieren da brauchst du FTP nicht wirklich.

tapete

Ich verstehe nicht was du meinst?

Ich bin in meinem WP Backend. Wie beschrieben und dort soll ich jetzt über Plugins - installieren ein Plugin wählen und selbiges dann installieren. Das geht aber nicht.

Wahrscheinlich kann ich das Plugin auch irgendwo downloaden und in meinen Pluginordner kopieren? aber das ist ja auch nicht Sinn der Sache und im Tutorial funktioniert es ja auch.

http://www.elmastudio.de/wordpress/word…me-ubersetzung/

Shadow

die im Tutorial hat (weil normal üblich) einen FTP Server oder Webspace mit FTP zugang, wenn du auf deinem HomePC keinen FTP server hast, hat nicht unbedingt was mit Localhost Webserver zu tun, dann kannst du nicht per FTP account installieren,
dann musst du dir die plugins und Themen downloaden und das entpackte Zip File in den Ordner Plugin oder Theme einspielen und dann per Dashboard das Thema oder Plugin aktivieren. oder eben einen FTP Server aktivieren, wie verschweigt dir wahrscheinlich das Handbuch deines Betriebssystems :(

bgeissler

Wenn ich mich mal in euer Gespräch einklinken darf :wink::
Ich habe letztens mal zwei Projekte so angegangen, dass ich mir zunächst einen Satz HTML-Dateien und eine css-Datei angelegt habe bis sie aussah wie ich es wollte. Für die Funktionalität habe ich dann die Platzhalter für die Inhalte durch php-, WP-Befehle ersetzt. Die Entwicklung lief gut und schnell.
Allerdings arbeite ich schon länger mit WP, als es noch nicht so komfortabel wie heute war.
Von twentyeleven kann ich Anfängern, die mehr als nur mal eine Farbe ändern wollen, nur abraten. Das Theme ist funktional gut aber sehr unübersichtlich aufgebaut, das zeigen auch die vielen Fragen hier im Forum.

HTML und CSS: http://de.selfhtml.org/
WP-Template Tags: http://doku.wpde.org/Template_Tags (jedenfalls die grundlegendsten in deutsch)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Tutorial für eigenes Theme Design?

Jetzt mitmachen!

Benutzer online in diesem Thema