I'm trying to make custom checkbox, like it said here
This is what I've done:
http://jsfiddle.net/216nt56y/
My css:
input[type=checkbox].css-checkbox {
visibility: hidden;
}
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}
It is not really what I want, because I want a check square to have the same size when it is unchecked.
How can I get it?
Like konrad said by giving it a width and height it will always have its shape but rather than using min-height and min-width just have height and width and then you can also move the check tick into the center of the checkbox using margin
label.css-label
{
border-color: white;
border: white 1px solid;
border-radius: 3px;
display: inline-block;
height: 18px;
width: 18px;
}
input[type=checkbox].css-checkbox:checked + label:before {
content: "\2714";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
margin-left:2px;
}
here is a JSFIDDLE showing it in action
try something like this
label.css-label {
display: inline-block;
min-height: 20px;
min-width: 20px;
}
Related
I'm trying to add a button that will look something along the lines of the orange "Get It Now" button found here: https://www.wpbeaverbuilder.com/
The guides I found on the topic focus on specific themes which I don't use, and so I'm currently stuck. How can I do that?
My website: https://roi.pub
Thanks.
Here a code snippet for the button. Add the css on the custom style of wordpress, and the class for the button in your menu item.
Don't be freaked about the font, it will get the font that is used in your theme.
.menu-btn {
background-color: #F7951E;
color: #fff;
padding: 6px 18px 3px !important;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
top: 2px;
text-decoration: none;
transition: background .3s;
}
.menu-btn:hover {
color: #fff;
background-color: #D4821F;
}
<a class="menu-btn" href="#"> Get It Now </a>
EDIT:
Code for you website's menu :
.menu-btn {
line-height: 1;
margin-top: 25px;
background-color: #F7951E;
color: #fff !important;
padding: 10px 18px 7px !important;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
position: relative;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
top: 2px;
text-decoration: none;
transition: background .3s;
}
Try this
https://codepen.io/anon/pen/JMQNZE
button {
border: 0;
background-color: #F7951E;
color: #fff;
padding: 6px 18px 3px;
border-radius: 5px;
border-bottom: 2px solid #D4821F;
font-weight: 600;
font-size: 14px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
top: 2px;
}
button:hover {
color: #fff;
background-color: #db7f0f;
cursor: pointer;
}
You can inspect any element from a page and see it's css attributes.
So I have button defined by the a-tag which says:
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
}
.button:hover {
background: #a1a1a1
}
.button:active {
box-shadow: 0px 0px 0px #999999;
}
Click me
So pretty straight forward. A button, a hover effect, and an active effect. However, what I would actually like is the effect of pushing the button. Now the box-shadow just disappears, but the button itself doesn't go "down" so to speak...
It's pretty easy with just a button, but I need this for a -button. Can it be done ? :)
You can add position: relative to the button and add top: -1px on :active for 1px top offset.
.button {
background: #aaaaaa;
padding: 20px 30px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
border-radius: 15px;
box-shadow: 0px 3px 0px #999999;
cursor: pointer;
position: relative;
}
.button:hover {
background: #a1a1a1
}
.button:active {
top: -1px;
}
Click me
You can use the transform scale property. This will make an illusion that the button is clicked since it becomes smaller on active.
.button {
transition: all 1s;
}
.button:active {
transform:scale(0.8,0.8);
}
https://www.w3schools.com/cssref/playit.asp?filename=playcss_transform_scale
You can do that manually like that :
.button {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_buttons_animate3
Or you could also use the material design through the materialize package:
https://www.w3schools.com/w3css/w3css_material.asp
And this is an example for buttons :
<a class="waves-effect waves-light btn">button</a>
http://materializecss.com/buttons.html
I am trying to use bootstrap tagsinput in a form contained in a modal
like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
UPDATE
this http://www.bootply.com/f43d1A0YxK reproduces the issue
The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
What you want to change is the .bootstrap-tagsinput class:
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block; that is being inherited.
Bootply Demo
Cristian almost guessed it
somewhere in js:
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
.bootstrap-tagsinput input {
width: 10em;
}
I see the tagsinput plugin you are using comes with its own css file.
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit; //Try change this to 100% !important;
display: block; // Add this in
}
You need to update these so they don't over rule native bootstrap rule.
The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;
the solution is, simply change the display: inline-block; to display: block;
Before change
.bootstrap-tagsinput {
display: inline-block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
After change
.bootstrap-tagsinput {
display: block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
The reason you are seeing this behaviour is because the style actually override the width attribute:
style="width: 3em ! important;"
Remove the style:
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
Additionally, set the desired width with CSS:
.bootstrap-tagsinput input { width:100%!important; }
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
I have this html:
<div id="tagsCloud" class="feedBarSegment">
<div id="tagsCloudHeader" class="segmentHeader">Tags</div><span class="tag">Psalm 33</span><span class="tag">Edgar Allen Poe</span><span class="tag">John</span><span class="tag">Hello</span><span class="tag">Test</span></div>
With this CSS:
.segmentHeader {
font-size: 1.15em;
font-weight: bold;
border-bottom: #7792ad solid 1px;
margin-bottom: 5px;
}
.feedBarSegment {
width: 250px;
margin: 52px 20px 20px 25px;
}
#tagsCloud {
margin-top: 10px;
}
.tag {
display: inline-block;
background: #e9e3c4;
padding: 2px 4px;
border-top: 1px black solid;
border-right: 1px black solid;
}
.subject {
display: inline-block;
background: #f2b2a8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 2px 3px 2px 3px;
border: black solid 1px;
margin: 2px;
}
I want to make it so that on each line, if no more tags fit that the tags on that line have padding added to them so that they completely span the entire line instead of having the extra space at the end. Is this possible to do?
If you can move from inline-block to inline for .tags you can use text-align: justify; on the container.
I believe what you're looking for is:
#tagsCloud {
text-align:justify;
}
http://www.w3schools.com/cssref/pr_text_text-align.asp
It seems like what you want is text-align: justify.