Google News in Dark Grey

edited April 2008 in Style Requests
I'm no good at coding or anything that involves html, XML, or basically anything. So I was wondering if someone could make a dark grey style for Google News that kind of looks like Valacar's styles.


  • Orangel,

    Like you, I'm not a programmer either. However, I do use the Google News widget on my customized iGoogle home

    With a lot of help from others on this forum and by studying code written for other themes and a lot of trial and error, I
    have learned enough to handle some of the basics. I believe the code below will provide the look you want, or at least
    get you started in the right direction. Everything is pretty well documented.

    @namespace url(;
    @-moz-document domain("") {

    /*Changes background color for Google News module TITLE and Title text color*/
    .modtitle {background-color:#909e9f !important}
    #m_114 .modtitle_text {color:#1e1e20 !important}

    /*Changes background color of Google News module*/
    #m_114 {background-color:#262626 !important}

    /*Hides miscellaneous junk in Google News module*/
    [id^=tl_114_0_], [id^=tl_114_1_], [id^=tl_114_2_], [id^=tl_114_3_], [id^=tl_114_4_],
    [id^=tl_114_5_], [id^=tl_114_6_], .imgsrc, .fl {display:none !important}

    /*Changes text color for Google News Menu edit function (+ expander)*/
    #m_114 div{color:#d1d1d1 !important}
    #m_114 a{color:#ffff99 !important}


    I recommend installing the widget in a separate tab for testing purposes. One change you will have to make is to edit
    references to the Google News module number to match what gets assigned to the module you install since this is
    different for every installation. By this I mean everywhere you see a reference to the number 114 above, as in #m_114,
    id^=tl_114_0, etc., change it to match the number assigned to your Google News module.

    You can easily determine this number for your module by installing the Aardvark extension. After installation, right click
    the page with the module showing, click on Aardvark, and hold th cursor over the module heading.

    Good luck.
  • Thanks, TRT. But I was talking about the actual google news ( or Thanks, anyways!
  • edited April 2008
    Here's a very quick version of it. I just applied my dark gray web search style to the news page and very quickly fixed a few images were replaced, so you're stuck with the white background logos, etc.

    I don't use google news, so you're on you're own from here. If something is messed up, you can try asking one of the nice people on this forum to fix it.

    @namespace url(; @-moz-document url-prefix(, url-prefix( { body { background: #262626 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAENCAYAAADOoA9GAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAABZSURBVHjaYmBgYPjPACP+MYFIEPEflfUflwQRSojgUiyGX4IkJTTRi5P4R39T/tFByT8qa6OJof8GPJgGPjHQI/FTki+pWFCQXlQhsZiBmBFMwLlgwAgQYAAYPe0bQ81rlgAAAABJRU5ErkJggg==") top left repeat-x !important; color: #fff !important; } a:link, a:visited, .link { color: #ccc !important; } a:active, .link:active { color: #fff !important; } :focus { outline: none; } div, td, font[color="#000000"] { color: #fff !important; } .a, .g font[color="#008000"] { color: #6e6e6e !important; } .flc, a.fl, .fl2, .fl2:visited, .bl a, .f + a, .f .w { color: #7b7b7b !important; } .g .w { color: #ff6 !important; } .f, font[color="#666666"], font[color="#6f6f6f"], font[color="#555555"], font[color="#0000ff"] { color: #ffd !important; } font.p:not([size="-1"]) { color: #a4ff53 !important; } .aAutoComplete .cAutoComplete, .google-ac-a .google-ac-c { color: #000 !important; } .aAutoComplete .dAutoComplete, .google-ac-a .google-ac-d { color: green !important; } .google-ac-e td { color: blue !important; } input *, textarea *, .aAutoComplete { background-color: -moz-Field !important; color: -moz-fieldtext !important; } iframe { background-color: #fff !important; } table[bgcolor="#efefef"], table[bgcolor="#ffff99"] { background: #333 !important; } .l { color: #ffc !important; } table[style*="border: 1px solid rgb(0, 0, 153)"] { border-color: #444 !important; } span[style*="color: rgb(0, 0, 153)"] { color: #999 !important; } .lh table:first-child+a[id] { color: #fff !important; } .lh table:first-child+a[id]:visited { opacity: 0.5 !important; } table[bgcolor="#cccccc"] { background: #333 !important; } table[bgcolor="#ffffff"] { background: #000 !important; } tr[bgcolor="#efefef"] { background: #444 !important; } .leftnav + td[bgcolor="#cccccc"] { background: #555 !important; } .leftnav td[bgcolor="#ffffff"] { background: #000 !important; } /* google bar (including popup menu) ------------------------------------*/ #gbi { background: #343434 !important; border-color: #575757 !important; } #gbar .gb2 a:hover { background: #676767 !important; color: #fff !important; } #gbh, .gbh { border: none !important; } .gb2 div { border-color: #575757 !important; } /* bars -------*/ td[bgcolor="#efefef"], #section-header { background: #666 !important; } .ks { color: #fff !important; } .j { color: #ccc !important; } }
Sign In or Register to comment.