Please guide a noob to change site background colours



  • Hi. I have extensions Custom Style Script & Stylus installed [SS 1.8.755.3 (Official Build) dev (64-bit)].

    i've had some fun dabbling with them to customise my V Forum pages with a range of purple & lavender tints to my taste. However i cheated here, coz i started off with Vivaldi Sprucey Bonus from https://userstyles.org/styles/133928/vivaldi-sprucey-bonus

    Now, i'd like to see if i can customise some of my other regular websites, but i've been unable to deduce how to obtain their relevant CSS text which i can then base my changes on. Eg, for The Guardian https://www.theguardian.com/au, i'd like to change the white "background" [sorry, i don't know any proper jargon for web design] to a different colour.

    i thought maybe if i right-clicked on the page's white "background" & then picked Inspect, that i might be able to see the applicable CSS [in Elements - Styles] & copy it to my text editor to edit, before then pasting it into Custom Style Script. Unfortunately once i'm in Elements - Styles, i can't see how to find the actual CSS.

    Earlier i was kindly given this advice, https://forum.vivaldi.net/post/117519 , but i still can't understand how to proceed.

    Can anyone please give me a hint about the best way to obtain the [or any] website's CSS [& find the code for its background colour], so i can then begin to edit it?



  • //UPDATE:
    Use a Stylus
    Import this as Mozilla format:

    @-moz-document domain("theguardian.com") {
    article, .fc-item__container, .fc-container, .facia-container { background-color: violet }
    }
    

    Works for me. OK, violet is only for you ;)

    please feel free to ask me.
    I will try to explain for non web-dev people.



  • This is quite crude and it uses Stylish. So you could do something similar with Stylus, I guess:

    0_1487251381433_20170216184958.png



  • @aesouza Hmm, not all people like to read a screenshot. Like me, as i am :older_woman: and get bad sight.

    Please export your Style as Mozilla format and post here.



  • @Gwen-Dragon said in Please guide a noob to change site background colours:

    @aesouza Hmm, not all people like to read a screenshot. Like me, as i am :older_woman: and get bad sight.

    Please export your Style as Mozilla format and post here.

    Isn't it true that Vivaldi can't use @-moz-document?

    So posting Mozilla format won't "illustrate" how it's done in Vivaldi.

    * {background: pink !important }
    }
    
    @-moz-document domain("www.theguardian.com") {
    * {background: khaki !important }
    }
    
    @-moz-document domain("askubuntu.com") {
    * { background: grey !important}
    }


  • Thank you both very much!!

    I've mucked about with both your suggestions, & then tried some variations [in both my extensions], with some successes & failures. I need [/want] to learn soooooooo much more about this [it seems kinda fun :-) ].

    Can i ask pls-- does Vivaldi's Developer Tools - Inspect let me discover the current CSS for each element on a page [if it does, then so far i'm not understanding how to use it correctly]?

    What i'm aiming at, i think, is to take each of my daily websites, identify certain elements that i'd like to change background &/or font colours, [somehow] find the CSS that is controlling the current appearance, then edit it & apply "my style" using one or other of my extensions.

    Does that make any sense [you can see i clearly know nothing about this; sorry]?



  • @aesouza said in Please guide a noob to change site background colours:

    Isn't it true that Vivaldi can't use @-moz-document?

    Stylus/Stylish can import this format.



  • @Gwen-Dragon said in Please guide a noob to change site background colours:

    ..
    Stylus/Stylish can import this format.

    Good to know. Thanks.



  • @-moz-document rule only used internally by Firefox Gecko mostly to alter their GUI.
    Of course Mozilla plan to fully kick out Gecko at the end of 2017, so we won't see this rule next year being used.

    Chromium (Vivaldi based) doesn't care with this rule. Either you put it there or not it just will be ignored.
    It happen Stylish/Stylus/osprey help us to scrap it when we use import.



  • A super Ugly & In-complete tutorial for using DevTools Element Picker to Change Color

    Say, we use https://www.theguardian.com/au for example
    element_picker_01
    And, we plan to change the White background on main area to something else.

    Open DevTools (F12), and use its Element Picker to point on White area, say, around Singapore. Note, by doing this way you could be sure it point to right place on Element page. Using Ctrl+Shift+i is for doing something else.
    element_picker_02
    So here it point to div class="fc-container__inner". Let start testing.
    On other side of panel, search for "fc-container__inner", any will do, it just for testing. Here we got 3.

    Add new property background-color: (color). I take yellow.
    element_picker_03

    Check the result.
    element_picker_04

    Now, put all in to Stylish/Stylus/osprey.
    element_picker_05

    We're done.

    Well, basically you could start your journey to alter Website experiences.



  • @dLeon -- Thank you so much for this. Your guidance has really helped me in a big way. I'm very grateful to you, & indeed to everyone who kindly helped me. :-) What a lovely V-Community ... best browser, best community, yay.



  • @dLeon said in Please guide a noob to change site background colours:

    A super Ugly & In-complete tutorial for using DevTools Element Picker to Change Color
    ...
    Open DevTools (F12), and use its Element Picker to point on White area, say, around Singapore. Note, by doing this way you could be sure it point to right place on Element page. ...

    Another way is to use Isildur's tip here to start Vivaldi with --debug-packed-apps --silent-debugger-extension-api. That way, any time you want to inspect anything, just right-click on it and the Dev Tools window opens right where you want it. Rest remains as you describe.



  • @aesouza
    That tip if we want to find Vivaldi UI stylesheet.
    A bit way to advance for current thread. :smile:



  • @aesouza -- is that launcher-string mainly a Win/Mac thing? I use Linux, without those launch commands, & all i have to do is right-click where i want then pick Inspect from the bottom of the context menu. I do not have to manually launch Dev Tools first.
    ................................................................................................................
    Tower & Lappy = Maui Linux 2.1 "Blue Tang" x64 Plasma 5.8.4.



  • @Steffie
    You mean this?

    --debug-packed-apps --silent-debugger-extension-api

    No, that's universal flags/command-line switch excepted on Chromium in any OS. And also for advance use.

    More about that is on;
    List of Chromium Command Line Switches

    I also mainly Linux, btw.



  • @dLeon -- yes, that's what i meant, but my point was that i don't use that launcher, yet can still easily get to Inspect like i described. Hence it made me wonder what benefit that launch command provides... but don't worry, as you said earlier, it's no doubt for advanced stuff waaaaaaaaaaaaaay above my head ;-)



  • @dLeon said in Please guide a noob to change site background colours:

    @aesouza
    That tip if we want to find Vivaldi UI stylesheet.
    A bit way to advance for current thread. :smile:

    It works on web page content as well. Please try!



  • @aesouza
    Yes, I know it also work. It still way too advance way for this thread by using Chromium command-line. Something that un-supported by even by Chromium for "just" user case.

    Just make sure we'll be there if @Steffie someday decide to jump in to the fire, shall we? :laughing:



  • Debug the UI with a special command line in a desktop shortcut:
    vivaldi --flag-switches-begin --debug-packed-apps --silent-debugger-extension-api --flag-switches-end

    Then you can inspect Vivaldi UI and extensions by context menu "Inspect...".



  • @dLeon said in Please guide a noob to change site background colours:

    @aesouza
    Yes, I know it also work. It still way too advance way for this thread by using Chromium command-line. Something that un-supported by even by Chromium for "just" user case.

    Just make sure we'll be there if @Steffie someday decide to jump in to the fire, shall we? :laughing:

    Actually, one doesn't need to use the command-line at all. Just edit (on my Ubuntu system) /usr/share/applications/vivaldi-snapshot.desktop and change
    Exec=/usr/bin/vivaldi-snapshot %U
    to
    Exec=/usr/bin/vivaldi-snapshot --debug-packed-apps --silent-debugger-extension-api %U

    After that, each time one launches the browser, it will automatically use those switches.

    Doing it this way is simpler, IMHO, because one saves steps. No need to first click on the element picker and then go back to the main window; just right-click on what you want and the Dev Tools window opens to where you want.

    Of course, each time Vivaldi updates, the .desktop file will be over-written. So one could copy the file over to ~/.local/share/applications and edit it there.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.