WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 16.05.2017 08:29:36

screamindan
Mitglied

We be zeh eh anpassen

Moin. Ich finde das Template von Aufteilung und Menü sehr schön. Ich wollte es jetzt für meine Zwecke so anpassen, dass als Hintergrund der Seite ein Bild zum Einsatz kommt und der Inhalt vom Content dann halbdurchlässig darüber liegt. Ist das sehr aufwändig, wenn ich für manche Seiten dann ein anderes Bild nehmen möchte? Kann ruhig "hartverdrahtet" im Template sein...

Offline

#2 16.05.2017 08:41:44

florian
Administrator

Re: We be zeh eh anpassen

Ist ganz einfach.

Ändere in der index.php die Zeile

<body>

zu

<body class="body<?php echo PAGE_ID; ?>">

Füge dann in der style.css für die Seiten, die andere Hintergrundbilder haben sollen, nach

.body {
...bestehende Styledefinitionen...
} 

ein:

.body1 {
	background-image:url(hintergrundbild.jpg);
}

.body2 {
	background-image:url(andereshintergrundbild.jpg);
}

1 und 2 im Beispiel sind die IDs der Seiten, die andere Hintergründe haben sollen.
Die betr. Bilder müssen im Template-Verzeichnis abgelegt werden.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#3 16.05.2017 08:57:13

screamindan
Mitglied

Re: We be zeh eh anpassen

Danke. Das werd ich mal probieren. Welche Grösse sollten die Bilder denn dann haben?

Offline

#4 16.05.2017 09:08:05

florian
Administrator

Re: We be zeh eh anpassen

Irgend einen Kompromiss aus "Sieht auch bei 1900x1200 noch gut aus" und "ist keine drölfzighundert KB groß". Schwierig zu sagen also. Das Dummy-Hintergrundbild von wbce_hortal ist 1400x869 Px groß und bringt nur 33 KB auf die Waage.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#5 16.05.2017 09:12:43

screamindan
Mitglied

Re: We be zeh eh anpassen

Dann wird diese Grösse auch für mich ausreichen...  big_smile Kann man auch ein Bild einstellen, wenn kein besonderes hinterlegt ist?

Offline

#6 16.05.2017 09:36:34

florian
Administrator

Re: We be zeh eh anpassen

Ja, das wäre das Background-image für body, also

body {
...
background-image:standard.jpg;
}

.body1 {
background-image:hintergrundbild.jpg;
}

Kann aber sein, dass das Default-Bild kurz aufblitzt, was natürlich nicht so schön ist.
In dem Falle müsstest Du dann doch mit einer Style-Definition in der index.php realisieren, die prüft, ob ein Bild zur Page-ID vorhanden ist und das dann verwendet (oder halt nicht). Der Code in der index.php sähe in etwa so aus:

<head>
....bestehendes Anweisungen....

<?php
$bgbild_id = "standard";

//korrigiert


if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/bg_' . PAGE_ID . '.jpg')) {
        $bgbild_id = PAGE_ID;
    }
} else {
    if (file_exists(WB_PATH . '/media/bg_' . PARENT . '.jpg')) {
        $bgbild_id = PARENT;
    }
    if (file_exists(WB_PATH . '/media/bg_' . PAGE_ID . '.jpg')) {
        $bgbild_id = PAGE_ID;
    }
}

    ?>
<style type="text/css">
body {
	background-image:url(<?php echo WB_URL . '/media/bg_' . $bgbild_id . '.jpg';?>);
}
</style>

</head>

<body>
....bestehendes Anweisungen....

D.h. die Änderung am <body>-Tag und der styles.css entfallen. Der o.g. Code prüft, ob im /media-Verzeichnis  Bilder bg_1.jpg, bg_42.jpg usw. gibt und verwendet dann diese; Wenn nicht, wird die dort erwartete bg_standard.jpg verwendet.

Beitrag geändert von florian (16.05.2017 10:33:17)


Code allein macht nicht glücklich. Jetzt spenden!

Online

#7 16.05.2017 10:10:48

screamindan
Mitglied

Re: We be zeh eh anpassen

Ich habe jetzt (hoffentlich richtig) angepasst auf mein Standardbild (media/backgroundpics/bg_standard.png) folgendes vor das schliessende </head> kopiert...

[== PHP ==]
<?php
$bgbild_id = "bg_standard.png";


if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
} else {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PARENT . '.png')) {
        $bgbild_id = PARENT;
    }
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
}

    ?>

In styles.css habe ich bei body ergänzt:

[== CSS ==]
background-image:url(<?php echo WB_URL . '/media/backgroundpics/bg_' . $bgbild_id . '.png';?>);

Funktioniert aber so nicht. Hab ich da nen Fehler eingebaut?

Offline

#8 16.05.2017 10:23:15

florian
Administrator

Re: We be zeh eh anpassen

Das funktioniert so nicht. Schon weil im Stylesheet kein PHP-Code ausgeführt wird. Nimm doch bitte einfach den Code, den ich oben gepostet habe.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#9 16.05.2017 10:27:08

screamindan
Mitglied

Re: We be zeh eh anpassen

Hab ich auch grad festgestellt... Hatte gedacht das muss ins CSS, sorry...  ops
Das steht jetzt in der index.php; aus dem CSS is es wieder raus:

[== PHP ==]
<?php
$bgbild_id = "bg_standard.png";


if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
} else {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PARENT . '.png')) {
        $bgbild_id = PARENT;
    }
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
}

    ?>
    <style type="text/css">
body {
	background-image:url(<?php echo WB_URL . '/media/backgroundpics/bg_' . $bgbild_id . '.png';?>);
}
</style>

Offline

#10 16.05.2017 10:28:25

florian
Administrator

Re: We be zeh eh anpassen

Sieht für mich auf den ersten Blick richtig aus. Funktionierts nicht?


Code allein macht nicht glücklich. Jetzt spenden!

Online

#11 16.05.2017 10:31:43

screamindan
Mitglied

Re: We be zeh eh anpassen

screamindan schrieb:

Hab ich auch grad festgestellt... Hatte gedacht das muss ins CSS, sorry...  ops
Das steht jetzt in der index.php; aus dem CSS is es wieder raus:

[== PHP ==]
<?php
$bgbild_id = "bg_standard.png";

Muss lauten:

[== PHP ==]
<?php
$bgbild_id = "standard";

Nu klappts mit dem Standard. Jetzt muss ich noch die Page ID Version testen. Danke!

Offline

#12 16.05.2017 10:33:47

florian
Administrator

Re: We be zeh eh anpassen

Ah. Stimmt. Ich hab's oben im Codebeispiel angepasst.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#13 16.05.2017 10:36:15

screamindan
Mitglied

Re: We be zeh eh anpassen

Was ich grad noch nich raffe, is das CSS. Ich will einen grösseren Abstand zwischen Header und Content und zwischen Content und Footer. Finde aber die Anweisungen nicht, um Margin einzustellen... Der Content soll dann leicht durchsichtig sein, aber die Schrift nicht...  hmm

Offline

#14 16.05.2017 10:51:26

florian
Administrator

Re: We be zeh eh anpassen

Ändere bei .content das paddding, d.h. statt padding-bottom:2em z.B.

.content {
...
padding: 4em 0;
...
}

Durchsichtigkeit wird als Styleanweisung vererbt, d.h. das blasst dann auch die Schrift aus. Ich helfe mir bei sowas immer mit einem halbtransparenten PNG in der gewünschten Farbe, das ich als Hintergrundbild für die betr. Fläche nehme, also


.content {
...
padding: 4em 0;
background-image:url(bg-trans.png);
...
}

Wichtig: Die Anweisungen für Hintergrund-Farbe (background-color) und -verlauf müssen raus. Das halbtransparente Hintergrundbild muss im selben Verzeichnis wie das Stylesheet liegen.


Code allein macht nicht glücklich. Jetzt spenden!

Online

#15 16.05.2017 11:01:45

screamindan
Mitglied

Re: We be zeh eh anpassen

Ah ok... Hab jetzt die Farben rausgenommen. Allerdings is das nicht so wie ich dachte. Ich möchte Header, Contentbereich und Footer getrennt haben; also als 3 Teile. Dazwischen soll halt nix sein, nur ein Abstand, wo das Hintergrundbild durchschaut. Muss ich da noch ein paar Divs einbauen? Also quasi <div class="center content"> nochmal unterteilen?

Beitrag geändert von screamindan (16.05.2017 11:03:14)

Offline

#16 16.05.2017 11:10:34

screamindan
Mitglied

Re: We be zeh eh anpassen

Das mit dem transparenten png haut auch hin... thumb_up

Offline

#17 16.05.2017 11:10:48

florian
Administrator

Re: We be zeh eh anpassen

ja.

Vom Prinzip her so

<div class="center header">
<div class="row">
<div class="fg12">
Header
</div>
</div>
</div>

<div class="center content">
<div class="row">
<div class="fg8">
Content breit
</div>
<div class="fg4">
Content schmal
</div>
</div>
</div>

<div class="center footer">
<div class="row">
<div class="fg12">
Footer
</div>
</div>
</div>

und dann .content einen oberen und unteren margin geben. Einfach mal rumprobieren.
Mobile / Tabletansicht auch berücksichtigen.


Code allein macht nicht glücklich. Jetzt spenden!

Online

Liked by:

screamindan

#18 16.05.2017 13:46:54

screamindan
Mitglied

Re: We be zeh eh anpassen

Unterteilt hab ichs jetzt. Bin mir nicht sicher, ob Du das SO gemeint hast. Bekomme die Abstände nicht hin...

[== PHP ==]
<?php
if (!defined('WB_URL')) {
	header('Location: ../index.php');
	exit(0);
}
?><!DOCTYPE HTML>
<html lang="de-de" dir="ltr">
<head>
	
	<?php
	 if (file_exists(WB_PATH.'/modules/wbstats/count.php')) { 
		include (WB_PATH.'/modules/wbstats/count.php'); 
	} else {
			echo "<!-- wbstadts not found -->";
	}
	if(function_exists('simplepagehead')) {
		simplepagehead('/', 1, 0, 0); 
	} else { ?>
		<title><?php page_title(); ?></title>
		<meta http-equiv="Content-Type" content="text/html; charset=<?php if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else { echo 'utf-8'; }?>" />
		<meta name="description" content="<?php page_description(); ?>" />
		<meta name="keywords" content="<?php page_keywords(); ?>" />
	<?php  } ?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/editor.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/styles.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/fitgrid.css" />
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
	
	<?php
	register_frontend_modfiles('css');
	register_frontend_modfiles('jquery');
	register_frontend_modfiles('js');
	?>
	<script type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/jquery.smartmenus.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>
<link href="<?php echo TEMPLATE_DIR; ?>/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="<?php echo TEMPLATE_DIR; ?>/sm-blue.css" rel="stylesheet" type="text/css" />

<?php
$bgbild_id = "standard";


if (PARENT == 0) {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
} else {
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PARENT . '.png')) {
        $bgbild_id = PARENT;
    }
    if (file_exists(WB_PATH . '/media/backgroundpics/bg_' . PAGE_ID . '.png')) {
        $bgbild_id = PAGE_ID;
    }
}

    ?>
    <style type="text/css">
body {
	background-image:url(<?php echo WB_URL . '/media/backgroundpics/bg_' . $bgbild_id . '.png';?>);
}
</style>
</head>

<body class="body<?php echo PAGE_ID; ?>">
<?php 
	ob_start();		
	page_content(1);
	$page_content_1 = ob_get_contents();
	ob_end_clean();
	
	
	if(defined('TOPIC_BLOCK2') AND TOPIC_BLOCK2 != '') { 
		 	$page_content_2 = TOPIC_BLOCK2; 
	} else {
		ob_start();
		page_content(2);
		$page_content_2 = ob_get_contents();
		ob_end_clean();
	}
	
	ob_start();		
	page_content(3);
	$page_content_3 = ob_get_contents();
	ob_end_clean();
	
	ob_start();		
	page_content(4);
	$page_content_4 = ob_get_contents();
	ob_end_clean();
	


	
?>
	<div class="center head">
		<div class="row">
			<div class="fg12 meta">
				<?php
				show_menu2(
					$aMenu = 2,
					$aStart = SM2_ROOT,
					$aMaxLevel = SM2_START,
					$aOptions = SM2_TRIM,
					$aItemOpen = '[ac][menu_title]</a>',
					$aItemClose = '&nbsp;|&nbsp;',
					$aMenuOpen = '| &nbsp;',
					$aMenuClose = '',
					$aTopItemOpen = false,
					$aTopMenuOpen = ''
				);?>
				
				<?php  if(function_exists('language_menu')) { language_menu(); }  ?>
			</div>
			
			<div class="fg5 headl"><h1><?php echo WEBSITE_TITLE; ?></h1></div>
			<div class="fg2 headc"><a href="[wblink1]"><img src="<?php echo TEMPLATE_DIR; ?>/logo.png" alt="<?php echo WEBSITE_TITLE; ?>" width="100" height="100" /></a></div>
			<div class="fg5 headr"><h2><?php echo WEBSITE_HEADER;?></h2></div>			
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="center">
		<div class="orow">
		<nav id="main-nav" role="navigation">
				<input id="main-menu-state" type="checkbox" />
			<label class="main-menu-btn" for="main-menu-state">
			<span class="main-menu-btn-icon"></span> Toggle main menu visibility
			</label>
			<?php
			show_menu2(
				$aMenu = 1,
				$aStart = SM2_ROOT,
				$aMaxLevel = SM2_ALL,
				$aOptions = SM2_ALL,
				$aItemOpen = '<li>[ac][menu_title]</a>',
				$aItemClose = '</li>',
				$aMenuOpen = '<ul>',
				$aMenuClose = '</ul>',
				$aTopItemOpen = false,
				$aTopMenuOpen = '<ul id="main-menu" class="sm sm-blue">'
			);?>						
			</nav>
		</div>
		<div class="clearfix"></div>
	<div class="center content"><!-- Inhalt Anfang -->
		<?php if ($page_content_3 !='') { ?>
		<div class="row">
			<div class="fg12 eyecatcher">
				<?php echo $page_content_3; ?>
			</div>			
		</div>
		<?php } 
		
		if ($page_content_2 !='') {
		?>		
		<div class="row">
			<div class="fg8">
				<?php echo $page_content_1; ?>
			</div>
			<div class="fg4">
				<?php echo $page_content_2;  ?>
			</div>			
		</div>
		<?php } else { ?>	
		<div class="row">
			<div class="fg12">
				<?php echo $page_content_1; ?>
			</div>			
		</div>
		<?php } ?>
	</div><!-- Inhalt Ende -->
	<div class="center footer"><!-- Footer Anfang -->
	
		<div class="row">
			<?php if ($page_content_4 !='') { ?>
			<div class="fg8">
				<?php page_footer(); ?> 
			</div>
			<div class="fg4">
				<?php echo $page_content_4;  ?>
			</div>			
			<?php } else { ?>
			<div class="fg12">
				<?php page_footer(); ?> 
			</div>
			<?php } ?>	
		</div>
	</div><!-- Footer Ende -->
	</div>
	
	
<script type="text/javascript">
$(function() {
  var $mainMenuState = $('#main-menu-state');
  if ($mainMenuState.length) {
    // animate mobile menu
    $mainMenuState.change(function(e) {
      var $menu = $('#main-menu');
      if (this.checked) {
        $menu.hide().slideDown(250, function() { $menu.css('display', ''); });
      } else {
        $menu.show().slideUp(250, function() { $menu.css('display', ''); });
      }
    });
    // hide mobile menu beforeunload
    $(window).bind('beforeunload unload', function() {
      if ($mainMenuState[0].checked) {
        $mainMenuState[0].click();
      }
    });
  }
});
</script>
</body>
</html>
[== CSS ==]
html {
	height:100%;
}
body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */
	background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-repeat:no-repeat;
	font-family:Open Sans,sans-serif;
	background-attachment:fixed;
}

.content {
	/*background-color:#647087;*/
	background-image:url(pics/bg-trans.png);
	box-shadow:5px 5px 5px #000;
	color:#eee;
	margin:50px 0 50px 0;
	padding:0;
	/*background: rgba(100,112,135,1);
	background: -moz-linear-gradient(top, rgba(100,112,135,1) 0%, rgba(48,54,65,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(100,112,135,1)), color-stop(100%, rgba(48,54,65,1)));
	background: -webkit-linear-gradient(top, rgba(100,112,135,1) 0%, rgba(48,54,65,1) 100%);
	background: -o-linear-gradient(top, rgba(100,112,135,1) 0%, rgba(48,54,65,1) 100%);
	background: -ms-linear-gradient(top, rgba(100,112,135,1) 0%, rgba(48,54,65,1) 100%);
	background: linear-gradient(to bottom, rgba(100,112,135,1) 0%, rgba(48,54,65,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#647087', endColorstr='#303641', GradientType=0 );*/

}

.head {
	background-color:#303641;
	box-shadow:5px 5px 5px #000;
	margin: 0 0 10px 0;
}

.head .row {
	padding-top:0;
}

.meta {
	text-align:right;
	margin-top:0.2em;
	margin-bottom:0;
}

.meta a:link, .meta a:visited {	
	text-decoration:none;
	color:#ccc;
	font-size:70%;
}

.meta a:hover, .meta a:visited:hover {
	color:#fff;
}



.headc {
	text-align:center;
}

.headc img {
	margin-bottom:1em;
}

.headl h1 {
	font-weight:normal;
	margin:20px 0 0 0;
	padding:0;
	color:#fff;
	border-bottom:1px solid #fff;
	line-height:30px;
	text-align:left;
}

.headr h2 {	
	color:#fff;
	border-bottom:1px solid #fff;
	text-align:right;
	font-weight:normal;
	margin:20px 0 0 0;
	padding:0;
	line-height:30px;
}

.eyecatcher p {
	margin:0;
	padding:0;
}

.eyecatcher img {
	width:100%;
	height:auto !important;
}

.content img {
	max-width:100%;
	height:auto;
}


.content h1, .content h2, .content h3 {
	font-weight:normal;
}

.content h3 {
	font-style:italic;
}

.content a:link, .content a:visited {
	color:#fff;
}
.footer {
	background-image:url(pics/bg-trans.png);
	box-shadow:5px 5px 5px #000;
	padding:0;
}

/*z-index problem, Korrektur von Chio */
.center .orow {z-index:1000;}
.center .sm {z-index:1010;}

@media screen and (max-width:800px) {
	.head div {
		width:100%;		
		padding:0;
		margin:0;
	}
	
	.head h1, .head h2 {
		text-align:center;
		font-size:1em;
		border:0;
		margin:0;
	}
	
	.head .fg2 img {
		height:50px;
		width:auto;
		margin:0;
	}
	
	.nav {
		font-size:75%;		
	}
	
	.meta {
		text-align:center;
		margin-bottom:2em !important;
		color:#666;
	}
		
}


@media screen and (max-width:600px) {
	.nav .fg6, .nav ul li {
		width:100%;
		border:0;
		margin:0.5em 0;
		padding:0;
	}
}

Offline

#19 16.05.2017 14:24:44

florian
Administrator

Re: We be zeh eh anpassen

Ändere in der fitgrid.css

.center {
	max-width: 80em;
	margin: 0 auto;
	position: relative;
}

zu

.center {
	max-width: 80em;
	margin-left: auto;
       margin-right:auto;
	position: relative;
}

Code allein macht nicht glücklich. Jetzt spenden!

Online

Liked by:

screamindan

#20 16.05.2017 14:36:49

screamindan
Mitglied

Re: We be zeh eh anpassen

Ja so haut das hin!  smile  Danke für die Geduld!

Offline

#21 16.05.2017 15:02:54

screamindan
Mitglied

Re: We be zeh eh anpassen

Auf dem Handy klappt beim Scrollen unten beim Footer so ein weisser Kasten mit hoch. Als wollte da die Cookiemeldung aufgehen.  neutral
Is die da eigentlich irgendwo schon verbaut?

Beitrag geändert von screamindan (16.05.2017 15:03:34)

Offline

#22 16.05.2017 15:08:35

florian
Administrator

Re: We be zeh eh anpassen

Nein, ist nicht drin, und ich weiß auch gerade nicht, was Du für einen Kasten meinst. Hast Du mal einen Link oder Screenshot?


Code allein macht nicht glücklich. Jetzt spenden!

Online

#23 16.05.2017 15:13:17

screamindan
Mitglied

Re: We be zeh eh anpassen

Oder es ist ein Rand am Hintergrundbild...

Offline

#24 16.05.2017 15:14:26

screamindan
Mitglied

Re: We be zeh eh anpassen

Wenn ich runterscrolle und neu laden lasse, isser weg.

Offline

#25 16.05.2017 15:20:21

florian
Administrator

Re: We be zeh eh anpassen

Dann kam das wohl noch aus dem Cache.


Code allein macht nicht glücklich. Jetzt spenden!

Online

Fußzeile des Forums

up