Center Google

edited September 17 in Style Development [?]
Hi,
I try to center google and I need your help for 2 thing please :

1- Can't center tools panels (https://imgur.com/zlDCXMQ), how should I do it please ?

2- how should I do it to make tools on google always be visible ? Each time i leave google and come back tools are not visible by default, have to click on tools button each time (https://imgur.com/Zaomn67)

Script actually:


#tsf {
margin: auto!important;
}

#gb {
width: 1170px!important;
margin: auto!important;
right: 20px!important;
}

.mw {
margin: auto!important;
width: 1010px!important;
margin-top: -3px!important;
}

#appbar, #hdtbSum, .hdtb-mn-cont {
width: 1010px!important;
margin: auto!important;
}

#searchform.mdm.jsrp {
margin: auto!important;
width: 2315px!important;
}


(i try to upload screenshot but each time "internal error" so uploaded on imgur, hope it's ok, and sorry for my bad english, im french ;p)

Comments

  • Try this:

    .mw,
    .big form#tsf,
    form#tsf {
        max-width: 100% !important; }
    #hdtb-msb > .hdtb-mitem:first-child,
    .ab_tnav_wrp,
    #cnt #center_col,
    .mw #center_col {
        margin: auto !important; }
    .col {
        width: 100% !important; }
    #hdtb-msb {
        float: none !important;
        justify-content: center !important; }
    #resultStats {
        left: calc(50% - 316px) !important; }
    .fbar {
        text-align: center !important; }
    #hdtb-msb .hdtb-mitem:first-child.hdtb-msel,
    #hdtb-msb .hdtb-mitem:first-child.hdtb-msel-pre {
        margin-left: 0 !important; }
    .tsf-p {
        padding-left: 0 !important;
        max-width: unset !important; }
    .sfibbbc {
        margin: -3px auto 0 auto !important; }
    
    /* Tools */
    #hdtb-mn-gp {
        display: none !important; }
    .hdtb-mn-cont {
        text-align: center !important; }
    
  • thanks, i have find how to center all, just search now how to make tools visible by default.
    If it's in your code, didn't work. Do you know how to do ?

    (in your code, little bug with search bar on home page google)
  • (in your code, little bug with search bar on home page google)

    Don't target @-moz-document domain("google.com"), it's for @-moz-document url-prefix("https://www.google.com/search") only as home page already is centered and stuff like maps.google.com or docs.google.com shouldn't be targeted either.

    how to make tools visible by default

    Try this:

    #hdtbMenus { top: 68px !important; }
    .hdtb-td-h { display: block !important; }
    
  • edited September 19 [?]

    Try this:

    #hdtbMenus { top: 68px !important; }
    .hdtb-td-h { display: block !important; }
    
    Tools bug on image page
  • edited September 19 [?]
    Try this
    @-moz-document url-prefix("https://www.google.com/search") {
    .mw,
    .big form#tsf,
    form#tsf {
    max-width: 100% !important; }
    #hdtb-msb > .hdtb-mitem:first-child,
    .ab_tnav_wrp,
    #cnt #center_col,
    .mw #center_col {
    margin: auto !important; }
    .col {
    width: 100% !important; }
    #hdtb-msb {
    float: none !important;
    justify-content: center !important; }
    #resultStats {
    left: calc(50% - 316px) !important;
    top: 20px !important; }
    .fbar {
    text-align: center !important; }
    #hdtb-msb .hdtb-mitem:first-child {
    margin-left: 0 !important; }
    .tsf-p {
    padding-left: 0 !important;
    max-width: unset !important; }
    .sfibbbc {
    margin: -3px auto 0 auto !important; }

    /* Tools */
    #hdtb-mn-gp {
    display: none !important; }
    .hdtb-mn-cont {
    text-align: center !important; }

    .hdtb-td-c {
    display: block !important; }
    #hdtbMenus[aria-expanded="false"] {
    top: 65px !important; }
    #rshdr #hdtbMenus[aria-expanded="false"] {
    top: 12px !important; }
    }
  • Also, try this:
    https://userstyles.org/styles/161973/

    (stolen from @calico)
  • Thanks man for your help, it's okay for center google but i need help for tools menu.
    There is a bug, the tools appear by default but not the background in image page : https://i.imgur.com/RFhSdbT.jpg
    Need to be like this : https://imgur.com/AhOQ67d.jpg

    I think it's a thing with .hdtbMenus.hdtb-td-o maybe, but idk, can you help me for this?
  • Hmm, maybe check your other styles for errors/interference.
    With the code I gave you above it looks good / like this for me:
    https://screenshots.firefox.com/fozsPKZIug8wmlHH/www.google.de

    Deactivate the other stuff and only import the code above.
  • Yeah, it's a bug with ublock filter i made,, fix it, but code not down the line like when you click on tools, just tools appear, i try to make the same thing like when you click on tools (dont know if im clear sorry ^^). In other page that works but not on image page, dont know why :/
  • You don't have to click on tools. As you wanted, my code already makes the tools submenu visible all the time (as can be seen in my screenshot).

    I'm not sure if I understand you correctly or if you still have styles installed interfering with the code above.
  • No style interfering, try with a new install firefox.
    Look when you click on tools without style, and look without click on tools with your style, it's not the same.
    When you click on tools, tools submenu appear above the line, but with your style appear below.
    Wanna try to make a code like when you click on tools, submenu appear above the line.
    I know it's just a detail but i wanna try to make like that, if possible, that works on every page apart on image page :/
  • mmhm I'm not very prone on looking into this as it's really just a little detail.
    You could also make a tampermonkey userscript to always expand "tools" so we don't have to rebuild the google style. The less you change, the more probable it is to work for long and also with other styles.
  • edited October 24 [?]

    Try this

    @-moz-document url-prefix("https://www.google.com/search") {
    .mw,
    .big form#tsf,
    form#tsf { https://8ballpool.onl/ https://googlehangouts.ooo/ https://omegle.onl/
    max-width: 100% !important; }
    #hdtb-msb > .hdtb-mitem:first-child,
    .ab_tnav_wrp,
    #cnt #center_col,
    .mw #center_col {
    margin: auto !important; }
    .col {
    width: 100% !important; }
    #hdtb-msb {
    float: none !important;
    justify-content: center !important; }
    #resultStats {
    left: calc(50% - 316px) !important;
    top: 20px !important; }
    .fbar {
    text-align: center !important; }
    #hdtb-msb .hdtb-mitem:first-child {
    margin-left: 0 !important; }
    .tsf-p {
    padding-left: 0 !important;
    max-width: unset !important; }
    .sfibbbc {
    margin: -3px auto 0 auto !important; }

    /* Tools */
    #hdtb-mn-gp {
    display: none !important; }
    .hdtb-mn-cont {
    text-align: center !important; }

    .hdtb-td-c {
    display: block !important; }
    #hdtbMenus[aria-expanded="false"] {
    top: 65px !important; }
    #rshdr #hdtbMenus[aria-expanded="false"] {
    top: 12px !important; }
    }
    thanks, i have find how to center all, just search now how to make tools visible by default.
    If it's in your code, didn't work. Do you know how to do ?

    (in your code, little bug with search bar on home page google)
  • @-moz-document url-prefix("https://www.google.com/search") {
    .mw,
    .big form#tsf,
    form#tsf { https://8ballpool.onl/ https://googlehangouts.ooo/ https://omegle.onl/
    max-width: 100% !important; }
    #hdtb-msb > .hdtb-mitem:first-child,
    .ab_tnav_wrp,
    #cnt #center_col,
    .mw #center_col {
    margin: auto !important; } https://192-168-1-1.fun/
    .col {
    width: 100% !important; }
    #hdtb-msb {
    float: none !important;
    justify-content: center !important; }
    #resultStats {
    left: calc(50% - 316px) !important;
    top: 20px !important; }
    .fbar {
    text-align: center !important; }
    #hdtb-msb .hdtb-mitem:first-child {
    margin-left: 0 !important; }
    .tsf-p {
    padding-left: 0 !important;
    max-width: unset !important; }
    .sfibbbc {
    margin: -3px auto 0 auto !important; }

    /* Tools */
    #hdtb-mn-gp {
    display: none !important; }
    .hdtb-mn-cont {
    text-align: center !important; }

    .hdtb-td-c {
    display: block !important; }
    #hdtbMenus[aria-expanded="false"] {
    top: 65px !important; }
    #rshdr #hdtbMenus[aria-expanded="false"] {
    top: 12px !important; }
    }
Sign In or Register to comment.