Something is happening with the search button on my site. I have one in the top header and one in the bottom footer. The one at the bottom works fine. But the one in the header, when the button is clicked, it moves down and then you have to click it again to initiate the search.
Both are inside widgets (I'm using Wordpress with the Brunch Pro theme). I have no idea what I could have done to cause this. All I've done is change the color of the button in the customizer. What could cause the button to move like that?
The button has additional styles that apply to it on the :focus pseudo-class:
.widget_search input[type="submit"]:focus
It looks like there's a bunch of competing/unnecessary styles that are being overwritten/added when it's focused. Resetting them all would fix it:
.widget_search input[type="submit"]:focus {
width: 38.2%;
padding: 14px 20px;
box-shadow: none;
font-weight: 400;
font-size: 11px;
}
Or just remove the widget_search input[type="submit"]:focus selector from your style.css file (on line 1074):
Your problem in style.css file it moves down because it go larger than div width
.widget_search input[type="submit"]:focus {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
display: block;
font-size: 1em;
font-weight: bold;
height: auto;
padding: 15px 20px 14px;
text-decoration: none;
width: auto;
z-index: 100000;
}
Related
I try to remove the blue box that appears on click in front of buttons as you can see below:
Before asking, I have made a lot of research, I have tried the solutions given by the following topics:
How to remove focus border (outline) around text/input boxes? (Chrome)
Remove blue box around buttons. HTML
How to remove the blue box shadow border in button if clicked
How do I remove blue "selected" outline on buttons?
How do I remove blue "selected" outline on buttons?
Remove blue border from css custom-styled button in Chrome
How to remove focus around buttons on click
I have tried all the answers! It works on computer but not on mobile.
If you are using a computer, you can try by simulating mobile with the inspector. Here is the button: https://jsfiddle.net/t4ykshst/
#add {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
outline: none;
cursor: pointer;
padding: 10px;
overflow: hidden;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(255, 255, 255, 0.9);
text-align: center;
background: #1abc9c;
-webkit-box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 3px 2px rgba(0, 0, 0, 0.2);
}
#add:active {
opacity: 0.85;
-webkit-box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.2);
}
<input type="button" id="add" value="+" title="" style="position: absolute; left: 0px; top: 0px; width: 52px; height: 52px;" />
You can add:
-webkit-tap-highlight-color: transparent;
You can also add this to your stylesheets to define it globally:
input,
textarea,
button,
select,
a {
-webkit-tap-highlight-color: transparent;
}
Refer to here for more information.
* {
-webkit-tap-highlight-color: transparent;
}
Test it.
You just need to add
style="-webkit-tap-highlight-color: transparent;"
There will be no highlighting (at least in Chrome 88+) at all if you remove cursor: pointer from #add selector. And if you need it in the "desktop" mode, use something like this:
#media (min-width: 768px) {
#add {
cursor: pointer;
}
}
-webkit-tap-highlight-color is a non-standard feature (mdn). It won't work in browser like safari 14.
Instead, you can use
{ outline: none; }
or apply it specifically through selector
a:focus,a:visited,a:active{
outline: none;
}
Try it
add to the button style "cursor: default;"
This will make a cursor:pointer; it turns into a "default", but will remove the blue shadow on the buttons on the mobile screen as you want
In addition to all the answers here, you have to also specify the background css property explicitly yourself to the button.
The contact form I'm using has a "State/Province" drop-down menu that uses the pipe command to set a dynamic recipient. So for instance NJ will set the recipient of the email to "NJEmail#example.com" and CA will set it to "CAEmail#example.com".
But what I need now is for the content of the email to change dynamically depending on whether the recipient is NJEmail#example.com or CAEmail#example.com.
Specifically, what needs to be added is more contact information such as CAEmail's phone number and full name (this email is being sent to the user). I'm using Contact Form 7 with the Dynamic Text Extension add-on. I think this is possible but since I'm new to Wordpress, I'm not sure if this is something I need to mess with the PHP with directly or if I can solve this using some fancy footwork with the Dynamic Text Areas (or Dynamic Hidden Text Areas).
From a programmer's perspective, I would simply use IF statements. If the submission is NY, then write "NY's contact info" and send the email. And I would just brute-force the possibilities (not every state has a unique recipient. There are only a few possibilities... around 10). But I'm not sure how to accomplish this in Wordpress using Contact Form 7. Can anyone point me in the right direction?
All help is much appreciated!
I would recommend following the guide from here: http://wordpress.org/support/topic/plugin-contact-form-7-this-is-how-to-showhide-fields-with-jquery?replies=8
The guide is posted here in case that link disappears.
1. Add the JQuery script to your theme
Download and save the jQuery script from the official source here, and save it into the /js/1.7.1/ folder for your theme. You may need to create the folders, if they aren't already there for your theme (example: ./wordpress/wp-content/themes/your-theme-name/js/1.7.1/)
2. Create a simple form using Contact Form 7
Here is the code for the form:
<div id="contactForm">
<h2>Send us an email...</h2>
<ul>
<li>
<label for="senderName">Your Name</label>[text* senderName /40 id:senderName class:contactForm "Please type your name"]
</li>
<li>
<label for="awesome">Are you awesome?</label>[select awesome id:awesome include_blank class:contactForm "Hell yes!" "Sometimes" "Nope"]
</li>
<li>
<div class="hide" id="hide1">
<label for="not-awesome">Tell us why not</label>[text not-awesome /50 id:not-awesome class:contactForm "Tell us why you aren't awesome"]
</div>
</li>
<li>
<label for="senderEmail">Your Email Address</label>[email* senderEmail /50 id:senderEmail class:contactForm "Please type your email address"]
</li>
<li>
<label for="message" style="padding-top: .5em;">Your Message</label>[textarea* message 80x10 id:message class:contactForm "Please type your message"]
</li>
</ul>
<div id="formButtons">[submit id:sendMessage class:contactForm "Send Email"]
</div>
</div>
Source: http://pastebin.com/jQeQqRhj
To follow with my example, you'll need to create the same simple form I did. It doesn't matter what you call the form, but it needs to have the same fields and attributes.
3. Create a jQuery script to hide fields
Create a script called hidefieldsScript.js using this code:
/*! jQuery script to hide certain form fields */
$(document).ready(function() {
//Hide the field initially
$("#hide1").hide();
//Show the text field only when the third option is chosen - this doesn't
$('#awesome').change(function() {
if ($("#awesome").val() == "Nope") {
$("#hide1").show();
}
else {
$("#hide1").hide();
}
});
});
Source: http://pastebin.com/eUdEcHhC
Create it and save it directly into the js folder for your theme (example: ./wordpress/wp-content/themes/your-theme-name/js/.
4. Add some basic styling for the form
Add the following code to the end of your theme's style.css file:
/* =Custom Contact Form with jQuery
----------------------------------------------- */
/* Add curved borders to various elements */
#contactForm, .statusMessage, input[type="submit"], input[type="button"] {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Style for the contact form and status messages */
#contactForm, .statusMessage {
color: #666;
background-color: #ebedf2;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
background: -moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );
border: 1px solid #aaa;
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .5);
box-shadow: 0 0 1em rgba(0, 0, 0, .5);
opacity: .95;
}
/* The form dimensions */
#contactForm {
width: 40em;
height: 41em;
padding: 0 1.5em 1.5em 1.5em;
margin: 0 auto;
}
/* Position the form in the middle of the window (if JavaScript is enabled) */
#contactForm.positioned {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-top: auto;
margin-bottom: auto;
}
/* The header at the top of the form */
#contactForm h2 {
font-size: 2em;
font-style: italic;
letter-spacing: .05em;
margin: 0 0 1em -.75em;
padding: 1em;
width: 19.5em;
color: #aeb6aa;
background: #dfe0e5 url('images/stamp.jpg') no-repeat 15em -3em; /* http://morguefile.com/archive/display/606433 */
border-bottom: 1px solid #aaa;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
/* Give form elements consistent margin, padding and line height */
#contactForm ul {
list-style: none;
margin: 0;
padding: 0;
}
#contactForm ul li {
margin: .9em 0 0 0;
padding: 0;
}
#contactForm input, #contactForm label {
line-height: 1em;
}
/* The field labels */
#contactForm label {
display: block;
float: left;
clear: left;
text-align: right;
width: 28%;
padding: .4em 0 .0 0;
margin: .15em .5em 0 0;
font-weight: bold;
}
/* The fields */
#contactForm input, textarea , select {
display: block;
margin: 0;
padding: .4em;
width: 67%;
font-family: "Georgia", serif;
font-size: 1em;
border: 1px solid #aaa;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
-webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
background: #fff;
}
#contactForm textarea {
height: 13em;
line-height: 1.5em;
resize: none;
}
/* Place a border around focused fields, and hide the inner shadow */
#contactForm *:focus {
border: 1px solid #66f;
outline: none;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
/* The Send and Cancel buttons */
#contactForm input[type="submit"], #contactForm input[type="button"] {
float: right;
margin: 2em 1em 0 1em;
width: 10em;
padding: .5em;
border: 1px solid #666;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
color: #fff;
background: #0a0;
font-size: 1em;
line-height: 1em;
font-weight: bold;
opacity: .7;
-webkit-appearance: none;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
#contactForm input[type="submit"]:hover,
#contactForm input[type="submit"]:active,
#contactForm input[type="button"]:hover,
#contactForm input[type="button"]:active {
cursor: pointer;
opacity: 1;
}
#contactForm input[type="submit"]:active, input[type="button"]:active {
color: #333;
background: #eee;
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
}
#contactForm input[type="button"] {
background: #f33;
}
/* Some IE7 hacks and workarounds */
<!--[if lt IE 8]>
/* IE7 needs the fields to be floated as well as the labels */
#contactForm input, textarea {
float: right;
}
#formButtons {
clear: both;
}
/*
IE7 needs an ickier approach to vertical/horizontal centring with fixed positioning.
The negative margins are half the element's width/height.
*/
#contactForm.positioned, .statusMessage {
left: 50%;
top: 50%;
}
#contactForm.positioned {
margin-left: -20em;
margin-top: -16.5em;
}
<![endif]-->
Source: http://pastebin.com/7fMA4nDn
I recommend doing this, so you can see the example correctly. The CSS I have made is all specific to the id element "contactForm" so it doesn't pollute your theme design.
5. Add the scripts to your header.php
Add the following lines within your <head> class inside the header.php file for your theme.
<!-- Add jquery script to support Conditional Forms-->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/1.7.1/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/hidefieldsScript.js"></script>
6. Test out the form!
Paste the form code from Contact Form 7 into a page or post, then view the page. You should see a form but one of the fields will be hidden.
To see the hidden field, simply answer "Nope" to the question "Are you awesome?". An extra line will appear asking you to explain why!
How do you modify the example?
To make this work for your own specific needs, you need to modify steps 2 and 3 so that the form and jQuery work together to hide the fields you want them to. You will also need to modify step 4 to get CSS styling you prefer.
I suggest doing what I did and reading about what jQuery functions mean what. There are loads of tutorials to explain jQuery functions, so get Googling.
With a little reading, you can adjust the script I wrote to to handle responses to checkboxes, radiobutton, etc.
You also could use an add-on (conditional fields) for the Contact Form 7.
As you already mentioned for the "Dynamic Hidden Text Areas".
So a specific group should only appear in case the final user select it.
E.g.: dropdown menu appears several options: NJ, NY, TX...etc
Based on user´s choice, NJ "group" would appear.
I´m not sure if I got what you meant.
Plugin example: https://wordpress.org/plugins/cf7-conditional-fields/
I am a css beginner so apologies in advance if I am asking basic questions.
I am using a jquery datepicker in my web application and have an issue with the positioning of the jquery date button. I am using a css framework (yaml) which has a whole set of defined styles for buttons so what I have needed to do is override all the pre-defineed styles.
When I specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
}
The date button is slightly too high and not in line with the input field...
When I fix this and specify the following styles...
button.ui-datepicker-trigger, button.ui-datepicker-trigger:hover {
border: 0px !important;
background-color: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
background-image:none !important;
border: 0 none !important;
display: inline !important;
margin-left: 5px !important;
box-shadow: none !important;
padding: 0 0.5em !important;
position: absolute !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
}
The date button is in line with the next field which is what I want.
BUT after changing the style of the button to use absolute (3 end lines of 2nd css extract above), whilst i am doing a mousepress the date control jumps up about 15 pixeles up the screen.
Has anyone got any ideas on how I might fix this? And a good explanation as to what is happening for my understanding.
thanks
You can try another solution by using the calendar icon inside the textbox.
Check this here :- http://jsfiddle.net/33Xxk/
.tInput_datepick {
width: 250px;
color: #555555;
text-decoration: none;
border-radius: 7px;
padding-left: 7px;
background-image: url(http://www.bay.k12.fl.us/portals/18/Images/calendar_icon.jpg);
background-repeat: no-repeat;
background-position: top right;
background-position-y: -5px;
height: 25px !important;
border: 1px solid #888e9c !important;
background-color: #f4f5f9 !important;
cursor: pointer !important;
}
I currently have this on a webpage I'm making:
HTML
<div id="pageHeader">
<nav id="siteNav">
<ul>
<li id="currentNavTab"><span>Home</span></li>
<li><span>Services</span></li>
<li><span>Gallery</span></li>
<li class="LastNavTab"><span>Contact</span></li>
</ul>
</nav>
</div>
CSS
nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}
nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}
nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}
The code results in something like this:
I would like to have it so that the currently selected tab takes on a highlight, which can either be a bitmap or generated with background-gradient; something like this mockup:
I'm having issues with the layout. I tried to put the background behind the li's, but that didn't display correctly:
Being a relative amateur at web development I don't know how to fix this and get the result I want. An additional issue is that I would like the highlight to be masked within the rounded border. Any help would be appreciated!
Here's a fiddle. http://jsfiddle.net/57VC8/1/
What i did:
Set display inline-block on the li's. Why? Putting inline-blocks or block (that's elements with one of those displays) inside inline elements just might give you some hard to understand problems.
Set all the width's and paddings on the a element and not on the li.
Added a class "current" to the currently selected link, through which you'd apply whichever styles you want.
I am using AjaxControlToolkit's ComboBox control. The DropDown arrow appears quite far from the actual position where it should be. See this image:
How to fix this to make it appear like an ideal DropDownList?
If the image doesn't appear, click this link: http://postimage.org/image/99yqullkb/
**** Edited (CSS Code) ****
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
margin: 0;
padding: 0px 0px 1px 0px;
border: solid 1px #7F9DB9;
border-right: 0px none;
font-size: 13px;
height: 18px;
width:200px;
}
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
padding: 0px 0px 10px 0px;
height: 21px;
width: 21px;
}
.WindowsStyle .ajax__combobox_itemlist
{
border-color: #7F9DB9;
}
Looks like a CSS styles side-effect. Check calculated styles for arrow button and it's container with some tool like FireBug or Developer Tools.
IAE try to apply the style rule below, maybe it fix the issue:
table.ajax__combobox_inputcontainer td
{
padding: 0 !important;
text-align: left !important;
}
table.ajax__combobox_inputcontainer td.ajax__combobox_buttoncontainer button
{
margin-left: 0 !important;
}
If you are using width property like width="20%" then this problem occurs. Avoid "%" in width property and try with exact width in pixels like width="200px".