Is there a way to change the default block cursor used by Shellinabox to a vertical bar?
Using Chrome's inspector tool, I found this div:
<div id="cursize" style="left: 675.5px; top: 160px; visibility: hidden;">143x20</div>
but altering the value does nothing.
There is nothing about a cursor size in the page's styles.css file or any of the config files found in /etc/shellinabox/options-available.
If you know of a better place to ask a question like this, please tell me.
Those inline styles have been generated dynamically through means of something like JavaScript. Considering they are generated dynamically, simply manipulating their values won't reflect any change.
Having said that, you can override them with the !important declaration. Typically !important should only be used as a last resort, but inline styles have the second-highest level of specificity, and !important is the only way to override them.
Using something like the following should work for you:
#cursize {
left: 500px !important;
top: 100px !important;
}
Hope this helps! :)
Related
I created a global CSS file. It is working perfectly, except that I am unable to set margins.
For Example CSS:
.update_date {
font-size: small;
text-align: right;
margin: 0;
}
This is a CSS style for class update_date. When I use it, except margin, everything is applied. It's the same case with every other class. None of these classes are overridden in any other place.
Can someone provide a workaround on how I can set margins globally.
Environment:
Angular 10/11
Try using
.update_date {
font-size: small;
text-align: right;
margin: 0 !important;
}
this happens because that style is getting overridden by another
You should avoid "!important" if you can. It can cause unintended styling issues later down the line - see below.
My suggestion: In your browser, use your "Inspect Element" (Ctrl + Shift + I) tool to figure out where in the DOM Tree your styling is coming up and what is overriding it. This will help identify if !Important is truly the only solution you can use.
Inspect Element Tool Picture Example
Hard to say with your code snippet what is actually happening and being this post is 1.5 years old, you may already know this info. But I didn't see any other responses, so just wanted to raise awareness to the "!important" property.
More about !Important
From W3 Schools (I am sure you can find this elsewhere as well): https://www.w3schools.com/css/css_important.asp
"Tip: It is good to know about the !important rule, you might see it in some CSS source code. However, do not use it unless you absolutely have to."
I am using the Pinterest hover button widget for a client website.
https://developers.pinterest.com/on_hover_pin_it_buttons/
By default it appears at the top left of all images. It doesn't look like their script allows for positioning. Is it possible to override this with CSS?
Thanks
Yes I believe that it is. If you generate the code you will see that the pin it button is created as a span and then positioned with inline styles, I am guessing dynamically with each image.
In the example I looked at it had the class xc_pin, so I will use that for my example but bear in mind that the class you have may be different.
As I mentioned, the span is styled inline, so to overwrite it you will have to use !important, else the styles will be overwritten. Here is how your code could look:
xc_pin {
left: 20px !important;
top: 50px !important;
}
I hope that this helps!
EDIT WITH WORKING JSFIDDLE
After playing around with the css I managed to find a way to target it using the css sibling selector, here is the jsfiddle: https://jsfiddle.net/2xzxgvfw/19/
Hope this solves your issue!
I do not know how you generated the code but I think there should be somewhere a file called: ppibfi_pinterest.css in this file look for the line:
.pibfi_pinterest .xc_pin{}
there you should find something like: top: 5px; margin-left: -1px;
if you adjust this, you should be able to modify the position of the pinterest icon
I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.
I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.
What is this, and why does it have the values that it has?
element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.
That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).
element.style refers to inline styles on the dom element. For example:
<p style="color:#cc0000;">Foo</p>
the color of that paragraph would show up under element.style.
You can fix with your css by doing this:
#popUpDiv[style]{
left:610px !important;
top:0px !important;
}
HTH
-Ted
That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).
Look for javascript code that changes the display, top and left properties of #popupDiv
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
Has anyone ever encountered a case where a more specific !important declaration is not overwriting another !important declaration? Here is the base css:
.x-floating {
position: absolute !important;
z-index: 10000 !important;
}
And here is what I want to use to override the z-index:
.x-msgbox.x-floating {
z-index: 10001 !important;
}
When I inspect via the Chrome (or Safari) debugger on Windows, I see the .x-msgbox.x-floating declaration being overwritten (crossed out), and the x-floating declaration being active. This goes against what I know of css specificity, and what I expect from simplified tests.
Example code:
Since I'm using Sencha, this will only work in Chrome or Safari, but here's a jsFiddle link (perhaps not kosher to hotlink Sencha's source, but this'll never get enough views for it to matter at all). To run the test, click the "choose date" button, then spin one of the wheels by dragging. A message box will appear. Compare the message box with the date picker (the top level elements of each — children of the body; another way to do it is to look for elements with class x-floating).
Default position is static. In static position can´t use z-index.
.x-msgbox.x-floating {
position: relative;
z-index: 10001 !important;
}
!important sets the highest priority for that css
why .x-msgbox.x-floating? and not .x-msgbox only.
the first time you give .x-floating the highest priority, so the next time there is important (z-inbdex.10001) this time it is ignored.
the first !important can be deleted
why not creating a new class and overwriting it again directly with the new value?
and x_msgbox would maybe also better