Jump to content


  • Content Count

  • Joined

  • Last visited

Everything posted by pstein

  1. Assume I load a web page (from a web server where I have no access) and inspect CSS script files. Some of the CSS rules contain values declared as "!important". I want to overwrite a few of these values (after web page loading by my own user.js script) by other, customized values. Since my values should have priority I am search for a way to declare them "!moreimportant". How can I achieve this? Peter
  2. Assume I have web page which uses a CSS script with lots of rules. Some of them have properties like .foobar { display: grid; grid-template-columns: 1fr 300px; grid-column-gap: 70px; } I want to get rid of all these grid-related instructions in all CSS rules. How can I disable all grid layout stuff completely for all CSS rules of the current webpage? I have no access to the original web server (and the original CSS) but want to overwrite the CSS script in my browser after loading. Peter
  3. Normally a more specific CSS rule has priority over the more general rule e.g. <header class="foobar"> //width=1200px <div> <P> ....</P> //width=860px; </div> </header> But is there a way to let a parent element force to recursively overwrite all nested child CSS rules? In the sample above the header width instruction should overwrite the inner P width instruction. In general all nested width instructions should be overwritten. If a nested element has no width instruc
  4. Lets take an example: https://www.makeuseof.com/tag/how-to-add-cool-effects-videos-android/ When I print this webpage (into a pdf file) then alla rticle pictures are printed in a big, fat dimension. Have a look at the three picture below the section title "1. Glitch Video Effects". They are placed in full format on a full pdf page. I want to get them shrinked down to 20% resp. a maximum width of 200px. Therefore I want to add a new CSS rule. But neither .article-gallery { max-width: 840px !important; } nor img { width:
  5. Lets have a look at an example webpage: https://www.makeuseof.com/tag/lock-methods-android-phone/ Now right click (in Firefox) on the text (starting "You can secure your Android phone's lock screen....") below the headline and select "Inspect element" from context menu The element has a class "heading_excerpt". Now have a look on the element(s) in HTML code just ABOVE this element. They have a class e.g. "heading_meta". Although they are physically written in HTML code ABOVE the "heading_excerpt" they are appear on the loaded webpage in the opposite order. Why?
  6. How can I most easily delete all values of all <name>.....</name> elements of a certain *.xml file? the <name> element tags should be kept. A command line tool and command would be preferred rather than a GUI based tool. The <name> elements contain only value and no further nested elements.
  7. It happens sometimes that I wrote and apply buggy CSS & Javascript/jQuery scripts into a webpage. An errorneous CSS rule could be .myclassname { width: 1024kk !important; }}; or a javascript var pane = document.getElementsByClassName("page-header-meta")[0]; does not find at least 1 instance of the class. So the remaining statements of such a scripts are not executed. How can I find out (in Firefox) which statement is causing the trouble? The webdeveloper pane at the bottom is not really useful. I have problems finding in it errors or warnings wh
  8. Assume I have an element like <img src="https://www.foobar.com/mysmallpic.png" ......>samplepic</img> Now I want to avoid a linking to a picture source on an external server. Instead I want to embed the few KB of the picture directly into HTML source code. I can imagine that there is a method similar to <img src=x'21315112A56CED......58889EFED' ......>samplepic</img> or alternatively with variable: mypic=x'21315112A56CED......58889EFED' ; <img src=mypic .....>samplepic</img> x'...' means the hexadecimal binary content (ANSI or
  9. Obviously this doesn't work since I have NO Access to the original CSS files. I am not the owner of the webserver. I want to change the loaded webpage AFTER loading by scripts with Firefox AddOns like Greasemonkey or Firemonkey. This work fine for many CSS statements. So again: Is there a way to delete @media print { .... } statements AFTER loading?
  10. Assume the following code: <div class="foobar"> "whitespace" <p>....</p> </div> "whitespace" is not the text but a whitespace as indicated in Firefox WebDeveloper. How can I get rid of every whitespace inside after a <div class=foobar"> and the first <p> with Javascript?
  11. Oftentimes web pages include a separate *.css file and have additional special CSS instructions inside for printing the article. How can I delete with CSS-important! or JavaScript this @media print { ............. } rule / instruction? Peter
  12. Lets start with an example from a CSS for a Webpage: <div class="lg:w-10/12 ....">....</div> One of the referenced CSS rules is as follows (mind the additional masking backslash \): .lg\:w-10\/12 { width: 50%; } Now I want to override this CSS statement (later after loading) by the following additional CSS statement: .lg\:w-10/12, .lg\:w-10\/12 { width: 90% !important; } I put the classname WITH and WITHOUT backslash before it. Nevertheless the !important new CSS is NOT accepted. The width is (as shown in WebDeveloper of Firefox) still 50%. What w
  13. Occasionally I load a web page which contains a text line and immediately appended after the right side an image <img> I want to let the <img> start in a next line. So I need a kind of <br> separation between text and image (not with <P>). However I have no access to the original webserver but want to apply a modification afterwards (after loading) I can imagine that there is a CSS property (for <img>) which let me tell the browser engine "put in next line". How can I achieve this in detail? Peter
  14. Assume I have a CSS background key similar to .logo { background: url(/static/foobar/mylogo.jpg) 0px -no-repeat; } Is there a way to convert this background property into a foreground image by Javascript? All other configurations (margin, padding, background-position-x, background-position-,....) should remain untouched or converted accordingly.
  15. Have a look at the following webpage: https://www.makeuseof.com/tag/music-player-apps-android/ When you print this webpage (from Firefox) into a *.pdf file then only the first page (of the core article) is printed. The remaining article text is suddenly cut. Why? Exactly which CSS statement is responsible for this cut? Peter
  16. At first an example: <div class="foobar" ....>.... <div class="....." ...>..... <div class="....." ....>.... <div class="....." ....>..... <img src="https:\\www.imgdomain.com\..." ....></img> ...</div> ....</div> ....</div> ....</div> How do I address the following elements: Find <img> with src="https:\www.imgdomain.com* and go upwards in hierarchy until a <div> element w
  17. Sorry, they changed the headline meanwhile. Take just the current headline or first paragraph of core article Thank you
  18. Lets take an example from a german online magazine: https://m.pnn.de/coronavirus-in-europa-spanien-hat-nun-mehr-bestaetigte-infektionen-als-italien/25560996.html RIght click on the headline beginning with "Coronavirus in Europa Spanien hat nun mehr" and select "inspect" from context menu The WebDeveloper I do NOT find a valid font-family name. All existing there are either disabled or have a value "inherited". So it must be the browser default which is Courier New. But this font is NEVER "Courier New"! So how do I find out the real font family name otherwise
  19. Assume I want to print a Wikipedia article e.g. https://en.wikipedia.org/wiki/Blu-ray into a pdf file. I click on the left side on "Printable version" ....and got a *.pdf document which contains text with ugly big font-size and not appropriate line-height. The font-size and line-height is significantly different from what I see on the screen. I want to change these CSS values (later after loading). But where do I find the correspond
  20. Sometimes when I inspect the web page HTML/CSS code and search for the font-size and line-height of a certain text I can not find it. When I right-click (in Firefox) on this certain text and select "Inspect element" the corresponding HTML/CSS code is shown in the lower pane in WebDeveloper. However in the lower right sub pane I do not find the real, final font-size and Line-height. All occurencies are labeled as "inherited" Inherited from what? I expect to get at least one valid font-size and line-height CSS value in the cascade chain. Lets take an example from a g
  21. At first lets have a look at an example webpage: https://www.thewindowsclub.com/most-useful-commands-for-powercfg-command-line As you can see the article contains some <pre> blocks which in turn contain commands lines which are NOT wrapped at the browser window end. Instead a horizontal slider is displayed which let user scroll to the currently invisible part of the command line. Now if I want to print this page (into *.png or *.pdf) important parts of these commands are NOT displayed. How can I apply some CSS/Javascript commands which tell the rendering engine t
  22. Lets take an example webpage: https://www.thewindowsclub.com/windows-task-scheduler-not-running How can I (by modifying the CSS code after loading) justify all images of the main article to the left? As you can see they are currently centered. Peter
  23. When I print occasionally web pages into a pdf file then images on this web pages are NOT split. When an image does not fit on the current pdf page then a page break is inserted and the image is put on the top of the next pdf page. How can I allow image split in pdf printing (if necessary) for ALL images on the current web page? Is there a corresponding attribute for the <img> tag? Peter
  24. Lets talk on the following (simplified) example webpage: https://blogs.systweak.com/uninstall-unwanted-programs-on-windows-10/ I did now the following: - I opened Firefox--WebDeveloper - I deleted the element <header class="site-header">.... </header> in WebDeveloper - I changed in WebDeveloper all the values for CSS key ".article-shadow" and attributes margin-top, padding and border-radius to 0 As you can see from the following snapshot the headline "Easy Tricks to uninstall Unwanted...." appears in browser window directly below the top border.
  • Create New...