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.
Related
I want to redirect the user to a particular section of an html page.
// javascript for owl
$(document).ready(function(){
$('.owl-two').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay:true,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
});
<!-- nav-->
<ul class="dropdown-menu">
<li>Hair</li>
<li>Nail</li>
<li>Wax</li>
</ul>
<!-- owl carousel in salon services page-->
<div id="nail" class="row" >
<br>
<br>
<h3 class="text-center">Our Nail Services</h3>
<br>
<!-- nail carousal-->
<div class="owl-two owl-carousel owl-theme">
<div class="item"><img src="images/n1.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Manicure</h4>
</div>
<div class="item"><img src="images/n2.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Pedicure</h4>
</div>
<div class="item"><img src="images/n3.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Painting and Design</h4>
</div>
<div class="item"><img src="images/n4.jpg" alt="Image" class=" img-thumbnail">
<h4 class="text-center">Nail Extensions</h4>
</div>
</div>
I want to redirect the user directly from nav dropdown to another page's div containing that content. The page to which I want to redirect has 3 owl carousels.
I have already tried the html id redirect. <a href="#id">, but it does not works completely. The page redirects briefly to the section but scrolls automatically to the top of the page.
I am using the owl carousel and think that owl javascript is the responsible factor for this as I have tested it with removing owl and it works, also the id redirect works fine when done from the same page (i.e.services page ).
I have 3 carousels 1.hair 2.nail 3.wax
Kindly help I want to keep owl and the section redirect function. Thanks.
.sec {
width: 100%;
height: 100vh;
background-color: #ccc;
margin-bottom: 12px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div id="one" class="sec">
<h1>One</h1>
</div>
<div id="two" class="sec">
<h1>Two</h1>
</div>
<div id="three" class="sec">
<h1>Three</h1>
</div>
<div id="four" class="sec">
<h1>Four</h1>
</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;
}
hello so i'm trying to make a menu with css but when i try to click on an element from the menu it opens it in a new tab while i want it inside a div in the same page i'm new in css and thats my homework can you help me please and thanks
this is the code
<div id="menu"><?php include('admin/Menu/menu.php');?></div>
<div id="main">
i want the content here
</div>
this is the menu code
<ul id="menu">
<li>
Catalogue
<ul>
<li>Produits</li>
<li>Catégories</li>
<li>Marque</li>
<li>Fournisseur</li>
</ul>
</li>
<li>
Commandes
<ul>
<li>Commandes</li>
<li>Messages prédifinis</li>
</ul>
</li>
<li>
Clients
<ul>
<li>Clients <li>
<li>Pays</li>
<li>Groupes <li>
<li>Titre de civilité</li>
</ul>
</li>
<li>
Paramètres avancés
<ul>
<li>Emails</li>
<li>Images</li>
</ul>
</li>
<li>
Administration
<ul>
<li>Employés</li>
<li>Profils</li>
<li>Permission</li>
</ul>
</li>
<li>
Stats
<ul>
<li>Stats</li>
</ul>
</li>
What you could do is either something like this:
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'>
<div id='showMeContent' class='content'>
<p>This is just some basic content</p>
</div>
<div id='showThisContent' class='content'>
<p>This is also just some basic content</p>
</div>
</div>
<style>
.content { display: none; }
#showMeButton:active #showMeContent { display: block; }
#showThisButton:active #showThisContent { display: block; }
</style>
This is the closest you can get using css, but you might be able to do this a little better by using jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id='showMeButton'>button</a>
<a id='showThisButton'>button2</a>
<div id='main'></div>
<script>
$('#showMeButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is some content</p>");
});
$('#showThisButton').click(function() {
$("#main").empty();
$("#main").append("<p>This is also some content</p>");
});
</script>
Whatever you do, you dó have to make sure you start using id tags, otherwise it just acts as a link, you can easily replace the href='#' with id='something', and then write some css or javascript which opens your content inside the div you'd like it in.
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
quick question:
lets say this is my content div:
<div id="content">
<ul id="featured-controllers" class="clearfix">
<li class="first" style="min-height: 182.167px;">
<div class="et_slide_hover" style="opacity: 0; display: block;"></div>
<div class="controller">
<h2>Volunteers have more fun</h2>
</div>
<div class="et_animated_bar" style="display: block; width: 238.055px; left: 0.488656px; overflow: hidden;"></div>
</li>
<li style="min-height: 182.167px;" class="">
<div class="et_slide_hover" style="display: block; opacity: 0;"></div>
<div class="controller">
<h2>Mark your calendar</h2>
Check out our schedule of upcoming events...</p>
</div>
<div class="et_animated_bar" style="display: none; width: 239px; left: 0px;"> </div>
</li>
</ul>
<div id="services" class="clearfix">
<div class="service">
<h3>Sample Page</h3>
<p>
<a href="http://collaborativecommunityprogram.org/wp-content/uploads/sample.png">
<img class="alignnone size-medium wp-image-12" width="300" height="84" src="http://collaborativecommunityprogram.org/wp-content/uploads/sample-300x84.png" alt="sample">
</a>
</p>
</div>
</div>
<div id="footer">
<div id="footer-widgets" class="clearfix">
<div class="footer-widget" style="min-height: 58px;">
<div id="text-2" class="f_widget widget_text">
<h4 class="widgettitle"> </h4>
<div class="textwidget">
<img src="http://collaborativecommunityprogram.org/wp-content/uploads/footer-social.png">
</div>
</div>
</div>
</div>
Formatting is a bit messed up, but I'm trying to add content to the
ul list with the id of "featured-controllers" right at the top of the content div
element within that above content div. I'm trying to append content to it.
Here is the site: http://collaborativecommunityprogram.org/
Now, I've tried doing this:
function pc_custom_content($content) {
return $content."<div><p>This is a test</p></div>";
}
add_filter( 'the_content', 'pc_custom_content');
But it appends this div onto the end of the div with id of "services"
instead of ul id of "featured-controllers" at the top.
Is there any way I can stick some custom content, preferably another li into the ul id of "featured-controllers" list? I have found no way of doing this through the admin panel.
Any help is greatly appreciated.
Thanks!!
You could add a shortcode to your content from the admin panel. Then call your php code from your functions.php or plugin.
Modified from the Wordpress Codex
//you can pass arguments to shortcodes and they are stored in the $atts array
function function_name( $atts ){
return "dynamic content to replace shortcode with";
}
add_shortcode( 'shortcode_name', 'function_name' );
Then add this to your Home Page's content where you want the dynamic content to appear in WP Admin:
[shortcode_name]