WBCE CMS Forum

Das Template Lesefaken lässt sich sehr leicht dahin gehend umbauen. Ich habs hier mal als umgebaute/umbenannte Fassung angehängt.

Das Template prüft anhand der folgenden Zeilen, ob es sich um die Startseite handelt:

if ($isstartpage != true) { ?>
				<header id="header">
					<div class="logo container">
						<div>							
							<p><?php echo PAGE_TITLE; ?></p>
						</div>
					</div>
				</header>
				<?php } else { ?>
				<!-- Banner -->
					<div id="banner-wrapper">
						<section id="banner">
							<h2><?php echo PAGE_TITLE; ?></h2>
							<p><?php echo PAGE_DESCRIPTION; ?></p>
							<a href="#" onclick="gotocontent(); return false;" class="button"><?php echo $gobuttontext; ?></a>
						</section>
					</div>
				<?php } 

Es soll auf allen Seiten ein großes Bild erscheinen, also brauchen wir die Prüfung nicht, und ändern den Code zu:

 ?>
				<!-- Banner -->
					<div id="banner-wrapper">
						<section id="banner">
							<h2><?php echo PAGE_TITLE; ?></h2>
							<p><?php echo PAGE_DESCRIPTION; ?></p>
							<a href="#" onclick="gotocontent(); return false;" class="button"><?php echo $gobuttontext; ?></a>
						</section>
					</div>
				<?php 

Nun würde allerdings auf allen Seiten immer das selbe Bild erscheinen, deshalb wird die Zeile

<div id="banner-wrapper">

geändert zu

<div id="banner-wrapper" class="b<?php echo PAGE_ID; ?>">

Dadurch bekommt jeder Banner zusätzlich eine Klassendefinition mit der eindeutigen Seiten-ID, die im Seitenbaum abgelesen werden kann.

In der /templates/html5up-txt-chio/main.css änderst Du nun die Zeilen

	#banner-wrapper {
		position: relative;
		background: url("img/banner.jpg") no-repeat center center fixed;	
		background-size: auto, auto, cover;
		z-index: 1;
	}
	

zu

#banner-wrapper {
		position: relative;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment:		fixed;	
		background-size: auto, auto, cover;
		z-index: 1;
	}

sodass der ID des Banners kein Hintergrundbild mehr zugewiesen ist, und fügst danach für jede Seite Deines Auftritts ein:

	.b2 {
		background-image:url(img/deinbildfuer2.jpg)
	}

	.b3 {
		background-image:url(img/deinbildfuer3.jpg)
	}

wobei 2, 3 usw. die IDs der Seiten sind und deinbildfuer2, deinbildfuer3 usw. natürlich durch die Dateinamen der zu verwendenen Bilder zu ersetzen ist.

Das ist jetzt keine besonders flexible Implementierung, man kann das natürlich auch dynamischer lösen, siehe dazu die Implementierung im Template "Lesefaken".

Daran hat sich grundsätzlich nichts geändert. Wenn Du ein zeitgemäßes HTML-Template nimmst, ist in diesem auch bereits festgelegt, wie dieses mobil angezeigt wird. Natürlich sollte dann der 1. Contentblock nicht so im Template eingebaut werden, dass er verschwindet oder ganz nach unten rutscht. Da schaut man sich dann das HTML-Template in der mobilen Ansicht an und fügt die zusätzlichen/optionalen Inhaltsblöcke dann entsprechend ein.

Die meisten CSS-Grids bzw. Frameworks bieten Klassen, um Elemente bei bestimmten Displaygrößen nicht anzeigen zu lassen. Bei Responsee sind das die ganzen hide-Klassen (siehe Class Library).
Bei Fitgrid gibt es fg-no-desktop und fg-no-mobile mit den erwartbaren Resultaten.

Bei Responsee kannst Du im ggs. zu Fitgrid fein granuliert festlegen, wie groß bestimmte Bereiche bei bestimmten Auflösungen angezeigt werden sollen. Wichtig ist, dass pro Reihe immer 12 herauskommt. Siehe hierzu das WBCE-Template Buschwerk.

Konkret für Responsee im Template Buschwerk, für smartmenus z.B. in Lesefaken.
Eine "One Size fits all"-Anleitung gibt es nicht, weil fast jedes Navigationsscript einen anderen Aufbau voraussetzt, was <ul>, <li>, <a> und Attribute betrifft. Da hilft dann letztlich nur try & error und sich mit der SM2-Systematik intensiv auseinanderzusetzen (Doku hier, Beispiele hier)

Das erreicht man mit ein paar kleinen Änderungen und dem jquery-Plugin "sticky" ( wie z.B. im Template "Lesefaken", wenn ich Dein Anliegen richtig verstanden habe).

1. Kopiere die Datei jquery.sticky.js (hier als Anhang zum Post) ins Verzeichnis /templates/webezeheh

2. Ergänze in der index.php des Templates vor

   <script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/jquery.smartmenus.min.js"></script>

   folgenden Code:

   <script type="text/javascript" src="<?php echo TEMPLATE_DIR;?>/jquery.sticky.js"></script>
   	<script>
   if (window.innerWidth >=960) {
       $(window).load(function(){
         $("#main-nav").sticky({ topSpacing: 0 });
       });
   }
     </script>

3. Ergänze in der styles.css gleich am Anfang

   #main-nav {z-index:100}

Damit "klebt" das Menü am oberen Bildschirmrand, sobald man auf einer langen Seite weiter runterscrollt.

Vielen Dank Colinax,
ich habe deinen Code eingefügt. Leider werden dann die Menüpunkte "DE" und "EN" nicht angezeigt!
Habe dann show_menu2 wieder eingefügt und "DE" und "EN" werden angezeigt!
Allerdings wird dann "DE" und "EN"  wieder nicht auf allen englischen Seiten angezeigt, je nach dem wie ich navigiere!

Das Ursprungstemplate war einmal "lesefaken".

Gruß Dirk

Fitgrid ist dann interessant, wenn Du eigene Templates erstellen willst oder welche ändern möchtest, die dieses Grid verwenden (z.B. Lesefaken, WeBehZehEh, FG-Grey - verfügbar auf https://templates.wbce.org/). Für die Verwendung in anderen Templates, die andere oder keine Grids verwenden, brauchst Du das nicht.

Zum Footer: Den kannst Du ja trotzdem drin lassen und da irgendwas anderes anzeigen (© 2019 oder so) oder ihn einfach leer lassen.

Zu bedenken ist ggf. noch, wie die Seite mit der Zusatznavigation auf smartphones / Tablets aussieht. Hier müssten dann evtl. mittels CSS-Media Queries noch Anpassungen erfolgen.

Hallo,

ich bin nun so vorgegangen:

1.) Aus der Lesefaken.zip die Original index.php genommen.

Deine beiden Teile eingefügt das alte gelöscht.

Getestet und es geht!

2. Danach Zeile 51 wieder eingefügt:
    <link rel="shortcut icon" href="<?php echo TEMPLATE_DIR; ?>/favicon.ico" type="image/x-icon" />   

getestet und es geht noch immer!

3. zwischen

<div class="fg12 footerbox">

und

<div class="left"><?php        

die Zeilen       
               
                <!-- //slyder-Footer + big-footer -->
                    <div class="fg-no-mobile">
                    <?php globalBlock ( 78 ); ?>
                    <?php globalBlock ( 72 ); ?>
                    </div>
                <!-- //slyder-Footer + big-footer-->
               
wieder eingefügt.

Getestet und es geht noch immer!

Mehr war da nicht (Indianerehrenwort! ;) ). OK, irgenetwas, was vorher nicht gestört hat, muss es wohl gegeben haben.

Nicht, dass ich mich nicht freue, dass es so wie gewünscht funktioniert, aber warum es nicht ging, hätte ich gerne selbst gewusst um es euch zu verraten. Schade.

Mit großem Dank an die Sonntagsarbeiter

Franz Luwein

Hallo Bernd,

für mich arbeitet das Template "lesefaken" welches das fitgrid CSS-Grid verwendet.
Ich habe die Stellen gefunden und die vorgeschlagenen Eintragungen vorgenommen. Das war viel einfacher als ich gedacht habe.

Es handelt sich um vier Accordions.
Nr1: lang, links - Nr3: kurz, rechts
Nr2: kurz, links - Nr4: lang, rechts

Wie sage ich das in CSS?
width: 50%; ist klar, aber die vier <div ...> wollen einfach nicht dorthin wo sie hin sollen. Z.Zt.: Nr1 links, Nr2, Nr3, Nr4 rechts
Auch das "untereinander" im Handy-Modus habe ich noch nicht hinbekommen.

Welche Reihenfolge (Nr1, ... ) im Backend ist richtig?

Gruß

Franz Luwein