First of all, I'm using a child theme for wordpress (TwentyThirteen Parent Theme). I have an image to use as header there is something like this:
So, in black would be my header image (the white part is transparent), in gray I have my menu-bar and in red my first section on content's site.
My problem is... how can I set (with css/bootstrap) to the image header be like this? What's the basic structure for that?
My header.php code is this:
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div class="header">
<?php echo '<img class="img-responsive" src="' . get_stylesheet_directory_uri() . '/img/header.png">';?>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</header><!-- #masthead -->
<div id="main" class="site-main">
in twenty thirteen theme site title/description & menu comes under header section so you can add header image section above it. Please refer below example code.
<body <?php body_class(); ?>>
<!-- Here you can add custom header image section outside page div -->
<div class="headerImg1"><img src=""></div> <!-- postion one -->
<div id="page" class="hfeed site">
<!-- or you can also add here inside page div. -->
<div class="headerImg2"><img src=""></div> <!-- postion two -->
<header id="masthead" class="site-header" role="banner">
<!-- site title/description code -->
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<!-- Nav code -->
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div id="main" class="site-main">
Related
I am creating a custom theme, but have run into some problems. For your information my files are as seen below:
themes/
aq-aquatics/
css/
img/
js/
footer.php
functions.php
header.php
index.php
page-homepage.php
page-wide.php
style.css
index.php
This is my header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Matthew Smart">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<div class="header-top text-right">
<div class="container">
<span style="margin-right:40px;">Tel: 01922 418050</span><span>Email: sales#hollybush-garden.com</span>
</div>
</div>
<div class="container">
<div class="header-content" style="min-height:86px;">
<div class="row">
<div class="col-sm-1" style="position:absolute;top:11px;z-index:1000;">
<img src="<?= get_template_directory_uri(); ?>/img/logo.png" width="108" height="100" alt="a&d logo"/>
</div>
<div class="col-sm-offset-1 col-sm-10 text-right" style="margin-left:132px;">
<nav class="navbar">
<div class="container">
<div>
<ul class="nav navbar-nav" style="width:inherit; border-bottom:none !important;margin-top:31px;">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">At A & D
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Aquatics
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tropical</li>
<li>Pond</li>
<li>Marine</li>
<li>Cold water</li>
<li>Aquatics Sundries</li>
</ul>
</li>
<li>Valencia Wharf Coffee Shop</li>
<li>Opening Times</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="purple-line" style="margin-bottom:25px;"></div>
</header>
This is my page.wide.php
<?php
/*
Template Name: Wide Page
*/
get_header();
?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
<?php get_footer(); ?>
And this is my footer.php
<footer>
<div class="container">
<div class="col-sm-6">
A&D AQUATIC & GARDEN CENTRE | WEBSITE DESIGN BY <span>MATTHEW SMART</span>
</div>
<div class="col-sm-6 text-right">
<ul>
<li>TERMS AND CONDITIONS</li>
<li>PRIVACY POLICY</li>
<li>COOKES</li>
</ul>
</div>
</div>
</footer>
</div><!-- End WRAP -->
<?php wp_footer(); ?>
</body>
</html>
Now the page i am trying to test is using the wide template. I have put some dummy text into the editor and clicked publish.
Now when i try to visit the page the first thing i can see is part of the header. The browser then takes another 5 seconds and loads the navigation which is in my header.php file.
It seems to just ignore everything from the page template and afterwards. So the_content() pulls nothing through and the footer doesn't get displayed.
I have been comparing these files with other themes i have created and cannot seem to find a cause.
Does anyone know why this may be happening?
Thanks
Your loop is missing the_post().
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
https://codex.wordpress.org/Function_Reference/the_post
This is necessary to let WordPress know you are inside the loop, and retrieve the requested post's data. The footer isn't loading because the page is erroring out when it calls the_content() and cannot deal with this function outside the loop.
According to WordPress documentation the_content "must be within The_Loop."
The theme I have selected in Wordpress is very simple with not a lot of customizations built in. I am trying to add a small logo to appear to the left of the Name and Description at the top left of the page.
I have uploaded the file and have been able to succesfully add the following code
<img src = "http://www.pixelbip.com/wp-content/uploads/2015/08/PixelBip-Icon.png" height="70" width="70"/>
But that just puts the logo at the top left then the Name and Description appear below the logo.
Also. I am not very experienced with PHP or CSS. I know a little bit only.
Here is the contents of my header.php file
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package Readly
* #since Readly 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action('before'); ?>
<header id="masthead" class="site-header" role="banner">
<div id="header-wrapper">
<hgroup>
<div id="hgroup-wrapper">
<div id="hgroup-wrapper2">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<h2 class="site-description"><?php bloginfo('description'); ?></h2>
</div>
</div>
</hgroup>
<nav id="site-navigation" class="navigation-main" role="navigation">
<div id="site-navigation-wrapper">
<div id="site-navigation-wrapper2">
<h1 class="menu-toggle"><?php _e('Menu', 'readly'); ?><span>m</span></h1>
<div class="assistive-text skip-link"><?php _e('Skip to content', 'readly'); ?></div>
<?php wp_nav_menu(array('theme_location' => 'primary', 'fallback_cb' => false)); ?>
</div>
</div>
</nav><!-- .site-navigation -->
</div>
</header><!-- #masthead -->
<div id="page" class="hfeed site">
<div id="main" class="site-main">
Can anyone spell out for a newbie how i can add the code I need?
One more thing I need to add. I need to do this change to the Child theme header.php so that future updates to the theme don't mess up my logo.
Thanks very much!
I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
I'm designing this website and I need it to be .php to communicate with a database and start some countdown clocks (which aren't up yet). The page was originally .html and everything was perfect, but since I changed it to .php for some reason the footer keeps repeating itself. The code will be fine on my editor, I'll load the page, reload the file on the editor and the code somehow appears there all on its own!
Right now there is no PHP code whatsoever, I merely changed the file's extension. If you visit the same URL but the .html version, you'll see everything is fine. What could be causing this?
Thanks in advance for your help!
EDIT:
Entire HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Aqua</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060"></script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!-- Photo gallery stuff -->
<link rel="stylesheet" href="css/slideshow/slideshow.css">
<style>
.slideshow { margin-left: 24.45%; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { 'pic07.jpg': {/*No captions, thumbnails or anything*/}, 'pic06.jpg': {}, 'pic10.jpg': {}, 'pic02.jpg': {}};
new Slideshow('slideshow', data, { controller: false, thumbnails: false, loader: false, height: 400, width: 600, hu: 'images/', transition: 'back:in:out'});
});
</script>
<!--End-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<img class="logo" src="images/aqua.jpg">
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Banner -->
<section id="banner">
<div id="slideshow" class="slideshow"></div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Intro -->
<section id="intro">
<div class="actions">
Get Started
Learn More
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer Wrapper -->
<div id="footer-wrapper">
<!-- Footer -->
<section id="footer" class="5grid-layout">
<div class="row">
<div class="4u">
<section>
<header>
<h2>Links</h2>
</header>
<ul class="divided">
<li>Events/Tickets</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Connect with us</h2>
</header>
<ul class="social">
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Aqua, LLC<br />
39 Old Ridgebury Road<br />
Danbury, CT 06810
</p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>© Aqua, LLC</li>
<li>Images: Dreametry Doodle + Iconify.it</li>
<li>Design: HTML5 Up! + Daytaro</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
It's repeated really awkwardly after that. It might the FTP server, I use Koding (don't ask) for this and it's connected to my server via FTP. I tried using FileZilla too (didn't delete files before re-uploading) but that didn't do anything.
Make sure you delete the file before uploading it. Some FTP clients will write over with some extra code...
I'm working on a project for school. And the deadline is tomorrow.
I want to change the body tag and add a background image on the products page when url is:
index.php?category=nieuwBinnen&product=Belair+X ch
How can I simply achieve this. I tried the if isset method but ended without success.
You can see the website on: http://alisgfx.com/lomo/
I appreciate any help.
Ali
index.php
# geef de HTML code voor het openen van de pagina weer
htmlOpenen('Titel van de website');
# toon de header
toonHeader();
include 'menu.php';
?>
<?php
if (isset($_GET['category']) && isset($_GET['product']) && isset($$_GET['category'])){ //display product if provided
$category = $$_GET['category'];
$product = $_GET['product'];
$error_msg = 1; //sets a basic error catcher in case product does not exist
foreach ($category as $item) {
if ($item['naam'] == $product) {
echo '
<section>
<article class="product">
<h2 class="item_name">'.$item['naam'].'</h2>
<div id="image">'.$item['foto'].'</div>
<p>'.$item['video'].'</p>
<p>
'.$item['fotos'].'
</p>
</article>
';
echo '
<article class="product simpleCart_shelfItem">
<div id="slider3">
<ul class="pager">
<li>Info</li>
<li>Reviews</li>
<li>Extra\'s</li>
</ul>
<div class="viewport">
<ul class="overview">
<li class="page"><p> '.$item['info'].' <hr />'.$item['prijs'].'Beschikbaarheid: '.$item['beschik'].' <br /><br />Aantal: <input type="text" value="1" class="item_Quantity"></p></li>
<li class="page"><p>'.$item['reviews'].'</p></li>
<li class="page"><p>'.$item['extras'].'</p></li>
</ul>
</div>
</div>
<h2 class="item_name hide"> '.$item['naam'].' </h2>
<p class="hide">'.$item['thumb'].'</p>
<a class="item_add" href="javascript:;"> Plaats product <br />in je winkelmandje </a>
</article>
';
echo '
<article class="product box-shadow">
<p>Met deze camera<br /> kun je zulke foto\'s<br /> maken</p>
<div id="slider4">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
'.$item['upload'].'
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
<!-- <form action="" method="post">
<input type="file" name="bestand"><br>
<input type="submit" name="submit" value="Upload foto">
</form> -->
<a class="upload" href="upload">Upload je<br /> eigen foto\'s</a>
</article>
<article class="product">
<p>filmrolletje</p>
</article>
</section>
';
// echo $item['prijs']."<br/>";
// echo $item['product']."<br/>";
// echo $item['info']."<br/>";
$error_msg = 0;
}
}
if ($error_msg){ //basic error message in case product does not exist
echo 'The selected product no longer exists';
}
}
else{ //displays all product if specific product not given
?>
<!-- producten carousel -->
<section class="carousel">
<div class="banner"><img src="img/nieuw.jpg"></div>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php
foreach($nieuwBinnen as $new) {
echo '
<li>
<a href="index.php?category=nieuwBinnen&product='.urlencode($new['naam']).'">
<p>'.$new['product'].'</p>
<h2>'.$new['naam'].'</h2>
</a>
</li>
';
}
?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</section>
<!-- producten carousel -->
<section class="carousel">
<div class="banner"><img src="img/best.jpg"></div>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php
foreach($bestSellers as $best) {
echo '
<li>
<a href="index.php?category=bestSellers&product='.urlencode($best['naam']).'">
<p>'.$best['product'].'</p>
<h2>'.$best['naam'].'</h2>
</a>
</li>
';
}
?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</section>
<?php
}
include 'footer.php';
?>
inc.template.inc.php
<?php
# Public: Echo de HTML code voor het openen van de pagina
#
# $titel - Een tekst die tussen de <title> en </title> tags wordt geplaatst
#
# Examples:
#
# htmlOpenen('pagina titel');
# # => geeft onderstaande html weer
function htmlOpenen($titel){
# Geef de HTML openen code weer
echo '<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lomography</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<section id="container" class="clearfix">
';
}
function htmlOpenenCart($titel){
# Geef de HTML openen code weer
echo '<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lomography</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery-ui-cart.css">
<link rel="stylesheet" href="./fancybox/source/jquery.fancybox.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<section id="container" class="clearfix">
';
}
function toonHeader() {
echo '
<header>
<a id="logo" href="index.php"><img src="img/logo.png" alt="Lomography Shop"></a>
<nav id="mainNavigation">
<ul>
<li>inloggen</li>
<li>registreren</li>
<li>over ons</li>
</ul>
</nav>
<div class="cartInfo"><span class="simpleCart_quantity"></span> items</div>
<div id="cartPopover">
<div id="triangle">▲</div>
<div class="simpleCart_items"></div>
<div id="cartData" class="clearfix">
<div class="left"><strong>Items: </strong><span class="simpleCart_quantity"></span></div>
<div class="right"><strong>Total: </strong><span class="simpleCart_total"></span></div>
</div>
<div id="popoverButtons" class="clearfix">
View
<!-- Checkout -->
</div>
</div><!--End #cartPopover-->
<div id="zoeken">
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Search..." />
</form>
</div>
</header>
';
}
?>
You could set it dynamically by using JavaScript / JQuery.
Could try something like:
$targetpage = $_SERVER['SERVER_NAME'].'/index.php?category=nieuwBinnen&product=Belair+X'
if (!$targetpage) {
echo background 1;
}else{
echo background 2;
}
$ class='no-bgimage'; if (isset($_GET['product']) {
$class='bgimage';
}
then in your body
<body class="<?php echo $class ?>">
then in you css
.bgimage {
background-image: url('page/to/your/image');
}