Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Design o08 Erklärungen

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Design o08

Achtung: Die Ausführungen auf diesen Seiten sind nicht mehr aktuell, da ich mittlerweile eine andere NPage-Designvorlage als Basis für mein Designpatch nehme.

Das Design o08 ist recht gut dazu geeignet, individuell angepasst zu werden.

Screenshot des Orginaldesigns

Was wurde gepatcht:

  • die Hintergrundfarbe
  • die Textfarbe (auch die Schriftart könnte man ändern)
  • die Farbe der Links in der Navi
  • das Hintergrundbild in der Navi und das Hintergrundbild oben

Welche Zutaten werden benötigt, um den Designpatchkuchen zuzubereiten ?

  • Grafiken für den Hintergrund im Kopf und in der Navigation
  • Eine CSS-Stylesheet-Datei mit verschiedenen Einstellungen
  • Ein ganz klein wenig JavaScript
  • Etwas Code für die Sitewide-Einstellungen

Grafiken

Für die Anpassung des Hintergrundes des Navigationsleiste und des Kopfbereiches werden Grafiken benötigt. Diese Grafiken können im GIF- PNG- oder JPG-Format vorliegen.

Die Grafik für den Kopfbereich soll dabei 517 x 35 Pixel groß sein (Breite x Höhe), die Grafik für den Navigationsbereich 166 x 10 Pixel.

Orginalquellcode der CSS-Datei

/* Stylesheet zum Patchen der NPage-Design-Vorlage o08 */
/* © Burkhard Schlutt 2008 */
/* Bitte beachten: Die Kommentarzeichen Schrägstrich Stern 
treten immer paarweise auf */
/* Allgemein */
body { 
color: #FFFFFF;
background-color: #004FF9;
/* optional: Ränder auf 0 setzen */
/* margin:0px; */
/* padding:0px */
}
/* Textfarbe Überschrift */
h1{
color: #000000;
}

/* Textfarbe im Titel */
#titel {
color: #000000;
}

/* Textfarbe der Links in Navi*/
#navigation a:link {
color: #000000;
text-decoration: none
}

#navigation a:active {
color: #000000;
text-decoration: none
}

#navigation a:visited {
color: #222222;
text-decoration: none
}
#navigation a:hover {
color: #FFFFFF;
text-decoration: none
}

/* Textfarbe der Links im Text */
a:link {
color: #FDF4C4;
text-decoration: none; font-weight:bold
}

a:active {
color: #FDF4C4;
text-decoration: none
}

a:visited {
color: #FFFFFF;
text-decoration: none
}

a:hover {
color: #F2F200;
text-decoration: none
}

/* Optional: Hintergrund für den gesamten Inhaltsbereich, 
kleiner Rand bleibt links, rechts, oben */
/* 
.style1
{
background-color:#FF00FF
}
*/

/* Hintergrundbild oben */
.style5
{
background-image: url('http://file1.npage.de/002351/24/bilder/header_o08.jpg');
}

/* Hintergrundbild Navigationsbereich */
.style6 {
background-image: url('http://file1.npage.de/002351/24/bilder/navi_neu.gif');
}

/* optional:Hintergrund für den gesamten mittleren Bereich */ 
/*
#content
{
padding:2px; background-color:#FDF4C4
}
*/

Code für die Sitewide-Einstellungen

Oben

<!--Anfang Sitewide oben-->
<!--© für dieses Designpatch:Burkhard Schlutt-->
<link rel="stylesheet" href="http://file1.npage.de/002351/24/html/style_o08.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://file1.npage.de/002351/24/html/code.css" />
<script src="http://file1.npage.de/002351/24/html/addstyle_org.js" type="text/javascript">
</script>
<!--Ende Sitewide oben--> 

Unten

<!--Anfang Sitewide unten-->
<p>© des Designpatches: Burkhard Schlutt</p>
<link rel="stylesheet" href="http://file1.npage.de/002351/24/html/bewegdich.css" type="text/css">
<!-- bewegdich-->
<div id="bewegdich">
<div id="bewegdichinnenlinks">
Die Beweg-Dich-Box (BWD)<br>In die BDB kann man interessante Inhalte reinschreiben, die immer sichtbar sein sollten.
<!--[if IE]><br>
<b><font size="1" color="#FF0000">Benutzer des IE sehen nur den linken Teil der BDB, die sich bei diesem Browser auch nicht bewegt. Nimm Firefox.</font></b>
<![endif]-->
</p>
</div>
<!--[if !IE]><!-->
<div id="bewegdichinnenrechts">
<script type="text/javascript"><!--
google_ad_client = "pub-1640786225448363";
/* 120x240, Erstellt 23.09.08 */
google_ad_slot = "5125916516";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<!--<![endif]-->
</div>
<!-- bewegdichEnde -->
<SCRIPT src="http://file1.npage.de/002351/24/html/immer_da_debug.js" type=text/javascript>
</SCRIPT>
<iframe name="I1" height="1" width="1" marginwidth="1" marginheight="1" src="http://counter.bpgs.de/counter_npage_designpatch.php">
</iframe>
<p><img src="http://counter.bpgs.de/icounter_test.php" alt="counter" title="counter" width="20" height="2"></p>
<!--Ende Sitewide unten-->

Dieser Code ist als Beispiel gedacht. Eine einfache Übernahme ist schon deshalb nicht empfehlenswert, weil es Verweise zu meinen Websites gibt. Wenn jemand gar keine Erfahrungen mit der Codierung von Webseiten hat, sollte er besser darauf verzichten, eine Anpassung allein vorzunehmen. Ich bin aber gern zur Hilfe und Unterstützung bereit.


{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}

Kategorie: alle Artikel (9) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 3 >

Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
News und Blogs (14.10.2013 11:51:00)

Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 3 >

{/if} Zum Seitenanfang
nPage.de-Seiten: RadioRadio - Die Zeitschrift im Web | Sänger Alexx und seine Songs