I've followed a tutorial about CodeIgniter and I have a problem in putting icon from a bootstrap class. Here is the code
<div class="container">
<div class="row">
<! -- Main Column -->
<div class="span9">
<section>
<h2>Page name </h2>
</section>
</div>
<! -- Side Bar -->
<div class="span3">
<section>
<?php echo mailto('iamjohnx3302#gmail.com', '<i class="icon-user"</i> iamjohnx3302#gmail.com'); ?> <br>
<?php echo anchor('admin/user/logout', '<i class="icon-off"></i>logout'); ?>
</section>
</div>
</div>
</div>
Also, I have added the bootstrap script and CSS by :
<head>
<title><?php echo $meta_title; ?></title>
<!-- Bootstrap -->
<link href="<?php echo base_url('css/bootstrap.min.css'); ?>" rel="stylesheet">
</head>
Also below the body, I added the script :
<script src="<?php echo base_url('js/bootstrap.min.js'); ?>"></script>
if you want to use Glyphicons use this one <span class="glyphicon glyphicon-envelope"></span> and you can find details here http://getbootstrap.com/components/ or if you want to use Font-Awesome you can use like this <i class="fa fa-bluetooth-b"></i> details here https://fortawesome.github.io/Font-Awesome/icons/
The icon from Bootstrap,
you should follow the class name like this:
<i class="glyphicon glyphicon-user"></i>
For your reference Bootstrap Components
Hope this helps.
Related
can somebody help me how to do it? I need to rewrite some code of quick view i need if somebody push on the quick view icon they got redirected to single product page , not the quick view popup.
First Step
Second Step Change to Single of Third Step
Your quick view should be in <a> tag with the data-target="" in which data-target refers to the modal pop up display.
It should be something like this,
In your <a> tag.
<a class="gift" data-toggle="modal" data-title="<?php echo get_the_title();?>" data-content="<?php $content= get_the_content(); $content1=substr($content,0,20); echo wp_strip_all_tags($content1); echo "...";?>" data-target="#gift_pop" data-price="<?php echo '€'.$product->get_regular_price();?>" data-id="<?php echo $product->get_id();?>" data-image="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" data-link="<?php the_permalink(); ?>"> <img src="<?php echo get_the_post_thumbnail_url($post->ID,'medium');?>" alt="">
</a>
In <a> tag itself we should get the data which should be shown in modal popup.
And this is My modal popup html code.
<div class="modal" id="gift_pop" role="dialog">
<div class="modal__content">
<div class="modal__wrapper">
<a class="modal__close" data-dismiss="modal">
<img src="<?php echo get_template_directory_uri(); ?>/images/login_close.png" alt="">
</a>
<div class="product_popup">
<div class="acc_img">
<img id="product_pop" src="">
</div>
<div class="acc_text">
<p id="product_title_pop"></p>
<div class="pro_lrt _fl">
<span id="product_price_pop"></span>
</div>
<p id="product_content_pop"></p>
<a id ="product_link_pop" href="">View Details.</a>
</div>
</div>
</div>
</div>
</div>
The Id of the modal popup should be the data-target value.
And finally the script to append the data which we got in <a> tag.
<script type="text/javascript">
//to append values in modal popup
$(".gift").click(function(){
var postId = $(this).data('id');
var image = $(this).data('image');
var title = $(this).data('title');
var content= $(this).data('content');
var price= $(this).data('price');
var link= $(this).data('link');
$('#product_pop').attr("src",image);
$('#product_title_pop').html(title);
$('#product_content_pop').html(content);
$('#product_price_pop').html(price);
$('#product_link_pop').attr("href",link);
});
</script>
And thats it! Enjoy.
The website I'm developing uses the bootstrap framework. The problem that follows is that I have a container div that should have a background image outside the div both to the left and to the right with the chosen image background. Below are examples of what I intend. Someone can help me? Thank you.
HTML/PHP
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fundo" id="fadein1">
<br>
<br>
Nova Publicação
<br>
<br>
<p class="titulo_grande">Bairro Mineiro</p>
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12">
<a class="linha_paginas"></a>
<br>
<br>
<div id="titulo_titulo">
<?php echo $row['titulo'];?>
</div>
<br>
</div>
<div class="col-sm-4">
<a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
</div>
<div class="col-sm-8">
<div id="texto_texto">
<?php echo $row['texto'];?>
</div>
</div>
<div class="col-sm-6" align="right">Editar</div>
<div class="col-sm-6">Eliminar</div>
<?php
}
?>
<br>
<br>
</div>
</div>
Well, you can do this by wrapping another DIV around container and applying background to that doc, instead.
<div class=“body-bg”>
<div class=“container”>
....
</div>
</div>
Now, in your CSS, you write this:
.body-bg {
background: url(‘path-to-your-image.jpg’);
width: 100vw; /* you shouldn’t need this as DIVs usually take width or parent container, anyway */
}
in this case you have to put your fundo container inside another container-fluid, so:
<div class="container-fluid back-img">
<div class="container fundo" id="fadein1">
<br>
<br>
Nova Publicação
<br>
<br>
<p class="titulo_grande">Bairro Mineiro</p>
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM bairro ORDER BY id DESC;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12">
<a class="linha_paginas"></a>
<br>
<br>
<div id="titulo_titulo"><?php echo $row['titulo'];?></div>
<br>
</div>
<div class="col-sm-4">
<a class="fancybox" href="upload/bairro/<?php echo $row['image']; ?>" data-fancybox-group="media-gallery"><img src="upload/bairro/<?php echo $row['image']; ?>" id="imagem" class="imagem img-fluid"></a>
</div>
<div class="col-sm-8">
<div id="texto_texto"><?php echo $row['texto'];?></div>
</div>
<div class="col-sm-6" align="right"><a href="admin_bairro_editar.php?update_id=<?php echo $row['id']; ?>" class="btn btn-warning" >Editar</a></div>
<div class="col-sm-6"><a href="?delete_id=<?php echo $row['id']; ?>" class="btn btn-danger" >Eliminar</a></div>
<?php
}
?>
<br>
<br>
</div>
</div>
</div>
now on css, you add a background img to the container-fluid div that i gave the class name back-img,and use the following code:
.back-img{
background-img: url("your url");
}
you can also use body instead,but it's better to use a div if you don't want the background image on the whole page.
i hope this will help you
update: if you want background image in each side alone, you should change your container to container-fluid, and add 3 cols like that:
<div class="col-sm-2 background-left"> </div>
<div class="col-sm-8 center"> // your mane block should be here(buttons and all your elements </div>
<div class="col-sm-2 background-right"> </div>
and now you add the css code
.background-left{
background-img: url("your url");
}
.background-right{
background-img: url("your url");
}
Good luck.
I recently read a similar help topic here: https://support.advancedcustomfields.com/forums/topic/bootstrap-modal-pop/ – I kind of understand it but I cant seem to get my head around how it relates to my situation.
I’m building a grid of client logos, using the ACF repeater function. I have the logos displaying correctly, the fields within the repeater are an image and a page link.
When you click on a logo, instead of a page link, I would like it to open up a modal window. Inside this modal window, I would like the logo again, a title and two text areas.
I just cant figure it out!!
Here’s my initial code for pulling through the logo repeater field:
<div style="background-color:#ffffff;width:100%;">
<div class="container margin-top-20" >
<div class="row">
<?php if( get_field('client_logos') ): ?>
<div style="clear:both;margin-top:20px;"></div>
<h3 class="brand-white" >Our Clients</h3>
<ul class="blocks blog-block logo-block">
<?php if( get_field('client_logos') ): ?>
<?php while( has_sub_field('client_logos') ): ?>
<li>
<div class="block-image">
<div class="logo-image">
<div class="logo-center">
<?php $logoblock = get_sub_field('client_logo'); ?>
<img src="<?php echo $logoblock['sizes']['medium']; ?>">
</div>
</div>
</div>
</li>
<?php endwhile; ?>
<?php endif; ?>
</ul>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
and here's my modal window code:
<div class="modal fade col-md-4" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" style="background-color:<?php the_sub_field('box_color'); ?>">
<div class="modal-header">
<!-- Close x --> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Logo --> <?php the_field('client_logo');?>
<!-- Title --> <?php the_field('client_title');?>
</div>
<div class="modal-body">
<!-- Case Study --><?php the_field('text area 1');?>
<!-- Testimonial --><?php the_field('text area 2');?>
</div>
</div>
</div>
</div>
I feel like all the answers are there but I cant figure out how to put them together. If anyone could help me combine the two that would be amazing!!
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm implementing a large project with Bootstrap 3, and today I saw that suddenly the site is on 100% width. Because of the cache of the browser, it happened yesterday, but I only saw it today, so I don't know what piece of code I was working on that triggered it. I don't recall messing with variables, grid.less or any file that traditionally may have something to do with the width of the site.
Being so, I'm kinda lost! Where would you suggest that I look? I disabled custom CSS files one by one, and nothing...
I cannot send link as I'm working on virtual machine, I'm attaching the code from the main layout file, just in case.
<?php echo $this->docType().PHP_EOL;?>
<html lang="<?php echo Inwx_Website::getLanguage();?>">
<head>
<?php
echo $this->headMeta().PHP_EOL;
echo $this->headTitle().PHP_EOL;
echo $this->headLink().PHP_EOL;
echo $this->headStyle();
?>
</head>
<body ng-app="inwxApp">
<div class="viewport">
<div class="frame">
<div class="view" ng-controller="FrontCtrl">
<div id="ajax-loading">
<img src="/img/ajax-loader.gif" class="ajax-loader"/>
</div>
<!--Nav Top Blue-->
<div>
<div class="navbar navbar-static-top">
<div class="container">
<div class="navbar-collapse collapse">
<a class="pull-left" href="<?php echo $this->url(array('controller'=>'index','action'=>'index'),'default',true);?>" target="_top">
<img src="/img/logo-inwx.png" alt="InterNetworx" title="InterNetworx"/>
</a>
<div class="row col-md-3 pull-right">
<div class="pull-right">
<?php echo $this->drawLanguages();?>
</div>
</div>
<div class="row col-md-8 pull-right ix-login" ng-show="loggedin==0" ng-cloak>
<ul class="pull-right">
<li><?php echo _t("Login")?></li>
<li><a class="ix-login-buttons" href="<?php echo $this->url(array('controller'=>'customer','action'=>'signup'),'default');?>"><?php echo _t("Register")?></a></li>
</ul>
<form id="main-loginform" ng-submit="login('main-loginform')">
<input class="col-md-2" type="text" placeholder="<?php echo _t('Username')?>" ng-model="username" name="username" value="">
<input class="col-md-2" type="password" placeholder="<?php echo _t('Password')?>" ng-model="password" name="password" value="">
<button type="submit" class="btn btn-default btn-success"><?php echo _t("Login")?></button>
<?php echo _t("Forgot your password?")?>
</form>
</div>
<!-- logged in: user -->
<div class="ix-info-costumer pull-right" ng-show="loggedin==1" ng-cloak>
<ul class="ix-down">
<li><?php echo _t('Username')?>: {{userData.firstname}} {{userData.lastname}}</li>
<li><?php echo _t('Credit balance')?>: {{creditData.available | currency: '€'}}</li>
<li><?php echo _t('Customer id')?>: {{userData.customerId}}</li>
<li><?php echo _t('Service PIN')?>: {{userData.servicePin}}</li>
<li><?php echo _t('Logout')?>
</ul>
</div>
</div>
</div>
</div><!--/Nav Top Blue-->
<!--Nav Grey-->
<div class="navbar navbar-static-top ">
<div class="container">
<div class="navbar-collapse collapse">
<ng-include src="'<?php echo $this->url(array('controller'=>'index','action'=>'navi'),'default',true);?>'"></ng-include>
<div class="pull-right" ng-show="cartData.list.length">
<!-- shopping cart info -->
<a class="btn btn-default btn-sm ix-btn-custom" data-placement="bottom"><img src="/img/shopping-icon.png" />{{cartData.list.length}}</a>
<div id="popover_content_wrapper" style="display:none">
<div class="row ix-shop-popover">
<div class="pull-left">
<ul class="ix-shop-popover">
<li>{{cartData.list.length}} <?php echo _t("Items")?></li>
</ul>
</div>
<div class="pull-right">
<ul class="ix-shop-popover">
<li>{{cartData.totalPrice | currency: '€'}}</li>
</ul>
</div>
</div>
<div class="ix-divider">
<div class="pull-left">
<?php echo _t("Empty cart")?>
</div>
<div class="pull-right">
<?php echo _t("Check Out")?>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!--/Nav Grey-->
</div> <!-- end of InitCtrl -->
<!--Content-->
<div class="container">
<div class="row">
<!--Domain Search Static in all pages-->
<div class="col-md-6">
<form class="form-inline" role="form">
<div class="form-group">
<?php echo _t("DOMAIN CHECK")?>:
</div>
<div class="form-group pull-right">
<i class="icon-white icon-search"></i> <?php echo _t("Search")?>
</div>
<div class="col-md-7 pull-right">
<div class="input-group">
<label class="sr-only" for="exampleInputEmail2"><?php echo _t('My Domain'); ?></label>
<input placeholder="<?php echo _t('My Domain'); ?>" type="text" ng-model="domain" class="form-control" id="exampleInputEmail2">
<span class="input-group-btn">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<?php echo _t("Default")?>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><?php echo _t("Generic")?></li>
<li><?php echo _t("America")?></li>
<li><?php echo _t("Europe")?></li>
<li><?php echo _t("Asia")?></li>
<li><?php echo _t("Africa")?></li>
<li><?php echo _t("Oceania")?></li>
<li><?php echo _t("All")?></li>
<li><?php echo _t("New TDLs")?></li>
</ul>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<!--/Domain Search Static in all pages-->
<?php echo $this->navigation()->breadcrumbs()->setSeparator("/"); ?>
<?php echo $this->layout()->content; ?>
</div>
</div>
</div>
</div>
</div>
<?php
echo $this->headScript().PHP_EOL;
echo $this->inlineScript().PHP_EOL;
?>
</body>
</html>
Pop open firebug and inspect the body tag to see if what stylesheet the width 100% is coming from. Bootstrap 3 is very focused on responsive layouts so this would make sense.
If it is a new site, it will have a 100% width as it exist in a block level html tag that will not have a width constraint until you give one. I dont see any bootstrap class names to enforce a width either.
As a developer you should have you cache turned off almost always :) Most browser web dev toolbars provide this as an option.
Hope that gives you a starting point. Discovering the source of width should be pretty straight forward.
Im trying to make a custom wordpresss theme. I want to install a Jquery plugin (slideshow). I so far have a theme installed that I created but don't know how to make the plugin interface with my theme. Do I need to declare a space in a div or place some php code in the theme so that the plugin knows where to go?
You can directly write the jquery code for the sliders. For example, applying accordion slider in my template page:
header.php file, save it in your custom theme folder
<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );
?></title>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"
type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js"
type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
$(document).ready(function() {
$('.kwicks').kwicks({
max : 800,
spacing : 5
});
});
</script>
<!--end Accordion-->
</head>
<body>
<div id="wrapper">
<div class="w1">
<div class="w2">
<!-- header -->
<header id="header">
<div class="line"></div>
<!-- logo -->
<h1 class="logo"><a href="#">xcvdfgdf - Career Development
Centre</a></h1>
<!-- main nav -->
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>
<?php wp_head(); ?>
Then, create slider.php, where you want your slider to appear
<?php
/**
* Template Name: accordion
*
* Selectable from a dropdown menu on the edit page screen.
*/
?>
<?php get_header(); ?>
<body>
<!-- main -->
<div id="main">
<!-- gallery -->
<section class="intro gallery">
<div class="gallery-holder">
<div class="slider_list_accordion">
<ul class="kwicks horizontal" >
<li id="kwick_1"><img src="<?php
bloginfo('template_url'); ?>/images/slider-1.png" alt=""
/></li>
<li id="kwick_2"><img src="<?php
bloginfo('template_url'); ?>/images/slider-2.png" alt=""
/></li>
<li id="kwick_3"><img src="<?php
bloginfo('template_url'); ?>/images/slider-3.png" alt=""
/></li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
Then, footer.php
<footer id="footer">
<div class="footer-holder">
<div class="container">
<div class="case">
<!-- contact -->
<div class="contact">
<section class="contact-holder">
<h4>Get in Touch</h4>
<dl>
<dt>Telephone:</dt>
<dd>+1 800 603 6035</dd>
<dt>Fax:</dt>
<dd>+1 800 889 9898</dd>
<dt>E-mail:</dt>
<dd>contact#vycdc.com</dd>
</dl>
<address>9870St Vincent Place, <br >Glasgow, DC 45 Fr
45.</address>
</section>
<div class="add">
<div class="case">
<strong class="copyright">©
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
<nav class="add-nav">
<ul>
<li>Sitemap</li>
<li>Terms of use</li>
<li>Privacy policy</li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
Then, in Wordpress, go to Pages->Add new. In title enter Home and in the right side you will see Templates. Click the dropdown and select accordion and click the publish button.
Now, click on the top left corner on the website or blog name to check for the slides.