I'd like to add query elements to CSS through a new #scroll query for example
#scroll document (top:30em) {
/* affect selectors */
.FullHeader{
max-height:0px;
}
.ScrolledHeader{
max-height:30px;
}
}
I am hoping to achieve element layout control when page scrolling occurs without the need for the client to write event handlers.
It would look similar to a media query but instead base off the current page left and top positions.
So, as an example, a rule like
#scroll document (top 30px){
body{padding-top:30px;}
header{position:fixed;}
}
would fix the header and keep body content relatively stable without additional javascript.
Is this possible through browser extensions?
Is anyone working on this or have help on how I might go about it?
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
I would like to know if there is a way to duplicate the cursor in my website so it appears twice, say as if you are seeing it drunk. I would like it to keep being responsible to images and change, but always double... is it possible to do this in an easy way? my CSS is pretty basic... thanks in advance!
This is an example: https://s11.postimg.org/ba76nmrvn/cursor_1.png
You can make some image and define it as cursor like this:
body {
cursor: url(path/to/your-arrows.png);
}
Doesn't need to be the body, you can define this for any HTML element.
You can load custom images, but don't forgot to always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used
body {
cursor:url(double-arrows.png),url(anotherCursor.cur),auto;
}
On this game I play, you can customise your profile layout (it's just a text-based browser pet-sim game, similar to neopets). Many people choose to hide existing elements to create a blank space to put their own thing (e.g. they hide the site banner, site menu etc). However, to do so, you need to specify every id, and put display:none, like so:
#id1, #id2, #id3.... etc {
display: none;
}
I was wondering, is there an easier way to do this? I thought, maybe, try:
* {
display: none;
}
This gave me a completely blank page - perfect, except it also hides my own elements and such.
So, is there a way to perhaps use * but with a few exceptions? Or is there an easier way to select all the ids on the page and hide them?
I'm trying to make a css-selector that assigns diffrent properites based on weather the html is inside an iframe or not. I tried this:
html:not(:root) body {
background: black !important;
}
I expect this to apply background: black; to the body if it's inside an iframe, but it doesn't, why? And are there any css options? I could always check with javascript if html is root.
IE8 support not requierd.
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
It is probably possible to do the styling in an iframe with JavaScript.
document.querySelector('iframe').contentDocument.body.querySelector('#some-element').style.background-color = 'red';
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
Accessing elements inside iframes with JavaScript document futher here: Javascript - Get element from within an iFrame
Posting my comment as an answer for better display, you should:
Put "is in iframe" detection code in JS, as I don't see any other way of doing so
Put CSS code inside the iframe depending on the JS result
So if all code is inside the iframe, do:
if (window.parent !== window) {
document.documentElement.classList.add('inside-iframe');
}
html.inside-iframe {
bkacground-color: black;
}
If you want the detection-JS-code to be inside the parent frame, go for:
document.querySelectorAll('iframe')
.forEach(i => i.contentDocument.documentElement.classList.add('inside-iframe'));
Assuming the iframe is loaded when executing this JS (otherwise, contentDocument/documentElement will not exist). You may rely, in such case, on load event of the iframe (but it seems better anyway to put "is-in-iframe" detection indise the iframe itself, as the corresponding CSS is inside the iframe too)
html:not(root) body {
background: black !important;
}
Works
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.