WBCE CMS – Way Better Content Editing.
You are not logged in.
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
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.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
Danke. Das werd ich mal probieren. Welche Grösse sollten die Bilder denn dann haben?
Offline
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.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
Dann wird diese Grösse auch für mich ausreichen... Kann man auch ein Bild einstellen, wenn kein besonderes hinterlegt ist?
Offline
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.
Last edited by florian (16.05.2017 10:33:17)
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
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
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.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
Hab ich auch grad festgestellt... Hatte gedacht das muss ins CSS, sorry...
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
Sieht für mich auf den ersten Blick richtig aus. Funktionierts nicht?
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
Hab ich auch grad festgestellt... Hatte gedacht das muss ins CSS, sorry...
![]()
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
Ah. Stimmt. Ich hab's oben im Codebeispiel angepasst.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
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...
Offline
Ä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.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
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?
Last edited by screamindan (16.05.2017 11:03:14)
Offline
Das mit dem transparenten png haut auch hin...
Offline
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.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
screamindan
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 = ' | ',
$aMenuOpen = '| ',
$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
Ä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;
}
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
screamindan
Ja so haut das hin! Danke für die Geduld!
Offline
Auf dem Handy klappt beim Scrollen unten beim Footer so ein weisser Kasten mit hoch. Als wollte da die Cookiemeldung aufgehen.
Is die da eigentlich irgendwo schon verbaut?
Last edited by screamindan (16.05.2017 15:03:34)
Offline
Nein, ist nicht drin, und ich weiß auch gerade nicht, was Du für einen Kasten meinst. Hast Du mal einen Link oder Screenshot?
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline
Oder es ist ein Rand am Hintergrundbild...
Offline
Wenn ich runterscrolle und neu laden lasse, isser weg.
Offline
Dann kam das wohl noch aus dem Cache.
Sorgen sind wie Nudeln: man macht sich meist zu viele.
Offline