I am using Reveal JS. This is the CSS that I want to override:
.reveal section img {...
Using one of the methods below (or something better), how can I use JS to override that?
document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS
First, use chrome dev tools to make sure that the class is actually being added to the element.
If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules.
Instead of defining your class like this:
.red {
box-shadow: 5px 2px 2px red;
}
Try this:
.reveal section img.red {
box-shadow: 5px 2px 2px red;
}
Related
So I am using ui-select with angularjs to create a configurable directive. The functionality on the backend is almost done but our prototype has very specific styles and I need to adhere to those styles.
I would like to simply re-style the ui-select as I see fit but I can't seem to find a single tutorial online on how to do so. I have found a few examples on overriding the template that angular ui uses using $templateCache. Is there a way to simply have a css file somewhere that it uses instead of its default? Or is there a way to override the current classes without a bunch of !important tags.
Of course, you can change the entire style of the UI-select directive by our own CSS. There is no restriction for that, take a look at sample CSS changes in the link.
.ui-select-container {
width: 200px;
}
.ui-select-bootstrap .ui-select-choices-row.active>a {
background: #000;
color: #fff;
}
.ui-select-container input {
border: none;
border-bottom: 1px solid #ccc;
box-shadow: none;
}
I have a visjs graph in my web page (using Chrome v49). Whenever I click on or hover over the graph a blue shadow box appears around it. After looking at vis.css I assume this is controlled by this selector:
.vis-active {
box-shadow: 0 0 10px #86d5f8;
}
The only configuration option I found in the vis documentation was clickToUse but that does not cause the shadow box to disappear, regardless of value.
I have also tried specifying .vis-active in my own css, even using the browser's debug to set it as the element styles with no luck.
Lastly, in the browser debugger, going through all of the vis elements shows nothing to indicate that .vis-active is being applied, or any other stylings that would result in that shadowing.
How can I prevent visjs from showing this shadowing?
It's possible that what you're seeing is Chrome's default "focus ring," which can be overridden by:
.vis-active:focus {
outline: none;
}
Option 1:
The simplest way is to unset the box-shadow property in vis.css (do it in the vis.css, if you don't have the vis-active line in the vis.css file, then create the following in that). Unset like this:
.vis-active {
box-shadow: unset;
}
Option 2:
Or you can set the shadow blur and spread to 0, like this (in your example):
.vis-active {
box-shadow: 0 0 0px #86d5f8; /* in this case, color doesn't matter, you can even omit it */
}
Or, set it to something else you want, e.g.:
.vis-active {
outline: none;
border-color: #af90c8;
border-width: 1px;
box-shadow: 0px 0px 20px 5px #af90c8;
}
Good luck!
I have this slidetoggle and I want the style of the open toggle to be different then the closed ones.
By default all the faqtopics1 are set to border-radius: 5px; background-color: #f2ecec; when the div faqtext associated opens.
When the toggle opens, I want the style of faqtopics1 to be set to the "OnClick Style"
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
I found out about the .css() Method and could somehow make something up (line 2 and 3):
$(".faqtopics1").click(function(event) {
$("div.faqtopics1").css({"border-radius":"5px", "background-color":"#f2ecec"});
$(this).css({"border-radius":"5px 5px 0 0", "background-color":"#dedcdc"});
$("div.faqtext").stop(true).slideUp(400);
$(this).next("div.faqtext").stop(true).slideToggle();
});
But it's not a total success as even when I re-click on a toggle to close it, the OnClick style remains. Is there a better way to make what I want ?
Also I want to apply the same principal even if I click on faqtopics2, faqtopics3 or faqtopics4 div. (cf the jsfiddle).
You can find my codes (css + query) on this jsfiddle
Thanks a lot for your help!
Something much easier:
Define your two states in CSS:
faqtopics1 {
border-radius: 5px;
background-color: #f2ecec;
}
.onclickstyle {
border-radius: 5px 5px 0 0;
background-color: #dedcdc;
}
Then in JS you just have to toogle the class:
$("div.faqtopics1").toggleClass("onclickstyle");
This means you have a clear separation between the exact style (in the css), and the dynamic toogle (in the javascript).
It may be easier to use addClass.
$this.addClass('active');
Then in your css
.faqtopics.active{border-radius:5px 5px 0 0; background-color:#dedcdc;}
You can give all of your "FAQ topics" a shared class .faqtopics and then unique id's #faqtopic1 #faqtopic2 if you need to style them a bit differently.
try this,
$('faqtopics1').attr('class','newClassName');
I am trying to find out if there is a way to alternate content line separator colors if possible.
For example:
The issue is that it has to be something automatic, so I'm assuming javascript would probably be required, but I can't find anything like this. I know there is some things that show you had to alternate if you have something like this. I say it has to automatically change because I'm using wordpress so one single line/snippet of code will be entered and something like javascript will need to automate the process. Any idea's?
You can use <hr /> elements between paragraphs as separators and style their colors with setting border CSS property.
CSS :
body{
text-align:center;
}
hr{
width:80%;
border-radius:5px;
}
hr:nth-of-type(1){
border: 4px solid red;
}
hr:nth-of-type(2){
border: 4px solid yellow;
}
hr:nth-of-type(3){
border: 4px solid green;
}
Screenshot :
Example :
JSFiddle
Here's something for starters: http://jsfiddle.net/3wGBb/
Take a look if your required browsers support nth-of-type CSS3 selector: http://caniuse.com/css-sel3.
I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.