I'm using Chose plugin and was styling it, but met this issue:
It is caused by this generate HTML:
<div id="sel1WY_chzn" class="chzn-container chzn-container-single" style="width: 300px;>
//this is width of container
<div class="chzn-drop" style="left: -9000px; width: 298.333px; top: 22.3333px;">
//this is html of dropdown
How can I fix it ? Also it could be caused by additional border, yes ?
Sorry, I managed do find it very fast)
ADDED
.chzn-container-single .chzn-single {
border: 1px solid rgba(98,141, 40, 0.5);
}
DELETE
.chzn-container {
border: 1px solid rgba(98,141, 40, 0.5);}
Related
I would like to customise the Apple-Pay button that comes with Woocommerce/Stripe. By default the button has a 4px border-radius, which I would like to change to 0px. Additionally the button is within a wrapper and I would like to change its padding-top to 0px. I wonder if this can be amended through CSS? Below is the source HTML code (any hint as to how to progress would be greatly appreciated).
<div id="wc-stripe-payment-request-wrapper" style="clear:both;padding-top:1.5em;display:none;">
<div id="wc-stripe-payment-request-button" " class="StripeElement">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
Try adding the following CSS:
#wc-stripe-payment-request-button {
background-color: black;
border: solid black 1px;
}
Does that provide the desired appearance?
It seems like stripe for Woocommerce loads the payment request buttons through an iframe from js.stripe.com ... unfortunately it is not possible to stylize content in an iframe which comes from a different domain. I read this page on iframe style for reference. #wc-stripe-payment-request-button selector which woocommerce provides is the id to a DIV which contains the iframe (payment request buttons). Find my Pseudo element solution below:
EDIT: Here is what im using.. It has all my styles in it, so adjust them to your liking but it works great. Let me know if you have any questions.
Note: My cart background is white and my payment buttons are set to 60px height dark style in Woocommerce settings. You might possibily need to add media queries to adjust for your theme break points but its fairly responsive out of box. If you do not want the outline with "express checkout" just delete this piece of code "#wc-stripe-payment-request-button::after{CSS styles}".. Thought I would add it incase someone has an interest to "copify" Cheers.
Screen shot of the final product
#wc-stripe-payment-request-button-separator {font-size:80%; margin:10px 0px 8px 0px!important;
color:#bababa;
padding:0px!important;
}
#wc-stripe-payment-request-button{outline: 3px solid #E6E6E6;outline-offset:18px;padding:1px 5px 0px 5px;transform:scale(.8);
}
#wc-stripe-payment-request-button::before {content:'';
width:99%;
height:66px;
position:absolute;
z-index:999;
bottom:-3px;
left: calc(50% - 49.5%);
pointer-events: none;
border:7px solid #fff;
outline:4px solid #fff;
background:rgb(255,255,255,.6);
}
#wc-stripe-payment-request-button::after {content:'EXPRESS CHECKOUT';position:absolute;
background:#fff;
font-size:87%;
color:#aaaaaa;
font-family: 'Oswald', sans-serif !important;letter-spacing:.12em;
display:block;
left: calc(50% - 82px);
font-weight:400;
padding:0px 4px 0px 8px;
margin:-96px 0px 0px 0px;
}
Simple and best styling for apple pay button that is totally adjustable in all layouts(iPhone/MacBook). Its currently running on my website.
Here is the CSS
#applePay {
width: 100%;
height: 50px;
display: none;
-webkit-appearance: -apple-pay-button;
-apple-pay-button-style: black;
-apple-pay-button-type: book;
}
Here is the HTML
<div id="apple-pay-web">
<div class="col-xl-12"><label>Pay With ApplePay</label></div>
<div class="col-xl-12" style="text-align: center;padding: 0">
<button type="button" id="applePay" lang="en"></button>
<div id="got_notactive" class="alert alert-primary apw" role="alert"><?= Yii::t("app", 'ApplePay is possible on this browser, but not currently activated') ?></div>
<div id="notgot" class="alert alert-danger apw" role="alert"><?= Yii::t("app", 'ApplePay is not available on this browser') ?></div>
<div id="success" class="alert alert-success apw" role="alert"><?= Yii::t("app", 'Test transaction completed, thanks') ?></div>
</div>
</div>
I am fairly new and just experiencing with some html/css . I was planning to make a login screen pop up in the middle of when a user clicks "login".
i've set up a div which is hidden on the screen and i want to make it visible when the user clicks on "login"
the problem i'm having is making the Div visible again . Here is the CSS:
#loginscreen {
position: absolute;
width: 400px;
height: 500px;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border: 2px solid black;
border-radius: 40px;
background-color: lightgrey;
visibility: hidden;
z-index: 1000;
}
.loginbtn:active + #loginscreen
{
visibility: visible
}
:active only works for as long as the element is being clicked. As soon as the click is no longer being held the element will no longer be active.
Try using Javascript to do this, for example:
<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>
Where <id-of-div> is whatever id you have assigned to the div you wish to make visible.
You cannot trap a user event ("click") without using javascript (or, better yet, jQuery). As a beginner, I first suggest you use jQuery rather than pure javascript. For one thing, it's much less typing and (imho) far easier to master. You code in jQuery, and behind the scenes jQuery turns that into javascript at runtime. To use jQuery, all you must do is include the jQuery library in the <head> tags of each page, like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
The jQuery to show the login form would look something like this:
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
Here is an example you can use for ideas:
jsFiddle Demo
$('#mybutt').click(function(){
$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
$('#loginscreen').fadeOut(800);
});
div{position:relative;box-sizing:border-box;}
#loginscreen {
position: absolute;
width: 400px;
height: auto;
top:0;
right: 0;
border: 1px solid #ddd;
border-radius: 4px;
background-color: lightgrey;
z-index: 1000;
display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
#headLeft{float:left;width:80%;}
#headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
<div id="logHead">
<div id="headLeft">Login:</div>
<div id="headRight"><div id="logX">X</div></div>
</div>
<div id="logTop">
<div id="logUN"><input type="text" id="username" placeholder="user"/></div>
<div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
</div>
<div id="logBott">
<button>Login</button>
</div>
</div>
<input type="button" id="mybutt" value="Login" />
Since you are new to jQuery, here are some free beginner-level tutorials to get you started. (It's where I learned myself, and they're free)
It appears than when I attempt to set my phonebook's CSS position to absolute, I simply lock the select element. Relevant HTML/CSS below. When I remove the position: absolute; from the code, it runs perfectly fun; however, my HTML gets pushed down which is what I'm trying to avoid.
HTML
<div id="phonebook">
<select id="catalog">
<option value="u_none">None</option>
<option value="u_1">John Doe (555-555-1254)</option>
<option value="u_2">Jane Doe (555-555-2894)</option>
</select>
<div id="employee-info">
<div id="employee-content">
Role or Title<br>
Full Name<br>
Contact:<br>
Telephone: 555-555-5555<br>
Email: name.lastname#domain.com<br>
Room: A-5555<br>
Mail Stop: A-555
</div>
</div>
</div>
CSS
#phonebook {
position: absolute;
width: 320px;
z-index: -1;
}
#employee-info {
border: 1px solid #aaa;
border-top: 0 none;
}
#employee-content {
padding: 10px;
}
#catalog {
position: relative;
border: 1px solid #aaa;
width: 100%;
z-index: 1;
}
I've tried to play around with z-index -- at the suggestion of a somewhat unrelated post -- but it still seems to do me no good. I need this element in a specific portion and it relies heavily on using this dropdown select element.
Is there anyway to overcome this issue? I'm not exactly sure what is preventing my access to the select dropdown. An explanation would also be awesome.
Thanks ahead. Any help is appreciated.
There must be more to it, because when I put your exact code into a snippet, it works fine. I see no difference with and without the position: absolute;
Please edit your question to put the code in a snippet (or jsfiddle) that shows the problem.
#phonebook {
position: absolute;
width: 320px;
z-index: -1;
}
#employee-info {
border: 1px solid #aaa;
border-top: 0 none;
}
#employee-content {
padding: 10px;
}
#catalog {
position: relative;
border: 1px solid #aaa;
width: 100%;
z-index: 1;
}
<div id="phonebook">
<select id="catalog">
<option value="u_none">None</option>
<option value="u_1">John Doe (555-555-1254)</option>
<option value="u_2">Jane Doe (555-555-2894)</option>
</select>
<div id="employee-info">
<div id="employee-content">
Role or Title
<br>Full Name
<br>Contact:
<br>Telephone: 555-555-5555
<br>Email: name.lastname#domain.com
<br>Room: A-5555
<br>Mail Stop: A-555
</div>
</div>
</div>
<div style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 30px; background-color: rgb(245, 225, 130);">
<div style="margin: 5px;">
#down2#
</div>
</div>
That's the code i'm currently trying. It's a bit of a mess at the moment. But basically, I'm trying to make it so I have a 25px x 25px div which stores the numbers of the pages in those boxes (part of a paginator), I want it so the number 1 is just as centered as the number 100. At the moment the number1 makes the box shrink in the method i have to center it but when I create a defined box size it just takes the number out alignment. Somebody know a quick fix to centering elements within divs?
<a style="display:block; text-align:center"; href="#link#">#down2#</a>
Also, lowercase your elements, it's not the nineties anymore
With the current text your Div is to small. If just using the number "1" for example you will get what you are looking for.
<DIV style="border: 1px solid RGB(0, 0, 0); height: 30px;width:30px; background: RGB(245, 225, 130);">
<DIV style="margin: 5px;">
1
</DIV>
</DIV>
a {
display:block;
text-align:center;
}
http://jsfiddle.net/MD2V6/
EDIT: Here is a cleaner example.
HTML:
<div>
1
</div>
CSS:
div {
border: 1px solid RGB(0, 0, 0);
height: 30px;
width:30px;
background: RGB(245, 225, 130);
}
a {
padding:5px;
display:block;
text-align:center;
}
http://jsfiddle.net/MD2V6/2/
Hi all !
I want to create a small round static percent indicator in CSS but I can't find the solution.
The squared indicator at left is ok, but so ugly, I want it round !
I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (cf. css3 mask : http://webkit.org/blog/181/css-masks/), but it seems like it's only for img...
The solution can works only on webkit browsers, because it's for a mobile webapp.
Here is my code to create the (ugly) indicator in the image above :
<div class="meter-wrap">
<div class="meter-value" style="background-color: #489d41; width: 70%;">
<div class="meter-text"> 70 % </div>
</div>
</div>
And the css :
.meter-wrap{
position: relative;
}
.meter-value {
background-color: #489d41;
}
.meter-wrap, .meter-value, .meter-text {
width: 30px; height: 30px;
/* Attempt to round the corner : (indicators at the right of the screenshot)
-webkit-border-radius : 15px;*/
}
.meter-wrap, .meter-value {
background: #bdbdbd top left no-repeat;
}
.meter-text {
position: absolute;
top:0; left:0;
padding-top: 2px;
color: #000;
text-align: center;
width: 100%;
font-size: 40%;
text-shadow: #fffeff 1px 1px 0;
}
Add a wrapper around your .meter-value class, set its overflow to hidden and then set the width of that layer to get the desired effect. The rounded corners on the .meter-value class should remain intact and give you a nice fluid progress indicator.
You will have to move the .meter-text div outside of the wrapper to ensure it's visible throughout the transition, so your html would like something like:
<div class="meter-wrap">
<div class="meter-text"> 70 % </div>
<div class="meter-value-wrapper" style="width:70%;">
<div class="meter-value" style="background-color: #489d41;">
</div>
</div>
And the class for .meter-value-wrapper might look like:
.meter-value-wrapper {
overflow: hidden;
width: 30px;
height: 30px;
}