WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 18.07.2020 17:59:26

Slugger
Mitglied

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.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

Online

#2 18.07.2020 19: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;}

Beitrag geändert von florian (18.07.2020 20:02:18)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 20.07.2020 14:58:59

Slugger
Mitglied

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.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

Online

#4 20.07.2020 15: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


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

Slugger

#5 30.07.2020 17:14:17

cyberdyne
Mitglied

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

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

florian schrieb:

Zu 2)
Lösche

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

florian schrieb:

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 17: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%;
}

Code allein macht nicht glücklich. Jetzt spenden!

Offline

#7 23.08.2020 11:03:08

Slugger
Mitglied

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

Hallo,
dank den Hinweisen bin ich ziemlich weit gekommen.

Ich habe aber noch den einen oder anderen Schönheitsfehler, bei denen ich noch in der Luft hänge.

1. Kontaktformular mit  "mpform" und "fidgrid".  (Siehe Bilder Small 01-03)

Ich bekomme es nicht hin, das der Abschluss auf der rechten Seite in der mobilen Version zu sehen ist.

2. Cookie-Einstellung  mit "Cookie Consent 2". (Siehe Bild Small 04)

Wie kann die Einblendung so gestallten das es in der mobilen Variante weiter Links und wesentlich kleiner dargestellt wird.
Ist es auch möglich statt Text eine Grafik zunehmen?

Nachtrag:
3. Die Logos

Wie bekomme ich die beiden Logo auf die gleiche Höhe? (Siehe Bild Standard 05)

Zur Betrachtung kann auch der Link zur Verfügung gestellt werden.

Beitrag geändert von Slugger (23.08.2020 11:16:16)


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

Online

#8 23.08.2020 14:07:52

florian
Administrator

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

zu 1)
mpform/frontend.css, Zeile 221

.mpform_text, .mpform_err_text {
    width: 410px;
}

Das muss da raus

zu 2)
cookieconsent/frontend.css oder im Template-CSS einfügen:

@media screen and (max-width:400px) {
.cc-revoke.cc-left {
    left: 0;
    font-size: x-small;
}
}

zu 3)
template.css, Zeile 26

.logo img {
    margin-bottom: 2em;
    max-height: 90px;
}

max-height einfügen

(Ich hatte noch den Link zur Vorabversion der Seite in der PM vom 08.07., deshalb konnte ich es mir direkt anschauen)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

Slugger

#9 23.08.2020 19:34:17

Slugger
Mitglied

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

Hallo florian,
vielen Dank für deine Hinweise und Unterstützung, die Du mir in dieser Angelegenheit gegeben hast.

Du wirst von Mir in irgendeiner Art und Weise hören.  thumb_up

Aus meiner Sicht bin ich Fertig, sodass ich es in den nächsten zwei Wochen zum Abschluss bringe und übergeben werde.

Es sei denn, ich habe die eine oder andere "Kleinigkeit" übersehen. roll

Beitrag geändert von Slugger (23.08.2020 22:14:36)


Hoster: ALL-INKL *** Grundsätzliche WBCE Konfig ***
WBCE: 1.5.4 • BE: 2.1.0 • PHP: 8.1.16 * 1. Projekt: FE: Simple responsive • BE: Argos * 2. Projekt: FE: hortal • BE: Argos * 3. Projekt: FE: WBCEZon • BE: Argos * 4. Projekt: FE: WBCETik • BE: Argos
Status Projekt 1-4:  OK

Online

Liked by:

florian

Fußzeile des Forums

up