I am trying to implement the sticky footer for bootstrap but it is not working for me. I have a header.php and a footer.php which I include in every page of my website. I saw a various posts here for the sticky footer but it doesn't seem to work for me. I saw an example to add a and a to the body of my page and modify the css accordingly but it doesnt seem to work. Please find my code below:
webpage.php
<?php
require_once "../includes/essentials.php";
include "../includes/header.php";
?>
<div id="wrap">
<div id="main" class="container">
Content
<?php include "../includes/footer.php"; ?>
</div>
</div>
Footer.php
<html>
<body>
<div class="footer">
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Content
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
Compatible with Firefox and Chrome.
</div>
</div>
</div>
</div>
</body>
</html>
style.css
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
.wrap {
min-height: 100%;
margin: 0 auto;
min-width: 1000px;
}
.main {
overflow:auto;
padding-bottom:200px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
bottom:0;
}
How do i fix this? I want the footer to stick at the bottom of the page even if content gets over before half of the webpage.
In the CSS you select .main as a class but in the html you've put is as an ID <div id="main">.
Secondly the <div class="footer"> should be outside of #wrap, as a sibling and not a child.
<div id="wrap">
<div id="main">
// <div id="contnainer"...
</div>
</div>
<div class="footer">
// <div id="contnainer"...
</div>
A quick fix to your problem is to use a NavBar as a footer, and simply fill it with the content you'd like in it.
Bootstrap Components provides the JS for the NavBar to stick to the top or bottom of the screen.
You can read about it here
Related
I'm hoping somebody with more experience using timber can help me? I'm trying to create a Wordpress theme using timber/ twig and I want to be able to include yelp reviews in the footer on every page within the site.
I've got the following files:
sidebar.twig
<!-- Review and contact button Section -->
{% if sidebar %}
<section class="reviewSection">
<div class="review__container">
{{sidebar.text}}
</div>
</section>
{% endif %}
footer.twig
{% include('templates/_embeds/_sidebar.twig') %}
<!-- Footer -->
<footer>
{# <div class="footer__contact">
<div class="FooterCTABox">
<a class="cta--contact FooterCTA"href="{{site.url.path}}/contact">Book Now</a>
<a class="cta--phone FooterCTA"href="tel:080979767645">Call Us</a>
</div>
</div> #}
<div class="footer__main">
<div class="main__container">
<div class="main__addressCol footerCol">
<h4>Get in touch</h4>
<div class="footerCol__content footerCol__content--address">
<p><span>1 Address Blvd<br />place<br />San Diego<br />Zipcode</span><br /><span class="address__contact"tel: 0880009123123</span><br /><span class="address__contact"email: info#email.com</span></p>
</div>
</div>
<div class="main__linkCol footerCol">
<h4>Links</h4>
<div class="footerCol__content">
<ul>
<li>FAQS</li>
<li>Blog</li>
<li>Gallery</li>
<li>Events</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="main__socialCol footerCol">
<h4>Follow us</h4>
<div class="footerCol__content footerCol__content--social">
<ul>
<li>Facebook</li>
<a href="<li>Instagram</li></a>
<li>Yelp</li>
</ul>
</div>
</div>
<div class="main__logoCol footerCol">
<picture>
<img src="{{site.theme.path}}/images/logo-text-sm.png" alt="Logo" />
</picture>
</div>
</div>
</div>
<div class="footer__end">
<div class="end__links">
<ul>
<li class="end__date">{{ "now"|date("Y") }} © {{ site.name }}</li>
<li>Terms & Conditions</li>
<li class="web">Website Designed & managed by - Web Design</li>
<ul>
</div>
</div>
</footer>
<script type="text/javascript" src="{{site.theme.path}}/scripts/script.js"></script>
</body>
</html>
sidebar.php
<?php
/* sidebar.php */
$context = array();
$context['sidebar'] = Timber::get_sidebar('Primary Sidebar');
Timber::render('/templates/_embeds/_sidebar.twig', $context);
sidebar.scss
.reviewSection {
background-color: #fff;
height: auto;
min-height: 200px;
#include flex(center, center, row);
#media (max-width: $mobileScreen) {
margin-top: 30px;
}
.review__container {
margin: auto;
width: 70%;
height: 25%;
min-height: 150px;
background-color: #d32323; // to be removed once the actual yelp plugin is in there.
#include flex(center, center, row);
h3 {
color: $textPrimary;
}
#media (max-width: $tabletScreen) {
width: 90%;
margin: 0;
}
}
}
And within Wordpress I've created a widget that is currently using the Yelp review plugin.
The issue I'm getting is that when I run the code, the sidebar HTML shows, but not the actual sidebar content from the plugin. I just get the big red placeholder box with no content. I've also included the sidebar screenshot from Wordpress itself in case that's useful and I've done something wrong there.
Would be very grateful for any help anyone has. I've tried searching for a few days to get the answer and I'm just not sure what's going wrong.
Many thanks
You don't need sidebar.php (since you're loading it via twig already) and you need to load sidebar content into context globally to be loaded whenever you need it.
Move this line:
$context['sidebar'] = Timber::get_sidebar('Primary Sidebar');
Same as the menu here: https://timber.github.io/docs/guides/menus/#setting-up-a-menu-globally
They are other ways around but I like the top one best. But if you want to have a look on multiple options go and check the official documentation for sidebars.
I'm trying to convert my html template into a php script that simply takes returned database values and uses comparisons on certain values to place the correct content in the placeholders.
The data is being returned properly and is showing on the page but my html formatting is breaking.
This should output a very simple format of a container row, 2 half-width columns each of which with its own internal div like this:
<div class="row middle">
<div class="col-lg-6 leftFifty">
<div class="leftContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
<div class="col-lg-6 rightFifty">
<div class="rightContent" style="background-color: white; height: 100%; ">
Content
</div>
</div>
</div>
But when I add in the PHP conditions it breaks the format completely including anything included after this section
<div class="row middle">
<?php foreach($panelResult as $PR): ?>
<div class="col-lg-6 leftFifty">
<?php if($PR['panel_type_id'] == 2){ ?>
<div class="leftContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content']?>
</div>
</div>
<div class="col-lg-6 rightFifty">
<?php } elseif($PR['panel_type_id'] == 3){?>
<div class="rightContent" style="background-color: white; height: 100%; ">
<?php echo $PR['content'] ?>
</div>
<?php } ?>
</div>
<?php endforeach; ?>
</div>
<!--This div is not showing-->
<div class="row bottom">
<div class="col-lg-12">
<div class="marquee"><h2>This is a test</h2></div>
</div>
</div>
For this page type, row-middle should exist, and both the leftFifty/leftContent class as well as the rightFifty and rightContent class should all exist.
The only reason I'm using the If statement is to make sure that the panel_type_id ==2 content fills the left div, and same for the right div if it equals 3.
How can I restructure this to retain the html formatting?
I have the following code and displayed output on a webpage shown below...
...and wish to create a slight indent in the margin so that the left align is not so severely on the left? The result is generated from two text files, so it is the main code that generates the css
It appears to be this line that generates the left as opposed to centre command;
<div class="col-lg-10 text-left">
The whole code snippet in question is here:
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:left;">
<p></br></br></br></br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p></br></br></br></br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-left">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<?php include "content/quiz/". $_GET['quiz'] ."/questiontrinket.php"; ?>
</div>
What do I need to add to the existing code to get the margins to be rendered correctly (i.e with an indent for both the intro text (questiontrinket.php) and the questions held in question.txt?
Edit: deleted previous answer since he needs a copy paste solution.
Here goes:
<!-- Main
============================================= -->
<section id="code">
<div class="container-fluid" style="text-align:left;">
<p></br></br></br></br></p>
<div class="row">
<div class="col-lg-2 text-left">
<p></br></br></br></br></p>
<?php include 'quiz-sidebar.php'; ?>
</div>
<div class="col-lg-10 text-left">
<h2 class="section-heading" style="color:black;">Test Your Knowledge : <?php include "content/quiz/". $_GET['quiz'] ."/title.txt"; ?></h2>
<p></br></p>
<div style="border-style: solid; border-radius: 5px; border-width: 5px;">
<div class="questions" style="display:block; padding-left: 10px;">
<style>
.questions input[type="radio"]{
margin-left: 5px;
}
</style>
<?php include "content/quiz/". $_GET['quiz'] ."/questiontrinket.php"; ?>
</div>
</div>
I am trying to create a layout similar to this one where the different sections span the entire width of the screen. I was looking at the html/css for the layout and couldn't figure out why my view was not doing the same. (I am relatively new to creating pages).
I am using php to make creating the pages easier so I have a few files.
.jumbotron{
background: gray;
height: 50%;
margin-top: 10px;
}
.jumbotron p, h1 {
text-align: center;
}
.nav {
text-align: center;
padding: 0;
margin: 0;
background-color: red;
height: 10%;
}
.nav li {
display: inline-block;
margin-right: 5%;
margin-left: 5%;
}
.container #about {
background: blue;
height: 50%;
}
.container #me {
background: blue;
height: 50%;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link href="dist3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul class="nav">
<li><a href="index.php">Home</li>
<li><a href="about.php">About</li>
<li><a href="contact.php">Contact</li>
</ul><!--END .nav-->
</div><!--END .wrapper-->
</div><!--END .header-->
<div class="container">
<div class="jumbotron">
<div class="container">
<h1>Example</h1>
<p>Example paragraph </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="about">
<span class="name">ABOUT</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="more">
<span class="name">MORE</span>
</div>
</div>
</div>
</div>
</div> <!--END MAIN CONTAINER-->
</body>
</html>
The rows don't extend to the edge of the screen. The views are also not aligned. I know it is a lot to look at, but I could not find any resource online with an example, or a simple template for me to take a look at.
In Bootstrap you can put the 12 column grid in a .container or a .container-fluid. The first is used if you want to grid to span a maximum of 1170 pixels, the latter if you want it to span the entire screen. Both have a horizontal padding of 15 pixels on each side to keep its content have some distance from the edge of the screen. For text this is a good thing to have, however as you note it's nice if a background color or image does span the entire width.
If you take a look at the theme you linked (see http://ironsummitmedia.github.io/startbootstrap-freelancer/) you might notice that the .container and .container-fluid classes they use also don't span the entire width of the screen. They surround them with other elements, e.g. <section class="success" id="about">, on which they put a background color.
See this example where i've put a <section> with a .pink or .green background color around the containers:
.pink {
background-color: #f99;
}
.green {
background-color: #9f9;
}
section {
padding-bottom: 20px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="pink">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12"><h3>.container-fluid</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
<section class="green">
<div class="container">
<div class="row">
<div class="col-xs-12"><h3>.container</h3></div>
</div>
<div class="row">
<div class="col-xs-6">Column one</div>
<div class="col-xs-6">Column one</div>
</div>
</div>
</section>
P.S. in your example the <a> tags aren't closed with a </a> tag, plus the .container after the .jumbotron isn't closed.
The problem with extending rows is simple, add the following rule:
body {
margin: 0;
}
I can't get my footer to show below all my content. The content currently overlays anything right at the bottom and I can't fix it.
Footer code:
</div> <!-- end #content -->
</div> <!-- end #container -->
<?php wp_footer(); ?>
<div id="footer" width:100%; >
<div id="column" style="width: 100%; height:200px; background-color:none;">
<div style="width:100%; height:100px; background-color:#cdbfc9; ">
<div style="width:80%; height:80px; background-color:#fefefe; margin-top: 10px; margin-left:5px;">
<!--Information for left column content starts here-->
<h6>LATEST NEWS</h6>
</div><!--Information for left column content ends here -->
</div>
</div>
</body>
</html>
If anyone could help I would really appreciate it. The URL is: