I'm not very good with javascript so I don't know how to make a image to change in darkMode.
theese images are SVG, and are in the index.js, not in the markdowns.
I've been looking for a way, but the Docusaurus documentation only says how to change the images in the NavBar and Footer..
:root {
--dev-dash-bg: url("../../static/img/dev-dash-light.png") no-repeat;
--dev-dash-bg: url("../../static/img/dev-dash-dark.png") no-repeat;
}
[data-theme="dark"] {
--dev-dash-bg: url("../../static/img/dev-dash-dark.png") no-repeat;
}
.dev-dash {
height: <desried height>;
background: var(--dev-dash-bg);
}
Related
I use Vue-Editor.
<vue-editor id="editor" ref="editor" v-model="content" :use-custom-image-handler="true" #image-added ="added" #image-removed ="deleted" :key="componentKey"/>
On mobile devices, the icons are to small. I like to increase the icons size on mobile devices, but on medium devices, I like to keep the default size.
If I do it in this way, the size changes for all pages not only for the current page:
<style>
.p {
color: black
}
.ql-snow.ql-toolbar button {
height: 35px !important;
width: 35px !important;
}
.quillWrapper .ql-snow.ql-toolbar button svg {
width: 35px !important;
height: 35px !important;
}
</style>
If I do it with <style scoped> it doesn't pass the css to the plugin component.
How I can change the css for the plugin only in one Vue component without having a global effect?
You can keep scoped but then, you need to make a deep selector like >>> .ql-snow.ql-toolbar button to select the 3rd party library.
If using SASS, use ::v-deep, more details here.
I might make a obvious mistake but somehow I am stuck with the following:
only for large screens i don't want the vertical scrollbar so i have this simple css:
#media (min-width : 2000px) {
// hacky
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
...more style definitions
but somehow this doesn't work
i am using chrome's toggle device bar tool to switch between different resolutions. All other css definitions for > 2000px are there, only body doesn't seem to be set??
#media (min-width : 2000px) {
body {
overflow-y:hidden !important;
}
.mt-5{
margin-top: 80px !important;
}
.mb-5{
margin-bottom: 80px !important;
}
}
Did you set 100% height for html and body, like this:
html, body {
height: 100%;
}
And also for possible other child elements inside body which span the whole height of body?
Otherwise one of them will get a scroll bar (not necessarily body, but it will look very similar)
Im trying to change swipe.js arrow button images to another svg image.
I have found actual path to svg in swiper.scss file
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
But when I'm trying to re-write the path it does not change.Any ideas ?
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("#/assets/svg/arrow.svg");
}
This solution works in my case (swiper#8) but it's not svg but png (but it should work with svg) :
.swiper {
.swiper-button-prev, .swiper-button-next {
background-repeat: no-repeat;
&:after {
content:'';
}
}
.swiper-button-prev {
background-image: url(../images/arrow-left.png);
}
.swiper-button-next {
background-image: url(../images/arrow-right.png);
}
}
Maybe, yo should to use !important in the css rule declaration.
I want to create a sticky header bar for a website just like the sticky header on this website (http://www.fizzysoftware.com/) if any on can can help me out with coding or any resource that helps me to create the same. Your reply would be of great help to me.
In your CSS, add
position: fixed;
to your header element. It's just that simple, really.
And next time, try to use right click on something you see on website and choose "Inspect element". I think that every modern browser has it now. Very useful function.
If you want to make it sticky when it's scroll down to a certain point then you can use this function:
$window = $(window);
$window.scroll(function() {
$scroll_position = $window.scrollTop();
if ($scroll_position > 300) { // if body is scrolled down by 300 pixels
$('.your-header').addClass('sticky');
// to get rid of jerk
header_height = $('.your-header').innerHeight();
$('body').css('padding-top' , header_height);
} else {
$('body').css('padding-top' , '0');
$('.your-header').removeClass('sticky');
}
});
And sticky class:
.sticky {
position: fixed;
z-index: 9999;
width: 100%;
}
You can use this plugin and it has some useful options
jQuery Sticky Header
CSS already gives you the answer. Try this out
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
now add the class sticky to any menu sidebar or anything you want to stick to the top and it will automatically calculate the margin and stick to the top. Cheers.
If you want simplicity in a HTML and CSS option to create a Stiky NavBar you can use the following:
Just create a navbar like this one:
<nav class="zone blue sticky">
<ul class="main-nav">
<li>About</li>
<li>Products</li>
<li>Our Team</li>
<li class="push">Contact</li>
</ul>
</nav>
Remember to add the classes in this case I created a Zone (to separate my HTML in specific areas I want my CSS to be applied) blue (just a color for the nav) and sticky which is the one that gonna carry our sticky function. You can work on other attributes you want to add is up to you.
On the CSS add the following to create the sticky; first I am gonna start with the zone tag
.zone {
/*padding:30px 50px;*/
cursor:pointer;
color:#FFF;
font-size:2em;
border-radius:4px;
border:1px solid #bbb;
transition: all 0.3s linear;
}
now with the sticky tag
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Position fixed meaning it will always be in the same position; and with top 0 I will always be at the top and a 100% width so it covers the whole screen.
And now the color to make our navbar blue
.blue {
background: #7abcff;
You can use this example to create a sticky navbar of yours and play around with the CSS properties to customize it to your liking.
Try This
Add this style to the corresponding
style="position: fixed; width: -webkit-fill-available"
OR
<style>
.className{
position: fixed;
width: -webkit-fill-available;
}
</style>
I created a panel using sencha touch with 300 x 400 pixel. I have an image with the same dimensions, created using photoshop. I used the image as the panel's background using css:
#pnl {
background: url(img/bg.png);
no-repeat;
}
the problem is that the image is way too huge and only displays about half. I've added max-width: 100% but the result is the same.
What have I done wrong? is there a way to fit any image on any size to a panel?
thanks.
Try this:
JS:
App.somePanel= new Ext.Panel({
cls: 'somePanel',
html: '<h1>Welcome to my app!</h1>',
//some other properties
});
CSS:
.somePanel {
background-image: url(http://somesite.com/someimage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}