I am trying to override mail chimp css
if I add inline css like
<input type="submit" value="SUBSCRIBE" background: #111; name="subscribe" id="mc-embedded-subscribe" class="button">
this is working fine.
In this case, I am unable to use :hover along with mc-embedded-subscribe id.
I mean if I write
#mc-embedded-subscribe .button {
background: #222;
}
This is not working, also
#mc-embedded-subscribe input.button {
background: #222;
}
is not working.
Please let me know how to make color change on hover for subscribe button in mailchimp,
Thanks
Try adding !important to ensure your background rule isn't being overridden. Is something else has higher specificity your CSS will be ignored.
#mc-embedded-subscribe:hover {
background: #222 !important;
}
Your CSS code is set to find a child (.button) of #mc-embedded-subscribe. When really, they are the same thing as the button has a class and id.
Just do:
#mc-embedded-subscribe {
background: #111;
}
#mc-embedded-subscribe:hover {
background: #555;
}
See here: http://jsfiddle.net/UteLC/3/
If that isn't working, you may need to add the !important so that your css overrides the default MailChimp css like this:
#mc-embedded-subscribe:hover {
background: #555!important;
}
Just add "!important" at both places, it worked for me.
For example:
#mc-embedded-subscribe {
background: #111!important;
}
#mc-embedded-subscribe:hover {
background: #555!important;
}
You can see it live at this blog.
Just click on any post and look at the sidebar for the redesign in action.
Hope this helps.
Related
I can get a p+p adjacent selector working, but not label + input. Why could this be?
p+p {
color: red;
/* Works fine! */
}
label+input {
background-color: red;
/* Doesn't work */
}
<p>Test</p>
<p>Test</p>
<br>
<label>Test</label><input type='checkbox'>
https://jsfiddle.net/h16engzw/
No, Actually it's working but you are not using the right property
label+input {
background-color: red;
/* Doesn't work */
}
in this code you are trying to give background-color: red; to a checkbox but you can't give background-color to a checkbox.
for example if you will try this:
input {
background-color: red;
}
this will won't work too.
you are using right selector but the wrong property for a checkbox for example try this.
label+input {
height:70px;
}
now the height of checkbox will change.
I hope you got my point.
Please feel free to ask if not.
I'm using ZK and I want to make use of the ZK sclasses for the items in my .zul files.
I saw that you can use things like :
<style>
div.z-tree {
background: none !important;
background-image: none !important;
border: none !important;
}
div.z-tree-body {
background: none !important;
}
tr.z-treerow-seld, tr.z-treerow-over {
background: #00533f !important;
}
div.z-treecell-cnt {
color: #5555ff;
}
.test-class div.z-treecell-cnt {
color: #ff5555 !important;
}
</style>
Where can I find all those styles, like z-tree-body that I can use and all the attributes I can assign to them or how to search for them?
When I need to override some CSS, I always search the specific CSS classes with the browser developer tools.
Because you want to override the CSS of some nodes but not all, try to use sclass to a specific class of your own.
Example :
<style>
.red {
color:red;
}
<style/>
<label sclass="#load(empty vm.property?''':'red')" />
You don't need to use the zk classes if it's for particularisme cases. For overriding them all, you can beter use the zk classes.
I've been working on positioning a button for a web app and ran into some difficulty.I've created this jsfiddle, which demonstrates the problem.
The code is taken out of context, so some of the rules and classes and such may not make sense, but the problem I'm having is the same. The button moves away on click and I can't seem to fix it when playing with the position. I want the button to stay in the same place when clicked, so that clicking on the button will actually take you to the link that it is referencing.
Any Ideas?
Thanks.
You are specifying the link move to 1px from the top of the page in the rule .back:active (what happens when you click down on an item.)
http://jsfiddle.net/3dk48/8/
a.back:active {
/* This breaks it.
position: inherit;
top:1px; */
color: black;
}
In addition, if you want to still have :active effects, you need to have the correct specificity (currently a.back:link rule overrides your color for :active, but if you correctly update the specificity you can fix that. As well as link rule positioning in the LV(f)HA order (LoVe HAte mnemonic, plus focus lol) will ensure your pseudoclasses work properly.)
The LoVe-f-HAte mnemonic:
a:link { ... }
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
... ensures that the correct states override the correct other states.
Remove the below code from .back style
position: absolute; // not need
margin-left: 2%; // not need
then the problem can solved.
EDIT:
also make change here..
.back:active {
/* position: absolute;
top: 1px; */
color: black;
}
fiddle: http://jsfiddle.net/3dk48/9/
use this:
.back{
top:32px !important;
}
body{
position:relative;
}
I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.
First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...
.CoolL .Caption, .CoolR .Caption { color: #900; }
Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:
.Black { background: #000; color: #fff; }
Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...
<div class="CoolR Plus Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
In fact, the background is displaying black, but the text color is still brown.
I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...
.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }
What am I missing? Thanks.
I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.
.caption {
color: #000;
}
.cool-caption {
color: #900;
}
.caption-with-background {
background-color: #000;
color: #fff;
}
You could try :
.Black { background: #000 !important; color: #fff !important; }
There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:
.Black {
background: #000;
color: #fff;
}
Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:
* {
//blahblahblah
}
you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:
.CoolR1 .Black, .Black{ background: #000; color: #fff;}
/** you could also chain your classes for specificity power **/
.Black.Caption{color:#fff}
that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors
I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:
.Cool .caption { color: #900; }
.Cool .caption.black { color: background: #000; color: #fff; }
And put .L and .R in separate classes
.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */
.Cool.R { . . . } /* and vice-versa */
I need a way to override the Bootstrap's glyphicon styles and use the traditional CSS background property without breaking existing markup (for example <i class="glyphicon glyphicon-comment"></i>)
Here is my attempt but it's still not working:
.glyphicon-comment:before {
content: none;
}
.glyphicon-comment {
background: transparent url('someurl') no-repeat 0 -380px;
}
Edit:
Solved by specifying hegth and width to the glyphicon class as shown below:
.glyphicon {
width:14px;height:14px
}
This works on http://getbootstrap.com :
.glyphicon.glyphicon-comment:before {
content: none;
}
If you don't want to preserve the icons's space, you could also try
.glyphicon.glyphicon-comment {
display: none
}