css editor

barbudo2005

This is a list of the most used Commands in CSS, to speed up your learning curve:

font-family: Verdana !important;
font-style: normal !important;
font-style: italic !important;
font-variant: normal !important;
text-decoration: underline !important ;
text-decoration-color: navy !important;
font-weight: 500;
font-weight: bold ! important;
font-size: 11px !important; 
text-transform: uppercase!important ;
text-rendering: optimizelegibility !important;
 backdrop-filter: blur(10px);

filter: invert(100%);
background: #000

 
line-height: 10px!important;
line-height: 120% !important;

text-align: justify ! important;
white-space: nowrap ! important;
vertical-align: middle !important;

SECTORS

max-height: 20px !important;
min-height: 20px !important;
  
line-height: 25px !important;
line-height: 90% !important;

padding-top: 0px !important;
padding-bottom: 0px !important;
padding-right: 15px !important;
padding-left: 15px !important;
border: none !important;


max-width: 10px !important;
margin: -3px 0  -5px 0 !important; 
vertical-align: middle !important;
margin-right: 5px !important;

display:none !important;

position:absolute !important;
position:static !important;
font-style: italic !important;
 font-size: 11px !important; 
 transform: scale(2.5)   !important;
 transform-origin:100% 0   !important;

background-image: none !important;
background-color: #E3EEFB ! important;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 0;

LesAHay

@barbudo2005
Hi
Thanks for your reply.
I am a little little familiar with some of the more common commands such as those in your list, but thanks anyway.
I only use CSS to change the simple display elements and have never delved much deeper.

kichrot

@LesAHay по моему мнению лучше всех работает это расширение User JavaScript and CSS

LesAHay

@kichrot said in css editor:

по моему мнению лучше всех работает это расширение

Hi
Thank you for your reply.
Stylus does work, but as I couldn't get some of the others to work in Vivaldi, I can't really compare.

luetage

@LesAHay Generally all these extensions do the same thing. They use Javascript to inject a stylesheet into the target page. Strictly speaking they aren’t needed, as Vivaldi has the option to load .user.js files directly as an extension after enabling developer mode in vivaldi://extensions. This is the most straightforward way, but you can also install a userscript manager such as Violentmonkey to collect and manage these userscripts. All the other extensions you encountered do basically the same, with a narrowed feature set and streamlined user experience.

LesAHay

@luetage
Thanks for your reply.
I must check that out. I do prefer to not have to use extensions due to years of issues turning out to be from an extension(s) , or them falling out of usability with browser updates etc.

luetage

@LesAHay Userscripts you write yourself are what you want then. It’s basically always the same boilerplate for CSS changes, this is what I normally use:

// ==UserScript==
// @name       
// @namespace   
// @updateURL   
// @description 
// @version     
// @author      
// @match       
// @exclude   
// @run-at      document-start
// ==/UserScript==

(function () {
  "use strict";
  const css = `
    YOUR CSS CODE
  `;
  function _async() {
    return new Promise((resolve) => {
      requestAnimationFrame(resolve);
    });
  }
  async function _wait() {
    while (!document.body) {
      await _async();
    }
    return true;
  }
  function inject() {
    _wait().then(() => {
      const style = document.createElement("style");
      style.id = "usrjs-A-NAME";
      style.innerHTML = css;
      document.getElementsByTagName("head")[0].appendChild(style);
    });
  }
  inject();
})();

LesAHay

@luetage
Hi
OK, I will give that a miss then. Although I am not a stranger to coding, I only ever use VB.NET and that script looks like a whole lot of learning to me I really appreciate your help though.

Truemotion

@luetage Thank you! Nice to know that there is no need for extensions to do that.

caseybarx

@luetage where are userscripts added? I dont see the userscripts I added in dev tools sources?

I am trying to troubleshoot some performance issues with the code but dont see it. thanks

luetage

@caseybarx Use a userscript manager, for example https://violentmonkey.github.io. But you can also save your code to a .user.js file and drop it on the extension page after enabling developer mode.

caseybarx

@luetage I dragged a usersript file into the extension page and added my javascript that way. It works but seems to increase my CPU so I am trying to troubleshoot the code in the dev tools but I dont see the javascript listed in the sources section.

For userscript files added to the extensions page where does the code show up in the dev tools interface?

luetage

@caseybarx On every webpage your userscript runs on. Both in the sources tab, but also in the elements tab, the CSS is added to the head element after all, you can look for the id you used.

Wait, you just posted here to use some other userscript perhaps and just asked how to add it?