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('https://file1.hpage.com/002351/24/bilder/header_o08.jpg');
}

/* Hintergrundbild Navigationsbereich */
.style6 {
background-image: url('https://file1.hpage.com/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="https://file1.hpage.com/002351/24/html/style_o08.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://file1.hpage.com/002351/24/html/code.css" />
<script src="https://file1.hpage.com/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="https://file1.hpage.com/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="https://file1.hpage.com/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.


Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

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 >

Zum Seitenanfang