Notice: To Install styles, click the "Show Css Code" button first. The install button will work after that.
The devs are no longer actively involved in the forum, so any bug reports regarding the extension or website should be sent to them directly at contact@userstyles.org.

How Do I Change Color of Date in this Google Page? Simple Request

Hi guys... Take a look at the attached screen shot. Circled in red is the date in google I want to change to white. I tried using "span" but that code is too general and can affect other fonts. Whats the exact code to change this?

The URL in google for this is here:
https://www.google.com/search?q=Replicel&ie=utf-8&oe=utf-8

.
1920 x 1080 - 434K

Comments

  • edited November 2017 Firefox
    Okay, Google's class names could be random gibberish, but right now, for me, this works:
      .kno-fv > br + span {
    color: blue !important;
    }
    It uses the parent element's class name, and the previous element (<br>) to specifically identify that second span using an adjacent sibling selector (+).

    Edit: I tested with blue because I have a white page background...
  • edited November 2017 Chrome
    Jefferson said:



      .kno-fv > br + span {
    color: blue !important;
    }
    Hi jefferson.. Thanks that works. How did you get to that code?
  • https://www.w3schools.com/cssref/css_selectors.asp
    image

    You can also make this in that way:
    span[style="font-size:11px;padding-top:3px;color:#777"] {
    color: red !important;
    }
    but better use Jefferson code
  • How did you get to that code?

    Using the inspector (right-click > Inspect Element) I could see it was a span that didn't have any of its own unique identifiers, so I looked at its parent element. The parent contains multiple spans, so I had to find a way to target just the one. It is the only one with a br element just before it, so that is the formula: use a regular selector for the br element, then a + to select its adjacent "sibling".
  • Jefferson said:

    How did you get to that code?

    Using the inspector (right-click > Inspect Element) I could see it was a span that didn't have any of its own unique identifiers, so I looked at its parent element. The parent contains multiple spans, so I had to find a way to target just the one. It is the only one with a br element just before it, so that is the formula: use a regular selector for the br element, then a + to select its adjacent "sibling".
    I wish I knew how you did this because I tried seeing what you're seeing on my end with inspector. But I cant see it.

    Anyway I got another small issue. For this, search "ambien" in google. Please look at the screen shot. Circled in red are dots that indicate the mini page you're on. How can I color both of these dots?

    Thanks for your help also Pabli !!


    1920 x 1080 - 188K
  • edited November 2017 Firefox

    For this, search "ambien" in google. Please look at the screen shot. Circled in red are dots that indicate the mini page you're on. How can I color both of these dots?

    The Inspector shows this HTML for the two dots:
    <div class="_SRk">
    <div class="_xOk imOkwAL_k_Uw-maqlHhs-I4g t7iPNCE6YvC__selected"></div>
    <div class="_xOk imOkwAL_k_Uw-maqlHhs-I4g"></div>
    </div>
    There is a base background color, and then a different background color for the one with __selected in the class name. You could try:
      ._SRk > div { background-color: #888 !important; }
    ._SRk > div[class*="__selected"] { background-color: #eee !important; }
    Again, this assumes the _SRk class name is stable. Which I do not know.
  • Hi Jefferson,

    Thanks man.. that worked perfectly!
Sign In or Register to comment.