I'm trying to style this button with CSS. It's used on a Cart Page and other areas throughout the site. On the cart page its "name" element is unique name="calc_shipping". However, because the class is not unique if I try to style it using the current class it naturally changes the style of all similar buttons.
Question: Is it possible to somehow use the name="calc_shipping" element in my CSS modification to style this button specifically?
<button type="submit" name="calc_shipping" value="1" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
Thanks for any suggestions! I've been racking my head on this for hours.
ch
You can simply add an ID to this specific button. I'll for example use ID "calc_shipping_btn"
<button type="submit" name="calc_shipping" value="1" id="calc_shipping_btn" class="fusion-button button-default fusion-button-default-size button">Update totals</button>
The CSS for this would be:
#calc_shipping_btn {
background-color: #00FF00;
color: #FFF;
}
If you don't want to add an ID you can target this specific button with this CSS:
button[name="calc_shipping"] {
background-color: #00FF00;
color: #FFF;
}
Add !important after every rule if they refuse to style the element. This helps override the class' css.
if your button has unique parent section as div or span for example parent-section class you can add style to button this example
.parent-section button{
...
}
Related
I have applied background color for popover.
Problem is, how to change background color for only popover using css.
a.top > .popover {
background-color:red;
}
My code is add here
Thanks for your help in advance
Add custom class for a
HTML
<a data-content="Content" data-placement="top" data-toggle="popover" title="" href="#" data-original-title="Header" class="test">top</a>
CSS
.test + .popover.top {
background-color: red;
}
THIS WORKS WELL
.popover.fade.top.in{background-color:white;}
.popover.fade.bottom.in{background-color:red;}
.popover.fade.left.in{background-color:yellow;}
.popover.fade.right.in{background-color:green;}
CHANGE THE COLOR YOU WANT TO CHANGE.
jsfiddle demo
There are two ways to solve this problem:
Add a class to that one popover element and focus it by using that class in your CSS (make sure you add it after the standard styles being used for all the other popovers).
Style only this one popover by counting. If you do know it's position relative to the other popovers in the DOM you could select it with the nth-of-type or the nth-child selector. Here is a wonderful article explaining the whole concept: http://alistapart.com/article/quantity-queries-for-css
Once the button is clicked I want it to stay with the active style instead of going back to normal style. Can this be done with CSS please? Im using blurb button from DIVI Theme (WordPress). Please help me!
code:
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:hover {
color: red !important; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:selected {
background-color: #ff4b46;
color: #fff; }
#blurb-hover.et_pb_blurb .et_pb_blurb_content
.et_pb_main_blurb_image .et-pb-icon:active {
color: white !important;
background-color: red;
width: 140px;
height: 100px; }
CSS
:active denotes the interaction state (so for a button will be applied during press), :focus may be a better choice here. However, the styling will be lost once another element gains focus.
The final potential alternative using CSS would be to use :target, assuming the items being clicked are setting routes (e.g. anchors) within the page- however this can be interrupted if you are using routing (e.g. Angular), however this doesnt seem the case here.
.active:active {
color: red;
}
.focus:focus {
color: red;
}
:target {
color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>
Javascript / jQuery
As such, there is no way in CSS to absolutely toggle a styled state- if none of the above work for you, you will either need to combine with a change in your HTML (e.g. based on a checkbox) or programatically apply/remove a class using e.g. jQuery
$('button').on('click', function(){
$('button').removeClass('selected');
$(this).addClass('selected');
});
button.selected{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Item</button><button>Item</button><button>Item</button>
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
HTML
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
To make button change content:
HTML
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
CSS
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
Hope it helps!!
In the Divi Theme Documentation, it says that the theme comes with access to 'ePanel' which also has an 'Integration' section.
You should be able to add this code:
<script>
$( ".et-pb-icon" ).click(function() {
$( this ).toggleClass( "active" );
});
</script>
into the the box that says 'Add code to the head of your blog' under the 'Integration' tab, which should get the jQuery working.
Then, you should be able to style your class to what ever you need.
I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>