Css queries

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

Comments

  • acrylian Administrator, Developer

    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/

  • edited March 2020

    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>





    Clay-Pigeon

    <!-- 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'; ?>
    





    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")

    Clay Pigeon

        </div>
              </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>
    



    The footer.php shows up when I take the iframe code out.

    Kind Regards

    Eddie

  • Please note that I have brackets in this but have to take them out because it doesn't show up in the comment!!!

  • fretzl Administrator, Developer
    edited March 2020

    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>    
          <div class="row">
                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"><h2>Clay Pigeon</h2>
    
            </div>
                  </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 zpbase
    The zpmobile theme you're using is more or less for devices only.

  • acrylian Administrator, Developer

    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.

  • 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"

  • 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.

  • acrylian Administrator, Developer
    edited March 2020

    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.

  • 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!

  • acrylian Administrator, Developer

    How can I get it styled like my website without using iframe.

    You need to create a theme that looks like your site. There is no easier way.

  • 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?

  • acrylian Administrator, Developer

    Yes, that is the best way to not overwrite your changes. But you naturally have to maintain your theme regarding updates of Zenphoto yourself. At least on major releases there might be changes that need to be applied to your theme.

  • edited March 2020

    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

  • acrylian Administrator, Developer
    edited March 2020

    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

  • 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?

  • acrylian Administrator, Developer

    You have to look at the theme files itself (the tutorial will guide you). It may use a function call for CSS/JSS on all pages, I don't remember without looking myself ;-)

Sign In or Register to comment.