I am using CakePhp 3.4.7 and Bootstrap 3.3.7 and Bootstrap is working fine except that Glyphicons are not showing. Here's what my Login page looks like and you can see the icons are missing: http://i.imgur.com/wTAZEyO.jpg
I placed all the glyphicons-halflings-regular.* fonts in the App/webroot/font directory and the bootsrap.min.css in App/webroot/css and bootsrap.min.js/jquery-3.2.1.min.js in App/webroot/js
And inspecting my website I can see both css and js files are being pulled correctly and in fact the code is working: http://i.imgur.com/mFO3HWhh.jpg
Here is my code
DEFAULT CTP HEAD
<!DOCTYPE html>
<html>
<head>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<?= $this->Html->css('bootstrap.min.css') ?>
<?= $this->Html->script('jquery-3.2.1.min.js') ?>
<?= $this->Html->script('bootstrap.min.js') ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
</head>
LOGINT CTP
<?
// Path File: \App\src\Templates\Usuarios\login.ctp
/** #var $this \Cake\View\View */
?>
<div class="container alto-minimo-contenido">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title"><i class="glyphicon glyphicon-user"></i> Formulario de ingreso al sistema</div>
</div>
<div style="padding-top:30px" class="panel-body">
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<?= $this->Flash->render('auth') ?>
<form id="loginform" class="form-horizontal" role="form" method="post" action="<?php echo $this->Url->build(["controller" => "Usuarios", "action" => "login"]) ?>">
<label for="login-username">E-Mail</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon">#</span>
<input id="login-username" type="text" class="form-control" name="email" value="" placeholder="E-Mail">
</div>
<label for="login-password">Clave</label>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="Clave">
</div>
<div style="margin-top:10px" class="form-group">
<div class="col-sm-push-1 col-sm-10 col-sm-pull-1 controls">
<button type="submit" id="btn-login" class="btn btn-primary btn-block"><i class="glyphicon glyphicon-log-in"></i> ENTRAR</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I can see that in my bootstrap.min.css files the path is correct. Any idea why Cake is not pulling the icons even though they exist?
Go to your CSS folder.
Open the bootstrap.min.css file.
Search for glyphicon text in that.
You can find out its url address.
You should change the font folder name to fonts.
Go and enjoy your life. :)
Related
I am converting an HTML website to a WordPress site and don't know how to call the header image in the header. Also, I want a unique header image on each category page. Is there a way to do it without a plugin?Background image below header
<div class="ftcat-header">
<div class="ftcat-header-image-wrap">
<div class="ftcat-header-image-overlay"></div>
<div class="ftcat-header-image skip-lazy" style='background-image: url("<?php echo wp_get_upload_dir()['baseurl'] . '/2022/02/cuisine.jpg'; ?>");'></div>
<div class="ftcat-header-content">
<h1 class="ftcat-header-title">
Cuisine - Revues Des Produits et Guides d'Achat </h1>
<div class="ftcat-header-search">
<form role="search" method="get" class="search-form" action="https://ideadear.com/">
<input type="search" class="search-field" placeholder="Search for the best product..." value="" name="s" />
<button type="submit" class="search-submit">Search</button>
</form>
</div>
<div class="ftcat-header-meta">
</div>
</div>
</div>
</div>
I've attached two images to show how it was(and still is in Firefox) and how it is in Chrome. I made no changes to this code it just randomly started stacking wrong.
<div class="tab-content clearfix">
<div class="tab-pane active" id="1wheels">
<form method="POST" action="wheels.php">
<div class="heading">
<h1>Wheel search</h1>
</div>
<div class="col-sm-4" >
<h5>Wheel Diameter:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($diamQuery)) : ?>
<option
value="<?php echo $row['diam']; ?>"><?php echo $row['diam']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel PCD (mm):</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="pcd">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($pcdResult)) : ?>
<option
value="<?php echo $row['pcd']; ?>"><?php echo $row['pcd']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel Studs:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="holes">
<option value=''>SELECT</option>
<?php while ($row = mysqli_fetch_assoc($studResult)) : ?>
<option
value="<?php echo $row['holes']; ?>"><?php echo $row['holes']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i
class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
<div class="tab-pane" id="2wheels">
<form id="fitment_search" action="wheels.php" method="GET">
<div class="heading">
<h1>Car search</h1>
</div>
<div class="col-sm-4">
<h5>Vehicle Make:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="make" onchange="get_model(this.value)">
<option value="make">SELECT</option>
<?php while ($row = mysqli_fetch_assoc($makeResult)) : ?>
<option
value="<?php echo $row['make']; ?>"><?php echo $row['make']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Vehicle Model:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="model" id="fitment_model">
<option>SELECT</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
<div class="col-sm-4">
<h5>Wheel Diam:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam2">
<option value="diam2">SELECT</option>
<?php mysqli_data_seek($diamQuery, 0); ?>
<?php while ($row = mysqli_fetch_assoc($diamQuery)) : ?>
<option
value="<?php echo $row['diam']; ?>"><?php echo $row['diam']; ?></option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i
class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
</div>
I've tried adding a row but this doesn't seem to help, I just can't understand why this has happened? it worked fine for months and suddenly today it started looking bizzare.
Use the grid system within a container class. http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="tab-content clearfix">
<div class="tab-pane active" id="1wheels">
<form method="POST" action="wheels.php">
<div class="heading">
<h1>Wheel search</h1>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Diameter:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($diamQuery)) : ?>
<option value="<?php echo $row['diam']; ?>">
<?php echo $row[ 'diam']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel PCD (mm):</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="pcd">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($pcdResult)) : ?>
<option value="<?php echo $row['pcd']; ?>">
<?php echo $row[ 'pcd']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Studs:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="holes">
<option value=''>SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($studResult)) : ?>
<option value="<?php echo $row['holes']; ?>">
<?php echo $row[ 'holes']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
<div class="tab-pane" id="2wheels">
<form id="fitment_search" action="wheels.php" method="GET">
<div class="heading">
<h1>Car search</h1>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Vehicle Make:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="make" onchange="get_model(this.value)">
<option value="make">SELECT</option>
<?php while ($row=m ysqli_fetch_assoc($makeResult)) : ?>
<option value="<?php echo $row['make']; ?>">
<?php echo $row[ 'make']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Vehicle Model:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="model" id="fitment_model">
<option>SELECT</option>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h5>Wheel Diam:</h5>
</div>
<div class="col-sm-8">
<div class="select">
<select name="diam2">
<option value="diam2">SELECT</option>
<?php mysqli_data_seek($diamQuery, 0); ?>
<?php while ($row=m ysqli_fetch_assoc($diamQuery)) : ?>
<option value="<?php echo $row['diam']; ?>">
<?php echo $row[ 'diam']; ?>
</option>
<?php endwhile; ?>
</select>
<div class="select__arrow"></div>
</div>
</div>
</div>
<button type="submit" class="btn btn-default btn-sm btn-primary"><i class="fa fa-pencil"></i> Search Now
</button>
</form>
</div>
</div>
</div>
</body>
</html>
I my website I am using WordPress Contact Form 7 to get some information from my users. The website is built using Bootstrap Framework.
Now I want to use my custom css style and Bootstrap style to the form. So that I am using following code. But Its not styling.
Anybody tell me how can I style this form ?
Here what I am using in the contact form 7
<h3>Which Goal You Are Looking To Achieved ?</h3>
<div class="asking-box">
<h4><strong>Select your Goals</strong></h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-6" for="question">Lasting happiness </label>
<div class="col-sm-12">
[checkbox checkbox-959 class:"my-check"]
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-6" for="question">Lasting happiness </label>
<div class="col-sm-12">
[checkbox* checkbox-404 class:my-check]
</div>
</div>
</form>
</div>
ad this link in your header
<link href="/css/materialize.min.css" rel="stylesheet" type="text/css">
<link href="/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css">
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
and this is in your page
<div class="register-box">
<div class="container">
<div class="row">
<div class="inner-srch-pg">
<div class="bnr-srch-box">
<form action="" method="post" >
<div class="rgstr-form-cntnt">
<div class="row">
<?php echo do_shortcode('[contact-form-7 id="286" title="Contact form 1"]'); ?>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
You can now achieve this much more easily by using this plugin to design responsive grid-layouts for your cf7 forms.
i got a template site when i bought a package and it has a built in chat function, however you need to press a "send" button each time to send chat messages, this is the script used, i guess it is kinda easy to do it but in not good at scripting :/
<div class="col-lg-4 border-left affix-items scrollbar" id="room-items">
<div id="dropboxy">
<?php
?>
</div>
</div>
<div class="col-lg-6 affix-players" style="padding:10px;">
<div id="playersdropboxy">
<?php include_once("players.php"); ?>
</div>
<div id="affix-players" class="scrollbar">
<div id="rooms"></div> </div> </div> <div class="col-lg-5 affix-right">
<div class="col-xs-24 chat"> <div class="row chat-container">
<div class="row chat-buttons"> <div class="col-xs-24"> <div class="media-body"> <div class="input-group">
<input type="text" class="form-control chat-message" id="text-massage" style="margin-left:6px;" maxlength="300"> <span class="input-group-btn">
<?php if(isset($_SESSION['steamid'])) { ?>
<button class="btn btn-primary" type="submit" data-loading-text="<i class='fa fa-spinner fa-spin'></i> WAIT..." id="send_massage" style="margin-right:6px;">SEND</button>
<div class="sml-bnt" id="smile"></div>
<? }
else { ?>
<form method="get" action="index.php"><input type="hidden" name="login" value=""/><input type="submit" class="btn btn-primary" value="Log in to chat" style="margin-right:6px;"/></form>
<?php }
?>
</span> </div> </div> </div> </div>
<div class="col-xs-24 messages messages-img" style="width:250px;">
<?php if(isadmin($_SESSION['steamid'])){
echo'Admin tools: [clear chat], [turn '. (chaton() ? 'off' : 'on').']';
} ?>
<? include ('mini-chat.php'); ?>
</div> </div>
</div>
<div id="raffle"><div class="col-xs-24 raffle"> <div class="cont"> <div class="circle"> <img id="raffle-img"> </div> <h4 class="name" id="raffle-name"></h4>
<h4 id="countdown-raffle-timer" data-countdown="2020-08-08"></h4>
<a class="btn btn-default" href="?login">LOG IN</a> </div> </div> </div> </div> </div>
Try change method="get" to method="post"
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.