Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Is there a way to make the background BLACK on Google Sheets?

Go to https://docs.google.com/spreadsheets/u/0/
And make an document, I can't find the background element (the grey background behind the table)

Does anyone can help me?

Comments

  • a screenshot?
  • Don't know what background you are talking about.
    If I click the link the grey background is just in the body element and if I create a document there is no visible background left.
  • pierO'nMu said:

    a screenshot?

    Don't know what background you are talking about.
    If I click the link the grey background is just in the body element and if I create a document there is no visible background left.

    I've attached the image, I can't change the color of the background where all the red arrows are. Thanks!
  • edited August 9 Firefox
    You should have mentioned that it's necessary to delete rows and only leave a few.

    The color of that background is #f3f3f3.
    This color is only present in the css classes
    .dcs-f-dcs-cb-dcs-yc.dcs-f-dcs-cb-dcs-df
    .dcs-s-dcs-t-dcs-wh button[disabled]
    .dcs-hb-dcs-ef-dcs-kc-dcs-cb-dcs-df
    Each time just as border colour, so probably irrelevant for us.

    Its equivalent rgb(243, 243, 243) or rgb(243, 243, 243, 1) can't be found anywhere, so the colour #f3f3f3 may be created by an opacity effect?

    However, that CSS seems to be applied and processed by some fancy JS stuff first, so you can't access those classes directly.

    Maybe this causes Stylish to not work at all at some parts of the page, even with !important.
    Example: IDs cannot be adressed but classes can.
    #0-scrollable {background:green !important;} doesn't work, but
    .grid-scrollable-wrapper {background:green !important;} does. It's the exact same div.

    This works on the whole inner container
    .grid-scrollable-wrapper .goog-inline-block:last-of-type
    { background-color:#F0F !important; }
    But it's not what we want.
    .grid-scrollable-wrapper .goog-inline-block:last-of-type > *
    { background-color:#F0F !important; }
    or even
    .grid-scrollable-wrapper .goog-inline-block:last-of-type *
    { background-color:#F0F !important; }
    don't colour that area.

    Summary: I don't know how to change the colour of that background.
  • edited August 9 Firefox
    impossible with CSS, it's in the element canvas
  • edited August 9 Chrome
    Far from ideal, but you could always use filters as a last resort. Not much else you can do with canvas.

    Black:

    canvas{filter: invert(1)hue-rotate(180deg);}
  • Far from ideal, but you could always use filters as a last resort. Not much else you can do with canvas.

    Black:

    canvas{filter: invert(1)hue-rotate(180deg);}

    That inverts the whole webpage, is there a way to apply this filter only to the background?
  • Lucian B. said:

    That inverts the whole webpage

    Not really. It inverts the canvas. I didn't look at this one in particular, but they can include all sorts of elements that are off-limits to normal CSS manipulation, perhaps even whole webpages. To actually invert the whole webpage, you'd typically apply the filter to the html.
    Lucian B. said:

    is there a way to apply this filter only to the background?

    Nope. I said it was an option. I didn't say it was a great one, but in some cases, better than nothing. Depends what you're looking to accomplish.
  • Anagrammar and pierO'nMu are right. This reaches the limits of CSS and therefore Stylish.
    I'm sure you could change it with a greasemonkey script but probably you need to dive deep into the Javascript of this almost 15MB (unpacked) codebase...
    Google docs is a very good example of a nontypical homepage, it's an online application.
Sign In or Register to comment.