WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 18.07.2020 18:59:26

Slugger
Member

Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Hallo Florian,
ich bin gerade dabei, den Internetauftritt für ein kleines Handwerksunternehmen neu zu gestalten.

1. Dabei kam bereits für mich ein Frage auf, ob man im Bereich des Logos zwei Grafikdateien (z.B.: logo1 und logo2) eingesetzt werden können.

2. Ich möchte den Bereich im  Footer dunkler machen und dort die Adresse der Unternehmens auf die Linke setzen und auf der rechten Seite, Verlinkungen mit Impressum, Datenschutz, Sitemap versehen, sodass es auf allen Seiten angezeigt wird.
Wie sieht denn hier der Quellcode aus?

3. Ich habe hier gelesen, das Lesefaken auf firgrid basiert und nicht zwingend gridism für mpform benötigt wird.
Wie muss man das Handhaben und umsetzen?

4. Wie und wo bekomme ich die Suche im Frontend eingeblendet?

Dann habe ich noch die Schwierigkeit das die Überschrift "h1" grau dargestellt wird, diese möchte ich gerne ändern.
Wenn ich das über den Colorpicker mache und mit einer anderen Farbe versehe, dann werden auch die Farb-Einstellungen im Hauptmenue verändert.


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.4.4 • BE: 2.1.0 • PHP: 7.4.5
1. Projekt: FE: lichtfjyr • BE: Argos * 2. Projekt: FE: WBCEZon • BE: Argos * 3. Projekt: FE: WBCETik • BE: Argos
Status  OK

Online

#2 18.07.2020 20:56:36

florian
Administrator

Re: Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Zu 1)
Ich verstehe leider nicht genau, was Du meinst. Zwei Grafiken nebeneinander, übereinander, abwechselnd?
Vorgesehen ist, dass seitenbezogene Headerbilder verwendet werden. Wenn Du die Version von LF mit Colorpicker verwendest, musst Du zunächst die Zeile 7

$headerlocp = '/media/_pppics/header/pic';

aus dem Template löschen, so dass nur

$headerlocp = '/media/headerbilder/header_';

stehen bleibt. Nun lade über die Medienverwaltung oder per FTP die gewünschten Bilder ins Verzeichnis /headerbilder (ggf. anlegen) und benenne sie header_{PAGE_ID}.jpg, z.B. header_0.jpg (Fallbackbild), header_1.jpg, header_7.jpg, header_23.jpg.
Die Logik dahinter:
Regel 1: Wenn es ein Bild header_{PAGE_ID}.jpg gibt und {PAGE_ID} der Page-ID der angezeigten Seite entspricht, wird dieses verwendet.
Regel 2: Wenn es kein Bild à Regel 1 gibt, aber eines, das der Page-ID der übergeordneten Seite der aktuell angezeigten Seite entspricht, wird dieses verwendet.
Regel 3: Sind Regel 1 und 2 nicht erfüllt, zeige header_0.jpg.
Regel 4: Gibt es Inhalt im Block "Headerbilder", zeige stattdessen diesen an

Zu 2)
Lösche

<div class="row" style="overflow:visible;">				
				<div class="fg12 footerbox">
					<div class="left"><?php 
					if(FRONTEND_LOGIN) { echo '<div id="showlogin"><a href="#" onclick="showloginbox(); return false;"><img src="'.TEMPLATE_DIR.'/img/key.png" alt="K" /></a><div id="login-box" style="display:none"></div></div>';} 
					?><!--LOGIN_URL, LOGOUT_URL,FORGOT_URL-->
					<?php
					
					
					?>  
					</div><!-- end footer left -->
					<a id="gototopswitch" href="#" onclick="gototop();return false;"><img src="<?php echo TEMPLATE_DIR;?>/img/up.png" alt="Go to top" title="Go to top"></a>
					
					<div role="contentinfo" class="center">
					<?php page_footer();  ?>
					</div><!-- end footer center -->
				</div>
			</div><!-- //footer-->

und füge ganz unten, vor

<script type="text/javascript">
$(function() {
  var $mainMenuState = $('#main-menu-state');
...
...
usw.

ein:

<footer>
		<div class="center">
				<div class="orow">
					<div class="fg6 adresse">
					<?php
					if(FRONTEND_LOGIN) { echo '<a href="#" onclick="showloginbox(); return false;"><img src="'.TEMPLATE_DIR.'/img/key.png" alt="K" /></a><div id="login-box" style="display:none"></div>';} 
					?>
						<?php  page_footer(); ?>
					</div>
					<div class="fg6 footerverlinkungen">
						<a href="[wblink23]">Impressum</a> | <a href="[wblink42]">Datenschutzhinweis</a>
						<a id="gototopswitch" href="#" onclick="gototop();return false;"><img src="<?php echo TEMPLATE_DIR;?>/img/up.png" alt="Go to top" title="Go to top"></a>
					</div>					
					<br clear="all">
				</div>
			</div>
	</footer>

Bei wblink23 und wblink42 23 und 42 durch die tatsächlichen Page-IDs von Imp. und DSE ersetzen.
Den Footer dann per template.css stylen, z.B.

footer {
	background-color:#eee;
	padding:10px;
}

.footerverlinkungen {
	text-align:right;
}

Anmerkung: Lesefaken hat zwei Menüs, d.h. Du kannst die Pflicht-Links sonst auch automatisch oben rechts ausgeben, wenn Du die betr. Seiten dem Menü "Metamenue" zuordnest (Seiteneinstellungen)

Zu 3)
Bei mpform > Allgemeine Optionen Feld Schleife ändern zu

<div class="row">
<div class="fg4 {CLASSES}">
{TITLE}{REQUIRED}:
{HELP}
</div>
<div class="fg8">
{FIELD}{ERRORTEXT}
</div>
</div>

Da sind aber auch noch weitere Anpassungen am mpform-CSS erforderlich, weil da leider einiges an Hintergrundfarben und Feldbreiten festverdrahtet ist. "Kastrierte" frontend.css für mpform aus einem anderen Projekt hänge ich hier mal an


Zu 4)
Am einfachsten geht das, indem Du die Seitenspalte rechts neben dem Hauptinhalt immer einblendest und dort das Droplet searchbox aufrufst, d.h. ändere die Zeilen

<?php if ($contentblock[2] != '') { ?>
				<div class="fg9">
					<article>
						<!--h1><?php echo PAGE_TITLE; ?></h1-->
						<?php echo $contentblock[1]; ?>
					</article>
				</div>
				<div class="fg3">
					<aside>
						<?php echo $contentblock[2]; ?>
					</aside>
				</div>
				<?php } else { ?>
				<div class="fg12">
					<article>
						<!--h1><?php echo PAGE_TITLE; ?></h1-->
						<?php echo $contentblock[1]; ?>
					</article>
				</div>
				<?php } ?>

zu

<div class="row">
				
				<div class="fg9">
					<article>
						<!--h1><?php echo PAGE_TITLE; ?></h1-->
						<?php echo $contentblock[1]; ?>
					</article>
				</div>
				<div class="fg3">
					<aside>
						[[searchbox?msg=Suche...]]
						<?php echo $contentblock[2]; ?>
					</aside>
				</div>
				
			</div>

Zu 5)
Kann ich nicht reproduzieren, aber dann formatiere h1 einfach per template.css:

h1 {color:#666 !important;}

Last edited by florian (18.07.2020 21:02:18)

Offline

#3 20.07.2020 15:58:59

Slugger
Member

Re: Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Zu 1.
Ich meinte das Logo im Kopfbereich, nicht die Header die man für jede Seite anpassen kann. Da habe ich keine Probleme.

Zu 2.
Das mit dem Footer hat funktioniert, danke  smile

Zu 3.
Deine "kastrierte" frondend.css habe ich Mal eingebaut, bin da aber noch am Feinschliff.
Da werde ich mich nochmal melden, wenn ich nicht weiterkomme.
In der CSS ist noch die gridism includiert.
Wird die noch benötigt?

Zu 4.
Das passt schon sehr gut, Mal schauen was der Kunde sagt.

Zu 5.
War ein Denkfehler meinerseits, passt!


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.4.4 • BE: 2.1.0 • PHP: 7.4.5
1. Projekt: FE: lichtfjyr • BE: Argos * 2. Projekt: FE: WBCEZon • BE: Argos * 3. Projekt: FE: WBCETik • BE: Argos
Status  OK

Online

#4 20.07.2020 16:07:19

florian
Administrator

Re: Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Zu 1)
Ach so. Ja, kann man. Dafür die Zeile

<div class="fg5 logo">
					<a href="<?php echo WB_URL; ?>"><img src="<?php echo TEMPLATE_DIR; ?>/logo.png" alt="<?php echo WEBSITE_TITLE; ?>" border="0" /></a>
				</div>

ensprechend anpassen, also je nach Bedarf einen weiteren Fitgrid-Div mit dem 2. Logo daneben setzen (und dafür dann den 3. FG-Div entsprechend verkleinern - die Summe der fg*-Divs in einer Reihe muss immer 12 ergeben) oder anhand der Page-ID oder Parent-ID oder Sprache unterschiedliche Logovarianten anzeigen (<?php if (PAGE_ID==1 || PARENT==1 ) { ... } else { ... } ?> / <?php if (LANGUAGE=="de") { ... } else { ... } ?> ) etc.

zu 3)
Nein, der Verweis auf Gridism kann dann raus

Offline

Liked by:

Slugger

#5 30.07.2020 18:14:17

cyberdyne
Member

Re: Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Hallo,
neues Template, neues Glück. Bei Acourdesz nahm das Gefummel kein Ende.

florian wrote:

Zu 2)
Lösche

In meiner Lesefaken index.php gab es nix zum löschen?

florian wrote:

und füge ganz unten, vor

<script type="text/javascript">
$(function() {
  var $mainMenuState = $('#main-menu-state');
...
...
usw.

ein:

<footer>
		<div class="center">
				<div class="orow">
					<div class="fg6 adresse">
					<?php
					if(FRONTEND_LOGIN) { echo '<a href="#" onclick="showloginbox(); return false;"><img src="'.TEMPLATE_DIR.'/img/key.png" alt="K" /></a><div id="login-box" style="display:none"></div>';} 
					?>
						<?php  page_footer(); ?>
					</div>
					<div class="fg6 footerverlinkungen">
						<a href="[wblink23]">Impressum</a> | <a href="[wblink42]">Datenschutzhinweis</a>
						<a id="gototopswitch" href="#" onclick="gototop();return false;"><img src="<?php echo TEMPLATE_DIR;?>/img/up.png" alt="Go to top" title="Go to top"></a>
					</div>					
					<br clear="all">
				</div>
			</div>
	</footer>

Den Footer dann per template.css stylen, z.B.

footer {
	background-color:#eee;
	padding:10px;
}

.footerverlinkungen {
	text-align:right;
}

Hab ich wie beschrieben gemacht, erscheint auch wie beabsichtigt, allerdings ist der Footer nicht bündig mit dem main(content), finde die passende class nicht um den Footer bündig mit obigen Abschnitt zu stellen. Kann mir jemand auf die Sprünge helfen?

Bild vom Footer

Viele Grüße,
Klaus


Macht's gut und danke für den Fisch!

Offline

#6 30.07.2020 18:47:03

florian
Administrator

Re: Lesefaken: Logo, Footer, Style-Anpassung mpForm, Suche

Der zu löschende Code war nur in einer Version des Lesefaken-Templates, in der von dritter Seite Änderungen vorgenommen worden sind. Du hast die Version ohne diese Ergänzungen.

Zum Einrückungsproblem: Ergänze im Stylesheet noch

footer .orow {
	padding:0 1.8%;
}

Offline

Board footer

Powered by FluxBB

up