Orginaldesign mit Zusatz im Menu

Diese Seite demonstriert, wie man im Design Plus 135 einen Zusatz an das Menü anhängen kann.

Alles was jetzt kommt, wird noch einmal links in der Navi angezeigt.


das auch noch

was jetzt kommt aber nicht mehr

Der Einbau

Diese Einbauanleitung bezieht sich auf die Designvorlage Plus 135. Es gibt aber eine ganze Reihe von Plus-Vorlagen, die nach dem gleichen Prinzip aufgebaut sind. Es muss immer <div id="navi_cont"> im Quellcode vorkommen. Ansonsten muss ggf. der kleine JavaScript-Schnipsel ganz unten angepasst werden.

In Sitewide oder in der Inhaltsseite muss der Code enthalten sein, der an das Menü angehängt wird. Hier auf dieser Beispielseite sieht er so aus: 

<div id="quelle">
    <div id="ein-interner-link">
        <a href="#">Ein wichtiger Link</a>
    </div>
    <p>
        das auch noch
    </p>
</div>

In einer normalen Textseite kann man zunächst ganz einfach Text eingeben um diesen dann im Quellcode - Modus von <div id="quelle"> und </div>  zu umschließen.

In Sitewide unten wird dann noch dies eingefügt 

<script type="text/javascript">
  $($("#quelle").html()).appendTo('.navi_cont');
</script>
Ich habe hier auf auf CSS-Formatierungen verzichtet. Für eine Einbau in ein normales system muss  <div id="quelle"> unsichtbar gemacht und <div id="ein-interner-link"> schöner formatiert werden.
 

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

Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen.

Erste Voraussetzung ist, dass man die JavaScript-Bibiothek JQuery bei NPage hochlädt und in die Seite einbindet.

Außerdem benötigt man einen kleinen JavaScript-Schnippsel. Für das von mir verwendete Design Plus 135 sieht der so aus: 

$(document).ready(function($){
  var url = window.location.pathname;
  $('.navi_cont a[href="'+url+'"]').addClass('current');
});

Schließlich muss noch etwas CSS-Code eingefügt werden 

<style>
  .current, a>.current, a.current   { color:yellow !important}
</style>

Wie bereits beschrieben wurde dieses Patch für die von mir hier verwendete Designvorlage Plus 135 erstellt. Es funktioniert auch mit anderen Designvorlagen, die genauso aufgebaut sind. Siehe dazu diese Übersicht zu den NPage Templates.

Bei allgemeinen Problemen oder Fragen zu anderen Designvorlagen bitte diesen Vorstellungsthread im NPage Forum nutzen.

http://forum.npage.de/vorstellung/29410-designpatch-designvorlagen-anpassen.html


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang