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>
Related
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. :)
I am having a sign up form which is a raw HTML with stripe integration, Now i want to integrate a mail chimp into it.I have placed a code
<p>
<label>
<input type="checkbox" name="mc4wp-subscribe" value="1" />
Subscribe to our newsletter. </label>
</p>
in my html page. I am not getting the subscribers list in the admin pannel.
login to your MailChimp account then manage contacts-> group then create there a group with checkbox after then go to signup forms and embed code will show the check box edit the code under then forms tag like below
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//dada.us14.list-manage.com/subscribe/post?u=804ce11ffe4a5684c85f88d38&id=d5ab97dfc9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="checkbox" value="1" name="group[4917][1]" id="mce-group[4917]-4917-0"><label for="mce-group[4917]-4917-0">Subscribe to our mailing list</label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_804ce11ffe4a5684c85f88d38_d5ab97dfc9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
What's the best way to get the mins below next to the hr?
-I tried using columns and rows, but it de-centered everything.
-I tried floats, but it makes everything misaligned
-I tried boxes, but similar problems to columns and rows.
Thank you so much! :)
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<p style="font-weight:bold">Hr </p>
<fieldset>
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<p style="font-weight:bold">Min </p>
<fieldset>
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
Replace your code with this one:
<form class="section-top-buffer text-center" style="margin-top:60px" id="live_form" method="POST" action="/suggest/" onsubmit="return validateForm()">
{% csrf_token %}
<!-- change the form action to your script url -->
<div class="row">
<div class="col-xs-6">
<p style="font-weight:bold">Start </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="drugsrating" min="1" max="24" value="{{form.drugsrating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="petrating" min="0" max="59" value="{{form.petrating.value}}">
</fieldset>
</div>
<div class="col-xs-6">
<p style="font-weight:bold">End </p>
<span style="font-weight:bold">Hr </span>
<fieldset style="display:inline-block">
<input type="number" name="friendshiprating" min="1" max="24" value="{{form.friendshiprating.value}}">
</fieldset>
<span style="font-weight:bold">Min </span>
<fieldset style="display:inline-block">
<input type="number" name="sleeprating" min="0" max="59" value="{{form.sleeprating.value}}">
</fieldset>
</div>
</div> <!-- End all row -->
</form>
as #Pyromonk mentioned p is a block element so use span instead
p is a block element and so is fieldset. input is an inline element. If linebreaks are the problem you are facing, you should look into using a set of inline elements in succession, for example a label and an input. Block elements force a linebreak after themselves and inline elements don't, to put it in simple terms. I see absolutely no reason for using fieldset and p in your scenario, unless you absolutely have to. If you do, you can try setting their display to inline-block.
Further reading: MDN :: Visual formatting model
I am trying to remove my archives and search bar from the bottom of my blog pages. I have already removed it from my sidebar. Here's my website: www.kylejohnphoto.com. Any help would be appreciated!
thanks.
Remove this from the blog template file
<aside id="search" class="widget widget_search">
<form role="search" method="get" class="search-form" action="http://kylejohnphoto.com/">
<label>
<span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search…" value="" name="s" title="Search for:">
</label>
<input type="submit" class="search-submit" value="Search">
</form>
</aside>
<aside id="archives" class="widget">
<h1 class="widget-title">Archives</h1>
<ul>
<li>August 2013</li>
</ul>
</aside>
Does anyone have any ideas of how to create a two panel modal. So for example one side would be a login form or something and the other side would be a list of what users get. Or one side would be a physical contact information div and the other side would be an email contact form. I tried to do two divs under the modal div tag and have one pull-left the other pull-right with each span5 or span6 but it didn't work. I ask because I have this issue. Also can anyone tell me why my contact form has so much space between the label and the input box? Go to scoopclassifieds.com (not trying to plug my site, can't post pics yet) and click contact us. I have placed the html mark up blow
<div class="modal hide fade" id="contactForm" aria-hidden="true">
<div class="modal-body">
<form action="" method="post" class="form-horizontal">
<div class="control-group">
<label class="control-label">Email:</label>
<div class="controls">
<input type="text" name="email" id="email" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Subject:</label>
<div class="controls">
<input type="text" name="subject" id="subject" class="input" />
</div>
</div>
<div class="control-group">
<label class="control-label">Message:</label><br/><br/>
<div class="controls">
<textarea rows="5" class="input span4" name="message" id="message"></textarea>
</div>
</div>
<div class="control-group"><div class="controls"><input type="submit" name="contactUs" id="contactUs" class="btn" value="Contact Us" /></div></div>
</form>
</div>
</div>
Sorry if the code is so horribly formatted. I used cpanel text editor to develop it. I know its a bad idea but I had to do it as fast as possible to provide a live example.
Try putting a row-fluid inside the modal-body, and then 2 span6 inside that..
<div class="modal-body">
<div class="row-fluid">
<form class="span6">
</form>
<div class="span6">
</div>
</div>
</div>
You may also want to increase the default width of the modal..
.modal {
width:45%;
left:45%;
}
Demo on Bootply: http://bootply.com/69517