Center Google

NicotherZ

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)

stonecrusher

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; }

NicotherZ

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)

stonecrusher

(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; }

NicotherZ

stonecrusher said:

Try this:

#hdtbMenus { top: 68px !important; }
.hdtb-td-h { display: block !important; }

Tools bug on image page

stonecrusher

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; }
}

stonecrusher

Also, try this:
https://userstyles.org/styles/161973/

(stolen from @calico)

NicotherZ

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?

stonecrusher

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.

NicotherZ

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 :/

stonecrusher

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.

NicotherZ

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 :/

stonecrusher

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.