I am using react-simple-image slider and everything works smoothly but I dont get how to adjust the image to fit to the slider container. The documentation says this:
can customize by className with !important;
.your-app {
.rsis-container {
// do something
}
}
.your-app {
.rsis-image {
background-size: contain !important;
}
}
but I dont understand where to add it in my project (please see files)
files
Related
I have a flexdashboard created with Rmarkdown that has a custom span added to the navbar, resulting in the map I have below not being sized problem due to the extra height of the navbar.
The fix in the html is known to me: change the height of the dashboard container by replacing
$("html,body,#dashboard").css("height", "100%");
with
$("html,body,#dashboard").css("height", "calc(100% - 30px)");
However, I have been unable to change the generating Rmarkdown/css code to affect this line in the html document.
The line in context is:
if (_options.resize_reload) {
$(window).on('resize', function() {
if (_options.isMobile !== isMobilePhone() ||
_options.isPortrait !== isPortrait()) {
window.location.reload();
}
});
} else {
// if in desktop mode and resizing to mobile, make sure the heights are 100%
// This enforces what `fillpage.css` does for "wider" pages.
// Since we are not reloading once the page becomes small, we need to force the height to 100%
// This is a new situation introduced when `_options.resize_reload` is `false`
if (! _options.isMobile) {
// only add if `fillpage.css` was added in the first place
if (_options.fillPage) {
// fillpage.css
$("html,body,#dashboard").css("height", "100%");
}
}
}
The referenced fillpage.css in its entirety is:
#media only screen and (min-width: 768px) {
html, body {
height: 100%;
}
#dashboard-container {
height: 100%;
}
}
I have tried the following:
Adding the above fillpage.css code (with the modified height: calc(100% - 30px) to the Rmarkdown document in the css chunk (other css in this chunk is working).
Adding a modified fillpage.css to the css yaml.
In both cases, the generated html referenced above is unaffected.
How can I implement this change in my code so I don't need to manually edit the html document each time I knit?
I am trying to get my home page to display a random banner every time the site is loaded.
I used the following code in my functions.php file -
add_filter('body_class','random_background_images');
function random_background_images($classes) {
// Generate Random number from 1 to 10.
$background_class = 'background_' . rand(1,10);
$classes[] = $background_class;
return $classes;
}
and then this in my custom.css file -
body.background_1 {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 {
background-image: url("images/home-bg/website-background3.jpg");
}
it seems to work, but puts the image as a background image, not a banner.
Can anyone please help me change this code so it will apply to the banner section?
(The current banner is set from the front end with an uploaded image in the 'home' page setup.
Website is - https://flowersforeveryone.feedmybeta.com/
Thanks! :)
So this would depend on the html for the banner. Assuming the banner has a class of .page-banner, you could change your CSS slightly thusly:
body.background_1 .page-banner {
background-image: url("images/home-bg/website-background1.jpg");
}
body.background_2 .page-banner {
background-image: url("images/home-bg/website-background2.jpg");
}
body.background_3 .page-banner {
background-image: url("images/home-bg/website-background3.jpg");
}
In CSS, the selector that comes after a space is a child of the previous selector.
I have a react application in which on checking certain checkboxes I am adding or changing a certain image icon.
.checkbox1:checked ~ .icon-span {
background: url('../../../../assets/images/icon_plus.svg');
}
Which is giving me this:
background: url([object Module]); //invalid property value
But path is correct, how do I correct this?
This should work
.checkbox1:checked ~ .icon-span {
background: url(${require("../../../../assets/images/icon_plus.svg")});
}
I'm trying to embed the bitcoin widget headlines from www.bitcoin.com into my website but is there a way to make it full-width?
here is the widget (taking out the divs to be able to show it here):
div class="btcwdgt-news" bw-entries="3" bw-theme="light"
I'd like it to occupy the whole width of my page if possible.
(original link: bitcoin.com/widgets)
You can override the widget CSS parameters by inserting in you CSS file the following:
div.btcwdgt {
max-width: 100% !important;
}
Also I would recommend you to read this: How to override the properties of a CSS class using another CSS class
(function(b,i,t,C,O,I,N) {
window.addEventListener('load',function() {
if(b.getElementById(C))return;
I=b.createElement(i),N=b.getElementsByTagName(i)[0];
I.src=t;I.id=C;N.parentNode.insertBefore(I, N);
},false)
})(document,'script','https://widgets.bitcoin.com/widget.js','btcwdgt');
div.btcwdgt {
max-width: 100% !important;
}
<div class="btcwdgt-news" bw-entries="3" bw-theme="light"></div>
I'm trying to create faked transparent form fields that "show through" to the background which is a tiled image (which of course are "showing" through the numerous divs between the inputs and the page background). Here's where I'm at:
div#searchbox, div#mailing_list ul li.fields,div#product div.info input.text {
border:1px solid #707070;
background:url(../_images/fade_bg.jpg) 0 0 repeat;
}
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
Now, this works as expected except the background position property isn't doing anything. I can remove them, change them, nothing happens. I'm guessing that it has something to do with the fact it's a repeating background. The position values are the element offsets from the body where the background itself starts. Any way to line these up?
inputs are very hard to style using css.
However, what you could try (works in Firefox) is to remove the background image from the inputs and give them a background:transparent so that the background of the parent shows through.
Try using CSS nesting for this code
input#search {
background-position:-715px -163px;
}
input#name {
background-position:-134px -888px;
}
input#duhlyh-duhlyh {
background-position:-134px -926px;
}
with their respective parent elements because sometimes what happens is some properties are overwritten. in that case you can use css nesting and make it work