On this site, https://kkmpr.com/, there is a section that says "Shop" and below it there is a Slider built using slick slider. I know how to change the dot and arrow colors (on the :before), but even in my inspector, I can't get the colors to change. At first, I thought maybe they were being positioned underneath the slider images, but I don't think that is the case either. I can't figure out what is going on. If I disable the slick-theme.scss style sheet, I can see the unstyled "Next" and "Previous" buttons with the numbers for the dots below.
It looks like there is overflow: hidden applied to .slider, and the arrows are absolutely positioned outside of that element.
Adding the following CSS reveals the arrows in the Shop section:
#slider-container .slider {
overflow: initial;
}
Enabling the arrows and dots are properties of the object.
They probably have them disabled in the properties of the actual js object.
Related
I am trying to design the first Book Now button of this page (https://www.bridgecitychrysler.com/book-service/) to overlap onto the white section below the hero image. Even though I have set the z-index incredibly high, it is not showing up in front of the section below.
If someone is able to figure this out just in the inspect tool, that would be great!
Thanks,
Looks like your .hero-widget css has overflow: hidden; set, disabling that seems to have made it visible!
Try removing position:relative from your button class.
This makes the button reappear, and then remove transform: translateX(-50%) from the a tag in the cta-container for proper alignment.
Use pointer-events:none for these type of situation, when click events is not working for overlapped content, use pointer-events:none
After have changed marker icon (same as original, just colorized), borders are still displayed under Firefox, not from Chromium :
This CSS code has no effect:
border: none; / border: 0;
overflow: hidden;
An idea to force hide this undesirable effect?
In fact, this effect has added by an outside element: .leaflet-pane.leaflet-shadow-pane ; no rule applied on .leaflet-pane.leaflet-marker-pane that contain markers.
Code inspection has been not easy: element to hide
Solved by simple display: none; rule on this element .leaflet-pane.leaflet-shadow-pane: you can see
Seems rather like the "border" you see is actually the placeholder for a broken image.
Typically if your custom Marker icon's shadow is missing (e.g. you forgot to change its default value, while not providing the default shadow image asset)
This would also explain the different behaviour between browsers, since each of them hints for broken image differently.
I have managed to embed a PowerBi Dashboard into a webpage.
Unfortunately, it looks hideous. For example, the padding is ridiculous; The title is stuck in the top-left corner, which I'd like to remove; all the content is loaded into an iFrame, which if I do not set the height and width, makes the dashboard near-invisible and non-responsive (in terms of window scaling); nothing is centred...
I have tried overriding the CSS. For example, I tried to set the display: none !important; property on the header (to remove the title), but it has no effect. I also tried changing the background color of the iFrame from grey to match the color of the webpage, but that too did not work.
Does anyone know how I can style my PowerBI dashboard and embed it without an iFrame (is this even possible?)?
As far as I know, at the moment, it's not possible to embed anything from PowerBI to a web page without an IFrame.
Do you really need a dashboard, maybe a report would do it? At least you'd be able to place the components as you like.
I had the same issue. I managed to use CSS to re-style the iFrame for both reports and dashboards.
I'm using an angular project and added the CSS to my component that is displaying the Iframe.
border-width: 0; //Removes Iframe horrible border
I also adjust the height, width and position.
If you struggle to find what element to change the CSS, use the inspect element in Chrome and test by changing some CSS on each element.
I was able to hide and change the position of the title when I found what div it was in with:
visibility: hidden; //true to show
text-align: centre; //left or right
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
Consider a translucid background-image blocking the pointer-events of css links underneath it. I would like to make the links work even beneath this image.
Is it possible?
If one element overlaps another you can't click it, simple.
You can put the links on top of the overlay, but you will lose the effect on those links. It's not classy, but I guess it would work.
a {
position: relative; /* set them relative, keeping their position */
z-index: 1000; /* set z-index to move it in front */
}
Don't think so!
generally one of the oldest image theft methods was putting image behind a transparent image.
but if it is very important to you you can make hot spots on that image with some usual methods such as html image map or using some of the svg capabilities.
and if there is effects like shadow or something like this you can use css3 to make them with code