Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
aidasanchez2
45 PointsBootstrap Modal is not working
I tried adding a Bootstrap Modal to my website and it is not working (it fades in for like a second and then disappears again). Could it have something to do with the order of js files we have added as shown in the video here? I tried using bootstrap modals before in my life (not in wordpress) and they always worked fine. I'm also almost 100% sure that there is nothing wrong with my html so it must be a javascript issue.
Jennifer Nordell
Treehouse TeacherI'm in agreement with Rich Donnellan. This is going to be much easier to troubleshoot if we can see the code. Posting a snapshot would be particularly helpful!
aidasanchez2
45 PointsHey thanks a lot for the prompt answers! I will post my functions.php file (where I enqueue my stylesheets and js files), the wordpress template where the problem is and my css, each in its own comment! thanks a lot already!
aidasanchez2
45 Points'''php <?php
function theme_styles() {
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_styles');
function theme_js() {
global $wp_scripts;
wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );
$wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
$wp_scripts->add_data( 'respind_js', 'conditional', 'lt IE 9' );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );
// add_filter( 'show_admin_bar', '__return_false');
add_theme_support( 'menus' );
function register_theme_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' )
)
);
} add_action( 'init', 'register_theme_menus' );
?> '''
aidasanchez2
45 Points'''html <?php get_header(); ?>
<!-- Video Section -->
<div class="video-section">
<div class="fullscreen-bg">
<video muted autoplay loop class="fullscreen-bg__video">
<source src="<?php echo get_bloginfo('template_url') ?>/video/enviamovie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
</div>
<div class="container absolute-center">
<div class="row">
<div class="col-sm-4 col-sm-offset-4 col-xs-12">
<div>
<img id="logo" alt="Logo" class="img-responsive" src="<?php echo get_bloginfo('template_url') ?>/images/logowhite.png">
</div>
</div>
<div class="col-sm-4"></div>
</div>
<div class="row text-center">
<div class="col-xs-12">
<p id="statement">We support the ambitions and goals of women in Oaxaca by providing them with the tools they need to achieve success and improve their livelihoods.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<a class="page-scroll" href="#landingpage"><button type="button" id="videolearnmore" class="page-scroll btn absolute-center">Learn More</button></a>
</div>
</div>
</div>
</div>
<!-- Rest of Landing Page Section -->
<div id="landingpage" class="container">
<div id="about" class="row">
<div class="col-lg-9 col-md-12">
<p class="sectionintro">FundacÃon En VÃa is a non-profit organization which works to alleviate poverty through economic empowerment. We use funds generated through <strong>responsible tourism</strong> to provide <strong>interest-free microloans</strong> and <strong>educational programs</strong> to entrepreneurial women in 6 communities in the Tlacolula Valley of Oaxaca, Mexico.</p>
</div>
<div class="col-lg-3">
<a href="https://www.tripadvisor.com/Attraction_Review-g150801-d1767193-Reviews-Fundacion_En_Via-Oaxaca_Southern_Mexico.html" target="_blank"><img class="img-responsive" src="<?php echo get_bloginfo('template_url') ?>/images/tripadvisor.jpg" alt="tripadvisor" id="tripadvisor"></a>
</div>
</div>
<div id="how" class="row text-center">
<div class="col-sm-12">
<p>We pursue our vision of providing affordable credit for those in need through a combination of three core programs:</p>
</div>
</div>
<div class="row text-center">
<div class="col-sm-4">
<div class="pillar">
<h1><img class="icons img-responsive" alt="tourism" src="<?php echo get_bloginfo('template_url') ?>/images/earth.svg"></h1>
<h3>Responsible Tourism</h3>
<p>We lead weekly tours into Oaxacan communities where visitors get the chance to meet our borrowers to see what impact our program has had on their lives.</p>
<a href="responsibletourism.html"><button class="btn btn-default">Learn More</button></a>
</div>
</div>
<div class="col-sm-4">
<div class="pillar">
<h1><img class="icons img-responsive" alt="microfinance" src="<?php echo get_bloginfo('template_url') ?>/images/group.svg"></h1>
<h3>Microfinance</h3>
<p>The large majority of your tour fee flows into our microloan program, so that we are able to provide small, interest-free microcredits to women living in poverty.</p>
<a href="microfinance.html"><button class="btn btn-default">Learn More</button></a>
</div>
</div>
<div class="col-sm-4">
<div class="pillar">
<h1><img class="icons img-reponsive" alt="education" src="<?php echo get_bloginfo('template_url') ?>/images/hat.svg"></h1>
<h3>Education</h3>
<p>In addition to interest-free microcredits, we provide our borrowers with relevant educational training so that they have the skills to make the most out of their new financial tools.</p>
<a href="education.html"><button class="btn btn-default">Learn More</button></a>
</div>
</div>
</div>
<div class="row text-center" id="impact">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1><img class="img-reponsive" id="graph" alt="impact" src="<?php echo get_bloginfo('template_url') ?>/images/graph.svg"></h1>
<h3>Impact Assessment</h3>
<p>The impact assessment program is an undertaking that we only started very recently. Being coordinated by one of our staff members and supported by a number of volunteers, this program aims to measure our borrowers' progress out of poverty and to what (numeric) extent our microfinance program has truly benefited their househould's finances.</p>
<button data-toggle="modal" data-target="#impactModal" type="button" class="btn btn-default">Learn More</button>
</div>
<div class="col-md-1"></div>
</div>
<div id="tours" class="row text-center">
<div class="col-xs-6 col-xs-offset-3">
<h3 class="title">Our Tours</h3>
</div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-md-6">
<div class="img-responsive tourteaser microfinancetour">
<div class="innertourteaser">
<h2>MICROFINANCE TOUR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="tours.html"><button class="btn btn-default hoverbuttons">More information on this tour</button></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="img-responsive tourteaser projecttour">
<div class="innertourteaser">
<h2>PROJECT TOUR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="tours.html"><button class="btn btn-default hoverbuttons">More information on this tour</button></a>
</div>
</div>
</div>
</div>
<div class="section row toursplitter">
<div class="col-md-6">
<div class="img-responsive tourteaser dayofdeadtour">
<div class="innertourteaser">
<h2>DAY OF THE DEAD</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="tours.html"><button class="btn btn-default hoverbuttons">More information on this tour</button></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="img-responsive tourteaser springbreaktour">
<div class="innertourteaser">
<h2>ALTERNATIVE SPRING BREAK</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="tours.html"><button class="btn btn-default hoverbuttons">More information on this tour</button></a>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="impactModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">IMPACT ASSESSMENT</h4>
</div>
<div class="modal-body">
<p>
Thanks to the generosity of the En VÃa community and the power of crowdfunding, the Impact Assessment Program was launched as a pilot in 2015 and formalized as an En VÃa program in 2016.
<br>
Given the growth in the breadth and depth of En VÃa’s programming since it was founded in 2010, we felt it was essential to formalize the evaluation of En VÃa’s initiatives and investigate their impact.
<br>
This program seeks to improve the effectiveness and efficiency of our current and future activities, to ensure that we are successfully leveraging the resources available to us.
<br>
Using data evidence and feedback, we can make more informed decisions that more effectively support our borrowers, their businesses, and their families. We are dedicated to ensuring accountability to our stakeholders and also to our donors.
</p>
</div>
</div>
</div>
</div>
<?php get_footer(); ?> '''
aidasanchez2
45 Points/* Impact Assessment Landing Page Styling */ '''css
graph {
height: 80px;
width: 80px;
margin: 0 auto;
}
impact p {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: 200;
margin-top: 40px;
}
impact h3 {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 2.2em;
font-weight: 200;
}
impact button {
background: none;
color: black;
margin-top: 30px;
} .impactgraphic { width: 100%; margin: 10px; } '''
aidasanchez2
45 PointsThe modal is located at the very bottom of the html code and the button for it is in the div with the "impact" id more or less in the middle of the html code.
Rich Donnellan
Treehouse Moderator 27,740 PointsRich Donnellan
Treehouse Moderator 27,740 PointsHey Norman,
Can you post your code or provide a link to your Workspace? It's hard to debug without it.