Member
Hi. I have installed the folder and set up the database- you can view my gallery at woldfarmshooting.co.uk/clay-pigeon.php. I have a few questions-
1) How can I make it responsive (for all devices)?
2) How can I make css changes? So far it’s in an Iframe tag.
3) Finally how to make other other changes for example not displaying the breadcrumb to gallery (previous)
Kind regards
Eddie
1) How can I make it responsive (for all devices)?
2) How can I make css changes? So far it’s in an Iframe tag.
3) Finally how to make other other changes for example not displaying the breadcrumb to gallery (previous)
Kind regards
Eddie
Administrator
To make a non responsive theme responsive you have to extensively rework its CSS. There is no simple way. Perhaps use a theme that is already responsive. See the themes listed on our website.
Please read the theming tutorial to learn the basics about theming and how to perhaps modify or create your own theme. In any case you need advanced HTML, CSS and PHP knowledge which we cannot teach you: https://www.zenphoto.org/news/theming-tutorial/
Please read the theming tutorial to learn the basics about theming and how to perhaps modify or create your own theme. In any case you need advanced HTML, CSS and PHP knowledge which we cannot teach you: https://www.zenphoto.org/news/theming-tutorial/
Member
Hey
I have taken your advice and downloaded a theme which is mobile responsive although quite surprise not all are mobile responsive.
Anyway I want to use an iframe to be embedded in a page- woldfarmshooting.co.uk/clay-pigeon.php
It works ok except my footer.php doesn't show up and the header.php works when you are in desktop mode but not working on the mobile menu.
I have copied the code and hopefully you can tell me what the problem is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clay-Pigeon</title>
<!-- Bootstrap -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<?php $page = 'clay-pigeon';include 'include/header.php'; ?>
</head>
<body>
<main>
code for the iframe- iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery")
<div class="col">Clay Pigeon
</main>
<?php include ('include/footer.php'); ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
The footer.php shows up when I take the iframe code out.
Kind Regards
Eddie
I have taken your advice and downloaded a theme which is mobile responsive although quite surprise not all are mobile responsive.
Anyway I want to use an iframe to be embedded in a page- woldfarmshooting.co.uk/clay-pigeon.php
It works ok except my footer.php doesn't show up and the header.php works when you are in desktop mode but not working on the mobile menu.
I have copied the code and hopefully you can tell me what the problem is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clay-Pigeon</title>
<!-- Bootstrap -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<?php $page = 'clay-pigeon';include 'include/header.php'; ?>
</head>
<body>
<main>
code for the iframe- iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery")
<div class="col">Clay Pigeon
</main>
<?php include ('include/footer.php'); ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
The footer.php shows up when I take the iframe code out.
Kind Regards
Eddie
Member
Please note that I have brackets in this but have to take them out because it doesn't show up in the comment!!!
Administrator
So let's first make sure your code is displayed properly, like this:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clay-Pigeon</title>
<!-- Bootstrap -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<?php $page = 'clay-pigeon';include 'include/header.php'; ?>
</head>
<body>
<main>
code for the iframe- iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery")
<div class="col">Clay Pigeon
</main>
<?php include ('include/footer.php'); ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
```
You can see that the "code for the iframe..." is no code at all.
That line should look something like this:
```
<iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery"></iframe>
```
Btw, I would personally choose another responsive theme like zenji or <a href=https://github.com/zenphoto/zpbase>zpbase</a>
The zpmobile theme you're using is more or less for devices only.
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Clay-Pigeon</title>
<!-- Bootstrap -->
<link href="style.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-4.0.0.css" rel="stylesheet">
<?php $page = 'clay-pigeon';include 'include/header.php'; ?>
</head>
<body>
<main>
code for the iframe- iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery")
<div class="col">Clay Pigeon
</main>
<?php include ('include/footer.php'); ?>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
</body>
</html>
```
You can see that the "code for the iframe..." is no code at all.
That line should look something like this:
```
<iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery"></iframe>
```
Btw, I would personally choose another responsive theme like zenji or <a href=https://github.com/zenphoto/zpbase>zpbase</a>
The zpmobile theme you're using is more or less for devices only.
Administrator
Please understand that it exceeds the possibilities of this forum to help you with specific theme modifications. The code is not correctly excaped, We don't even know the theme you are using and we don't know every 3rd party theme anyway.
You apparently are using bootstrap so I like to point you to the bootstrap documentation on how to use it. IF you never did before you may have to learn a few things first.
> although quite surprise not all are mobile responsive.
Well, time resources at least regarding the included official themes. This is not our primary job. They are internally almost all more or less "deprecated". The 3rd party themes are not our responsibility.
> Anyway I want to use an iframe to be embedded in a page- woldfarmshooting.co.uk/clay-pigeon.php
You surely know that using iframes to include a site is not really good practice and not that good SEO wise either. it is more a workaround. Better adjust your theme to look like your site instead.
You apparently are using bootstrap so I like to point you to the bootstrap documentation on how to use it. IF you never did before you may have to learn a few things first.
> although quite surprise not all are mobile responsive.
Well, time resources at least regarding the included official themes. This is not our primary job. They are internally almost all more or less "deprecated". The 3rd party themes are not our responsibility.
> Anyway I want to use an iframe to be embedded in a page- woldfarmshooting.co.uk/clay-pigeon.php
You surely know that using iframes to include a site is not really good practice and not that good SEO wise either. it is more a workaround. Better adjust your theme to look like your site instead.
Member
Yes it does art from the iframe which i had to edit in the comment, hopefully shows up now <iframe width="960" height="1000" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.woldfarmshooting.co.uk/zenphoto/Gallery"</iframe>
Member
Thank You Acyrlian. I have only just starting using this programme so not all of us are experts on this. If I knew what I was doing on the options on the themes then maybe I wouldn't resort to using iframes! It is zpMobile that I'm using by the way. I understand that 3rd party themes are not your responsibility.
Administrator
> I have only just starting using this programme so not all of us are experts on this.
Sure I understand that absolutely. Embedding via iframe is not that ZP specific though
zpMobile is a little special and uses the jquery mobile framework. If you want to include anything via iframe to another responsive site, you need to make the iframe responsive, too. Set `width="100%"` for some basics. The height won't work without extra JS if you need that to adjust to the content.
You need to escape code correctly via backticks or indention to show up completely. See the link about "markdown" below the post form about how to do that.
Sure I understand that absolutely. Embedding via iframe is not that ZP specific though
zpMobile is a little special and uses the jquery mobile framework. If you want to include anything via iframe to another responsive site, you need to make the iframe responsive, too. Set `width="100%"` for some basics. The height won't work without extra JS if you need that to adjust to the content.
You need to escape code correctly via backticks or indention to show up completely. See the link about "markdown" below the post form about how to do that.
Member
Ok, thanks. I have switched to zpbase. How can I get it styled like my website without using iframe. I gather that iframe is not the best way!
Administrator
Member
So go into the folder, duplicate it and then work on the style sheet to make it look like my web site. Then upload it as if I update the original I would lose it?
Administrator
Member
Hi, Thanks for your support. The page http://woldfarmshooting.co.uk/zenphoto/Gallery/ is coming on nicely and starting to look like my website. I just having a few issues- regarding adding bootstrap css and js files.
On the index.php page, I'm looking to attached my bootstrap css file and include a few jquery plugins after the include footer.php.
On my regular website I have these included and they work. I have copied the files and pasted them into the css and js folders respectively in zenphoto.
Is they something else do I need to do? I have the code as follows for the index.php-
```
<link href="css/bootstrap-4.0.0.css" rel="stylesheet"> (this is above the inc/header.php.
```
below inc/footer.php i have-
```
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
```
Thanks
P.s. How do you use markdown?
P.P.S. Code display changed by admin
On the index.php page, I'm looking to attached my bootstrap css file and include a few jquery plugins after the include footer.php.
On my regular website I have these included and they work. I have copied the files and pasted them into the css and js folders respectively in zenphoto.
Is they something else do I need to do? I have the code as follows for the index.php-
```
<link href="css/bootstrap-4.0.0.css" rel="stylesheet"> (this is above the inc/header.php.
```
below inc/footer.php i have-
```
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.0.0.js"></script>
```
Thanks
P.s. How do you use markdown?
P.P.S. Code display changed by admin
Administrator
> On the index.php page, I'm looking to attached my bootstrap css file and include a few jquery plugins after the include footer.php.
Since zpbase which you seem to use does not have a header file, you need to incude extra js or css in every theme page that needs it (I don't remmeber offhand howe zpbase does this).
If you are using the zpBase theme as you seem to you basically don't need bootstrap. The theme is already responsive and it certainly will not work out of the box without some more customisations. Since bootstrap is not just for responsiveness (although it can be used that way), but a full toolkit for web interfaces (I personally don't use it).
Perhaps it would be easier for you to use our bare bones demo theme which is linked from our tutorial (https://github.com/zenphoto/demo-theme) that has neither much html nor styling?
I again cannot see code examples because of missing escaping.
Regarding markdown please see https://daringfireball.net/projects/markdown/syntax
Since zpbase which you seem to use does not have a header file, you need to incude extra js or css in every theme page that needs it (I don't remmeber offhand howe zpbase does this).
If you are using the zpBase theme as you seem to you basically don't need bootstrap. The theme is already responsive and it certainly will not work out of the box without some more customisations. Since bootstrap is not just for responsiveness (although it can be used that way), but a full toolkit for web interfaces (I personally don't use it).
Perhaps it would be easier for you to use our bare bones demo theme which is linked from our tutorial (https://github.com/zenphoto/demo-theme) that has neither much html nor styling?
I again cannot see code examples because of missing escaping.
Regarding markdown please see https://daringfireball.net/projects/markdown/syntax
Member
I use bootstrap and jQuery for the main website, the header at a mobile size is a classic example- see http://www.woldfarmshooting.co.uk. I wouldn't bother to try and include the files but I want it to look the same. How many theme pages does zpbase has?