I'm trying to customize the CSS for a modal on my website like background colors, padding etc. The modal seems to inherit the same CSS as it's parent and when I edit the CSS on my webpage, the overrides are working fine, but the override will not extend to the same element displayed in my modal.
The CSS code that I'm trying to edit is (.grid-item-header) and I can simply create an override that works on my webpage, but the exact same (.grid-item-header), which is the same CSS that displays when viewing in developer tools within the modal. The CSS changes are not being applied though.
So far I've tried (.modal .grid-item-header) and (.modal-content .grid-item-header), but I just cannot get it to change.
.grid-item-header {background-color: #000000!important;}
.modal .grid-item-header {background-color: #000000!important;}
.modal-content .grid-item-header {background-color: #000000!important;}
I wanted the modals header background colors to change, which I did not.
You can override modal popup css by using following code, this is work for me try this once.
put this at the top of page or on conman page
#media( min-width: 768px ) {
.modal-header {
background-color: black
}
}
Related
I am trying to create a webpage that has a header that is always on top of everything else. If I add a bootstrap modal to popup, it has a grey area that covers the header.
I've tried setting the z-index for both my red background header element, and my modal-popup element, but it just results in the modal grey box being overtop my red navbar which I am trying to avoid.
https://jsfiddle.net/martinradio/u03f1zyo/21/
When a modal pop up, it's created a div element on the top levels of the DOM, I went through a similar problem and setting the z-index like that solved it:
.modal-backdrop.show { z-index: 1000 !important; }
Your Header has default position which is
position: static;
Change it to:
CSS
header{
position: relative;
z-index: 1041;
}
This will fix your issue. If you want to make your header sticky in future. position: fixed will also work. You should avoid touching Modal box z-index and instead change z-index of components on case by case basis.
I am trying to change the style property which is set in the inline in the HTML. I'm using clickfunnels as my landing page builder and I can only add CSS rules.
My issue is that when you view the site on mobile there is extra empty space to the right of the page (see screenshot).
I troubleshooted it in the console to find out that if I manually change the property of the overflow to auto it solves the issue.
Since then I've tried to add various type of custom css (disclaimer I'm not familiar with this) but with no success.
What I've tried to add to the css:
html.style.property={overflow:auto;}
#html.style.property={overflow:auto;}
.html.style.property={overflow:auto;}
grammarly-btn {display:none!important;}
#html{overflow:auto;}
#clickfunnels-com{overflow:auto;}
#wf-proximanova-i4-active{overflow:auto;}
#wf-proximanova-i7-active{overflow:auto;}
#wf-proximanova-n4-active{overflow:auto;}
#wf-proximanova-n7-active{overflow:auto;}
#wf-active{overflow:auto;}
#wf-proximanova-i3-active{overflow:auto;}
#wf-proximanova-n3-active{overflow:auto;}
#elFont_opensans{overflow:auto;}
#wf-proximanovasoft-n4-active{overflow:auto;}
#wf-proximanovasoft-n7-active{overflow:auto;}
#wf-proximasoft-n4-active{overflow:auto;}
#wf-proximasoft-i4-active{overflow:auto;}
#wf-proximasoft-i6-active{overflow:auto;}
#wf-proximasoft-n6-active{overflow:auto;}
#wf-proximasoft-i7-active{overflow:auto;}
#wf-proximasoft-n7-active{overflow:auto;}
#bgRepeat{overflow:auto;}
#avcHn2VQJenBvoR5hilPG{overflow:auto;}
getElementByID.html{overflow:auto;}
getElementByID.html='overflow:auto';
The element in the source view is this:
<html lang="en" class="clickfunnels-com wf-proximanova-i4-active wf-proximanova-i7-active wf-proximanova-n4-active wf-proximanova-n7-active wf-active wf-proximanova-i3-active wf-proximanova-n3-active elFont_opensans wf-proximanovasoft-n4-active wf-proximanovasoft-n7-active wf-proximasoft-n4-active wf-proximasoft-i4-active wf-proximasoft-i6-active wf-proximasoft-n6-active wf-proximasoft-i7-active wf-proximasoft-n7-active bgRepeat avcHn2VQJenBvoR5hilPG " style="overflow: initial; background-color: rgb(252, 213, 213); --darkreader-inline-bgcolor:#2f251e; font-family: Lato, Helvetica, sans-serif !important;">
here is a screenshot better describing my issue:
screenshot of the issue
If you are trying to use JavaScript to apply styles to your HTML, you need access the specific style property of your html that you are trying to change.
getElementByID.html='overflow:auto'; won't work.
You should write something like document.getElementbyId('your_id').style.overflow = 'auto'
If you are just trying to select your HTML entirely then you don't need to use getElementById but can rather use a
document.getElementsByTagName('html')[0].style.overflow = 'auto'.
Another alternative is using an external stylesheet and implementing media queries to adjust for mobile view. Here is how to add an external stylesheet.
See the snippet for an example of a media query in CSS. is some example CSS.
html{
background-color: pink;
}
#media only screen and (max-width: 300px) {
/* when screen is this size or smaller, background color will change */
html {
background-color: orange;
}
}
to fix your issue of white space on the right, study more about Responsive Web Design.
in general, I would put all my body in one container and set its margin to 50% of both sides.
I have a website that uses Bootstrap Modals quite a bit. They worked in their normal fashion with a black faded background that would blur out the content that was on the page.
I then needed a modal that opened when a page was loaded so I used:
<div class="modal-backdrop fade in" id="purchaseModal" tabindex="-1" role="dialog">
Originally this was really transparent, so I found an answer on here that said I had to overwrite the styles using:
.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It worked pretty well and stopped the modal from being transparent and instead made the background white. This is fine.
However when I go back to any of the other modals on my site they no longer have the black fade that they used to, and it is now completely transparent. I'm not sure if maybe I overwrote the wrong thing, or do I need to perhaps write another class for the second modal that I need.
Try to override class with its ID or ClassName.
#purchaseModal.modal-backdrop.fade.in{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
background: #fff;
}
It will only work/override with purchaseModal id, and other will remain same with their default styles.
Hope this helps you.
Are you using a external style sheet for the CSS? If so this would apply across the whole site.
It sounds as though you are looking for all modals to have the black background except the one page your looking for a different white background, is this correct?
if so you have a couple options,
You could create .modal-backdrop.fade.in.black & .modal-backdrop.fade.in.white
and change the colour accordingly in the external CSS
Or you could have your standard .modal-backdrop.fade.in overwritten to black in external CSS & in the pages where you would like the background white, simply overwrite the same style in the individual page with a style tag.
Here are examples if you require: http://www.inmotionhosting.com/support/edu/website-design/using-css/linking-your-css-to-your-website
You are applying that style to all bootstrap modals. What you should be doing is giving that modal an additional class to style is accordingly.
For example, you could name your modal with no faded background modal-with-no-background. This means you can get rid of the bad practice of overriding style declarations with !important.
.modal.no-fade + .modal-backdrop {
opacity: 0;
}
I have a mobile menu on responsive, which use a javascript to show all of the elements from the menu. It puts on my <ul> a css code display:block on the element. So on a specific screen in my case:
#media only screen and (max-width:980px){
ul {display:none}
}
If I want to override it with a display none, it doesn't work because the display:block it is inline. I tried to change it like this :
.myclass .myclass2 ul {display:none}
but still doesn't work. I do not want to touch the javascript. How can I override it ?
If you have an inline style as you said display:block the single why to override this from within a CSS file is by using !important. But that wont work in your case if you want to show the menu at a click of a button.
I would use 2 classes for this, one to show the menu and one to hide it, no inline CSS and no !important. On window.onload/document.ready event I would take the width of the document and if its greater than 980px I would add the hidden class to hide the menu, when user clicks the menu button I toggle the show class. The same thing for window.resize event.
I am using http://app.raw.densitydesign.org/#%2F angular application and have used twitter bootstrap for accordion. Now, the problem is that when I am adding ui-bootstrap library, it is hiding the default horizontal scrolling functionality. Without this, it works fine. So any suggestion, how can I make it working with this library.
-- using 0.11.2 ui-bootstrap
Thanks
You can override that by using overflow-x. I couldn't see accordion on the link you gave but generally you can apply it by:
http://jsfiddle.net/882jof8L/
//CSS
#your-accordion .panel-body {
overflow-x: scroll;
}
//HTML
<div class="panel-body">
<table style="width: 1000px;">...</table>
</div>
Properties you can use with overflow-x:
overflow-x: visible|hidden|scroll|auto|initial|inherit;
In your case adding your style sheet after bootstrap might help:
<link rel="stylesheet" href="YOUR_PATH/bootstrap.min.css">
<link rel="stylesheet" href="YOUR_PATH/YOUR_STYLE_SHEET.css">
Styles are applied in the order they are read by the browser. This means styles appears at the top of a style sheet will be changed by the last one.
For example following style will result paragraph as black:
p { color: red; }
p { color: black; }
Or you can force browser to show scroll by using:
overflow-x: scroll !important;
What does !important do:
CSS rules that has the !important directive will always be applied no matter where that rule appears in the CSS document.