I've been pulling my hair for hours trying to figure out how to restyle the default scrollbar in Svelte. I've tried regular HTML styles, tens of external npm packages, and every source I could find, but none of them worked. How can I restyle the default scrollbar in a Svelte website?
I've tried adding the following code to my stylesheet but to no avail:
main::-webkit-scrollbar {
width: 0.25rem
}
main::-webkit-scrollbar-track {
background: #1e1e24;
}
main::-webkit-scrollbar-thumb {
color: #93CAED
}
Turns out Dai (from the original post's comments) was correct. I shouldn't have applied the styles on my <main> element. However, I didn't have much of a choice because the styles were to be applied to a .svelte file which only had 3 tags - <script, <style, and <main>. Fortunately, I found a way around this.
By prefixing the ::webkit-scrollbar with :root, which automatically applies the styles in the block provided to the whole document.
Please stop pulling out your hair, it won't help. But the following css would surely help you out to customize the scrollbar in Svelte.
For Webkit(ie. Chrome) browsers
:global(.main::-webkit-scrollbar) {
width: 0.25rem
}
:global(.main::-webkit-scrollbar-track) {
background: #1e1e24;
}
:global(.main::-webkit-scrollbar-thumb) {
color: #93CAED
}
For Gecko(ie. Firefox) browsers
:global(.main){
scrollbar-color: #93CAED #1e1e24;
scrollbar-width: 0.25rem;
}
Assuming, "main" is the class name of the Html element where custom style of scrollbar will be applied.
Related
I cant find any related solution to my problem here on stack over flow but here we go. i have checked footer space and marked related module with zero spacing for slide but still it is not working.
Please see www.sateeni.com and under main homepage slider i have some unwanted space and don't know why its there. Please need help to find out why and where the problem is. sorry if its very basic thing but i am new to magento so cant figure out the reason. I have tried all options but no luck.
Thanks in advance.
Adam
Your main content container is showing and even though it is empty, the CSS has padding and a minimum height:
.main {
padding: 20px 0;
min-height: 370px;
}
You can either use CSS to overwrite this min-height on the homepage only
.container.full-width {
padding: 0;
min-height: 0;
}
or just hide this element on the homepage only.
.container.full-width {
display: none;
}
I have an animated svg, but firefox doesn't currently support the transform-origin property with % for svgs. So I'd like to hide the animated svg and show a static svg or png when users view in firefox. I'm not sure how to do this. I don't think feature detection will work, because firefox does support svgs and transform-origin, just not transform-origin for svg. Thanks for any suggestions.
Had this issue. I remember reading a comment somewhere in SO that Firefox42 supports this with a prefix:
-moz-transform-origin
anyway, to detect firefox i use a snippet found here:
if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1)
{
//Do Firefox-related activities
}
in your case, if the browser is indeed firefox, and assuming you are using 2 container elements, 1 for your SVG and one for your PNG, you could:
1) directly add/show the elements with js
2) add a 'firefox' class to your root html element and style your css accordingly.
so, let's say you have a #svg and #png containers
in your css you'd use:
.firefox #png { display: block; }
#png { display: none; }
#svg { display: block; }
.firefox #svg { display: none; }
Hope this helps!
I simply cannot get this code to work. I want to put a different background image on each page. I think I should do this by creating different class selectors, and then putting those in the body tags for each page, rather than using an inline style element.
Here's my css class selector:
.contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
And here I put it in the html for contact:
<body id="contact-grad">
As you can see, it's not working.
Let me know if it will be helpful for me to post the entire html and css. I cannot get any background image to work. I put my code into the w3 validator, and got a "parse" error. Hm...
Thank you!
The body has an id 'contact-grad' but your selector in the css is on a class (that's what the dot do). Try using a hash '#' instead. as in
#contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Addendum:
This resource is a good starter for CSS-selectors.
.contact-grad is for a class, use #contact-grad for your id="contact-grad".
You shouldn't have your body as absolute position, better use a div inside the body ;).
For layout purposes I need to place 15px space between the bottom of the scrolled contents and the bottom of the container: div class="scroll-pane".
Styling the container .scroll-pane { padding-bottom:15px; } has no influence on the output. Going into the code of plugin jScrollPane(), it is set: elem.css({'padding':0}); so the padding-value is reset.
Is there any way to set a paddingBottom value for the scrolling container?
A css rule should work too!
.scroll-pane {
padding-bottom:15px!important;
}
In jQuery
$('.scroll-pane').parent().css('padding-bottom', '15px');
Should do the trick
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!